Big Bus Tours
Quick Buy
Company: Big Bus Tours
My Role: UX / UI Designer
My Team: E-commerce Manager / Development Team
Devices: Desktop / Tablet / Mobile
Skills: UI Design / UX Design / User testing / AB testing
The Solution
-
A design portraying tickets that can easily be compared.
-
Tickets presented in order of value while displaying each of their inclusions and exclusions.
-
An easier way for people to identify the most relevant ticket to them by utilising a colour coding together with a tick and cross system.
-
A faster journey to check out by reducing clicks and removing any usability hurdles.
The Problem
-
Purchasing products on the Big Bus Tours website was confusing to users and there was no immediate way of seeing what inclusions and exclusions tickets had.
-
There was no easy way for users to compare products like-for-like, so they were prevented from getting the best value and most appropriate ticket to suit their needs and budget.
-
The journey to check out was longer than necessary, containing hurdles and proven usability issues.
Sketches & Wireframes
The design process started with sprints creating sketches of potential design solutions. This was the best way to iterate through many design options quickly. The sketches were presented to relevant stakeholders allowing for more brainstorming and further iterations.
UI Design and Prototypes
I designed the UI in Photoshop following digital design style guides and then created prototypes for desktop, mobile and tablet using inVision.
The prototypes were used to show stakeholders and conduct initial testing, allowing for more refined iterations to be created. The prototypes were then used to communicate the idea and functionality to the dev team, enabling them to start work on a functioning MVP.
User Testing
Once we had the MVP in a dev environment, we conducted AB testing using our new design against the old format. This proved very useful, ultimately reinforcing to us based on user feedback that our design was the best solution.
Old Design...
"I would have liked to have seen a table directly comparing the tickets; showing prices & what is included (eg number of tours, additional extras). The customer can then click on the different options to get further information."
"It is not that straight-forward to compare tickets. I would prefer if the features of all tickets are shown on one page. This will make it easier to compare and better understand what each ticket offers."
New Design...
"I like the Tickets and Passes section where it clearly explains the differences between each package and gives a glance of what all are included in the package. I like the colours used, they are very appealing."
"Great layout and easy to use. Pages are clearly labelled. Great Pictures. Very informative."
"I like the look and feel. Everything is nicely spaced. The color scheme is pleasant. It's easy to navigate and find the necessary info."
Takeaway and Results
The result was a nice, clean, easy to use UI design with an optimised user experience. The new design allowed users to compare products in an easy manner and removed any usability issues. The new design also got our users to the check out in a shorter amount of time.
+10.14% Increase in Conversion YoY
+4.11% Increase in AOV
+44.54% Increase in Revenue YoY