an easy way
way to buy
bundles
UX/UI DESIGN
ECOMM
MY ROLE
UX/UI Designer
UX DIRECTOR
Billy Lymm
COMPANY
Hanna Andersson
OVERVIEW
Hanna Andersson offers quality kids' clothes that are durable and delightfully designed. Many of Hanna's products pair well together to create a perfect outfit. Unfortunately, there wasn't a way for customers to shop for outfits on the Hanna website. Acting on this opportunity to enhance the shopper's experience, leadership tasked me to design an outfit feature for the Hanna website.
CHALLENGE
The platform that the Hanna website is built on has a lot of functionality limitations. This meant that we'd have to address many technical considerations while designing a product page that offers multiple outfit items. Knowing that we had to adhere to the platform limitations while still providing an efficient outfit purchasing solution, we defined the following project goals -
1
Effectively increase conversion
3
Align with the existing platform capabilities
2
Increase the average order value
4
Provide shoppers with a streamlined experience
MEET THE PRIMARY AUDIENCE
jessica burke
Age
28-32yrs
Earns
$92-130k
Married
w/ 1 kid
MOTIVATIONS
She's an eco-friendly, active mom who invests in durable and sustainably made products.
CORE NEEDS
She's a busy mom so her shopping experiences need to be well-curated and efficient.
PAIN POINTS
There are so many kids' clothing brands, and it's too difficult to find ones that offer budget-friendly plus sustainably made products.
APPROACH
With project goals defined, I researched best practices for product bundling and conducted a competitor analysis. Once the research was complete, wireframes were translated into designs and then designs turned into prototypes. I also usability tested my designs to identify any friction points. This process ensured that the final solution would be based on a user-centered strategy.
RESEARCH METHODS
Competitor
Analysis
UX Best
Practices
User
Interviews
Information
Architecture
User
Journey
Prototype
Testing
RESEARCH RESOURCES
I began by researching Baymard Institute's usability studies. Articles such as Product Page UX and 19 Common Pitfalls of E-Com Product Pages provided me with insights on product page best practices.
COMPETITOR ANALYSIS
To assess how competitors were using outfit features, we created a set of 3 major brands: Janie & Jack, Rockets Of Awesome, and J. Crew. Each brand used different outfit approaches, so we compared the pros and cons of each.
USER FLOW
OUTFIT LISTING WIREFRAME
OUTFIT DETAIL WIREFRAME
USABILITY TESTING
Once I had completed the initial design options, I created prototypes. We then used the prototypes to conduct A/B usability testing to see which design version would yield a higher conversion rate.
The test included 10 participants that were tasked to add items to the cart. The results showed that version A had a higher success rate, so we moved forward with that option.
B
A
TESTER
RESULTS
Once the design and testing phase were complete, I worked with the development team to bring the feature to life. After the feature was on a staging site, I paired with the QA team to conduct quality assurance testing. Post the QA testing, the outfit feature was successfully launched, which led to an increase in conversion and product views.
13%
INCREASE IN CONVERSION
40%
INCREASE IN THE AVERAGE ORDER VALUE
$7.3m
TOTAL UNIT REVENUE
LEADING WITH MOBILE FIRST
Most shoppers visit the Hanna site on their mobile devices. Using this data, I designed the outfit feature's mobile layout first to ensure that it provided a friction-free experience. To view the mobile outfit experience, press the play button on the video demo.
VIDEO DEMO
OUTFIT LISTING DESIGN
OUTFIT DETAIL DESIGN
related work
© 2023 KENNEY DESIGNS