Luggage Size Finder
ROAM:
Every piece of luggage is fully colour-customisable so you can create a one-of-a-kind design.
With nine different components that you can colour customise, from the front shell, to the wheels, right down to the stitching, every piece of luggage must start with a size selection.
“As a talented member of our tiny, agile product team, Laura brought the ROAM brand to life in high-performing UX/UI design.”
Chris Steib | Strategy Manager
The original landing page:
The original problem:
Due to the the development restrictions on the Shopify platform, each of the four sizes of luggage had a separate Product Detail Page.
This lead to a frustrating customisation experience for users who decided to change their chosen size halfway through the process and then had to start designing their luggage again.
The experience was therefore much more frictionless if users were confident in their size selection prior to starting customisation.
The ‘All Luggage’ landing page saw a two-fold issue:
Poor Click-Through Rates
High Exit Rates from the next page that users navigated to
This lead us to the hypothesis that users weren’t empowered to make a decision on the size of their luggage before starting the customisation process.
The branded size names further complicated this decision making process ie. users might not know that ‘The Jaunt’ is smaller than ‘The Journey’, but this wasn’t something that the brand team were prepared to test against.
Lastly, the Brand was keen to show a variety of colourways on each different size, making it difficult for the user to understand (without reading the associated copy) that they weren’t simply choosing between four different coloured (but otherwise identical) bags.
The process:
I worked remotely and collaboratively with a Strategy Manager, a Developer, and an Analyst, as well as directly with the product team at ROAM to gain insights into the product specifics when needed.
I worked up various options that were all focused on empowering the user to be able to make a decision on which size of luggage was right for them. These were workshopped with my immediate team to discuss what would make for a the best user experience, as well as from a build perspective.
One idea focused making it easier to tangibly understand how big the luggage was (ie. how tall and wide it was, even once provided with measurements), with common objects with known sizes (eg. a pair of shoes) were presented as a point of reference.
Some ideas focused more on simply comparing one luggage size to the others, using a sticky navigation to remind users of which of the four sizes they were currently viewing.
One idea focused on bringing the primary colour choice into this early stage, to help users to feel more connected to their choice and may then be more inclined to proceed.
The solution:
The chosen solution gave the sense of how the luggage would serve their travel needs.
As well as including the physical dimensions, it also focused on making them relatable in terms of how many days worth of clothing it could hold.
This put users in a practical mindset yet also made them picture packing for a trip, helping them to emotionally connect to the purchase, too.
Communication around the ‘Carry On’ statement was made clearer, indicating that this had been verified by most US airlines.
Using a colour wheel icon, the solution made it clearer at a glance that each piece of luggage was colour-customisable.
The consistent Call To Action button styling and messaging further helped the user to focus on the specifics, rather than the colour choices, at this initial stage.
Bringing in user ratings helped to instil confidence via social proof.
The brand proposition was also highlighted at the top of the page to further instil confidence.
Testing the concept:
The chosen design was built and went through a thorough QA process.
It was then launched on an A/B split, which won out against the control after a 60 day test.
The success:
Unfortunately I no longer have the specific test results for this project, but both goals were achieved:
Increase in Click-Through Rates
Lower Exit Rates from the next page that users navigated to
The page was therefore pushed to 100% visibility.
The solution:
Other solution ideas:
