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.
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 -
Effectively increase conversion
Align with the existing platform capabilities
Increase the average order value
Provide shoppers with a streamlined experience
MEET THE PRIMARY AUDIENCE
w/ 1 kid
She's an eco-friendly, active mom who invests in durable and sustainably made products.
She's a busy mom so her shopping experiences need to be well-curated and efficient.
There are so many kids' clothing brands, and it's too difficult to find ones that offer budget-friendly plus sustainably made products.
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.
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.
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.
OUTFIT LISTING WIREFRAME
OUTFIT DETAIL WIREFRAME
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.
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.
INCREASE IN THE AVERAGE ORDER VALUE
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.
OUTFIT LISTING DESIGN
OUTFIT DETAIL DESIGN