Project Overview
Smartbox is an experience gift giving company. Customers buy boxes based on a theme, for example Getaways. These boxes contain a voucher which can be used at thousands of venues for different experiences like a weekend getaway at a hotel with breakfast for 2 people.
To book an experience, customers would log into their account on the smartbox website and
see all the venues within their box. However we have a system called “Out of Box”, which allows the customer to see any relevant experience across our entire range regardless of what box or price as long as they enter in their location and date.
This aims to help the customer find an available hotel in the area on the date they selected because they are no longer restricted to just the venues in their box.
This case study shows how we aimed to improved this system to help users find their ideal experience and increase booking conversion.
Problem
Out of Box (OOB for short) aimed to help users find availability for the location they wanted on a particular date, although it had proved to be a successful feature, the true potential hadn’t been reflected through user uptake.
We set out to uncover the issues users were having with the feature and to come up with ideas on how to improve its effectiveness.
Goal
The goal of this project was to find ways to improve OOB to make it perform better and for a wider group of users. To do this we firstly needed to understand;
- How it is being used now
- What issues are users having with it
- Uncover any missed opportunities there might be to help the user
We went through a number of different UX processes to uncover the problems and to provide answers to solve the issues
Research & Discovery
Firstly we user tested the current version of OOB to see what problems users where having.
We user tested the flow, remotely with 10 users using usertesting.com. We wanted to see how users interacted with the flow and what were their thoughts and expectations when given a few tasks to follow.
Paired with these usability tests, I watched screen recordings of users on the flow to see in a more natural scenario how people interacted with the flow.
To get more quantitative data I worked alongside the data analytics team and booking stream product owner to review the adobe analytics dashboard which tracked the OOB funnel in order to see how many users were shown this feature, the overall conversion rate and also where the significant drop-off areas along the flow were.
From what we gathered, we discovered that there were three main categories where we could improve upon.
Discoverability of the Feature
OOB was not shown to everyone.
Users are required to enter in search criteria to see the OOB results.
Some were getting distracted by the results in their box and never entered in dates or location.
OOB results under the fold
Users often didn’t scroll all the way down to see the OOB results. There was an info bar, when clicked on would bring the user down to the OOB section however the messaging was not clear on the info bar.
Communication
There were a lot of issues with how we communicated this feature.
The OOB section of results were labeled as "recommendations", however this did not convey the concept of OOB or the value that OOB was offering. It was also mistaken for the standard recommended experiences in their box.
No other information was explained as to why they would have to pay more for certain experiences and they didn't understand why they were different from regular experiences.
The value was unclear and users were left guessing why they might have to pay for some of the OOB experiences. Some correctly assumed some were upgrades but most users didn't understand how they were different from regular experiences
IA & UI Design Issues
There was also very clearly some UI issues especially with the bars of different colours with not a lot of information.
The vignettes were very squashed when they went down to mobile size and they expand with no consistency with the pictures are not being clear or appealing.
Problem Definition
The next step in our process was to gather up the information we had found and to set up a workshop in which we ran through some processes to uncover anything else we may need to address, to align the team and to set priorities and goals and agree on next steps.
Workshop Overview
- Expert Interviews (to find out business priorities)
- How Might We’s (HMWs) (to gather concerns and opportunities)
- Affinity Mapping (to group the HMWs into categories)
- Dot Voting (to narrow the focus and to highlight areas to tackle)
- Coming up with Solutions to address the top voted HMW's
- Dot Voting (to narrow the focus on the top solutions)
- Effort Impact Scale (to prioritise the top voted solutions into an actionable plan short and long term)
What came out of the workshop is that we agreed to work on;
Branding & Messaging
We realised that one of the key areas was to tackle the branding and messaging issue and for that we needed help from the content and branding team.
We set up another workshop to re-brand OOB in such a way that it is clear what it is and what you are getting.
Workshop Overview
- Explaining the issues and goals of the project
- Showing some competitor analysis and examples in the market of well branded features.
- Quick attributions exercise (writing out words that we want our users to associate with our brand)
- Naming ideation exercise (time bound exercises that help create names for products / companies or features)
What came out of the workshop is that we agreed to call OOB “Smartbox Plus”
Ideation & Testing
After prioritising the areas we wanted to focus on, we began Ideation.
The areas to look at were;
Vignettes
I tackled them by listing out the different areas they appear and what is the bare minimum information needed on them. I then had to factor in the different use case for the vignettes in different scenarios.
We had sketch sessions where we quickly iterated on possible designs and narrowed them down to a few different layouts. Looking closely at the IA and restructuring it to make it easy to understand and scalable.
I then created wireframes from those sketches to allow us to get more feedback from users, stakeholders and other designers during our design crit sessions
As the vignettes were an integral part of this project and would influence the layout of the results page we tackled them first.
In other to get feedback from our users I used usability hub to preference test some of the wireframes. This aided my decision process when choosing the final design layout.
Booking Results page
Our goal on this page was to fix the layout so that it utilised the space above the fold more effectively while also given OOB space to be shown.
Here are the two wireframes I came up with
I used preference testing through Usability Hub to get user feedback on which they liked more and why.
This test had 100 participants. Here are some of the comments from the tests that explain why some people chose Version 1.
Booking Filter page
Discoverability was a big issue and we noticed this because users would only see OOB when they entered search criteria. The current layout made it easy for the user to get distracted by the results and try to find something they liked without entering any search criteria.
Our idea was to create a landing page before the listing page so that we could encourage users to enter some search criteria details. This would then show more relevant places and activate OOB.
To test this new flow we needed to get quantitative data behind this solution to see if it would be effective so we decided to A/B test this version verses our control of the current version.
Solution & Impact
Here are the solutions we game up with to solve the issues of discovery / communication, IA and UI design.
The Improved designs increase discoverability of a high value product increasing click through rate by 68% and increased orders and BV by 10X in the first month.
