Image of a little girl wearing a Hanna Andersson outfit. She has a toy in her hand and issmiling at the camera.
UX/UI DESIGN  

product

bundling

made easy

MY ROLE

UX/UI Designer

UX DIRECTOR

Billy Lymm

CLIENT

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.

 
Image of a young girl wearing an outfit made of Hanna Andersson products. There are also images of the products that create the outfit that are arranged around the girl.
Gif of the words Get The Look animates over a Hanna Andersson dress that is featured in the outfit.
Gif of a yellow semi-circle shape that animates back an forth.
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  - 

The number 1 is cenetered within the circle

1

Effectively increase conversion

The number 3 is cenetered within the circle

3

Align with the existing platform capabilities

The number 2 is cenetered within the circle

2

Increase the average order value

The number 4 is cenetered within the circle

4

Provide shoppers with a streamlined experience

 
User persona image of the primary demographic for Hanna Andersson. Image includes a smilin gwoman holding her young child.

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
Icon of a webpage with a magnifying glass ovelaying the rght corner of the webpage.

Competitor

Analysis

Icon of a webpage with a aprroval seal overlaid in the right lower corner.

UX Best

Practices

User

Interviews

Icon of structured chart where a top square is centered above a lower row of 3 horizontally aligned squares.

Information

Architecture

Icon of a curved line with circles evenly spaced out on to of the line.

User

Journey

Icon of a cell phone with a hand touching on the screen of the phone.

Prototype

Testing

 
Image of Baymard Institute's Product Page UX article.

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.

Mobile screenshot of a Janie and Jack Girls Outfit webpage.
Mobile screenshot of a Rockets of Awesome Girls Outfit webpage.

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. 

Mobile screenshot of a J. Crew Girls Outfit webpage.

USER FLOW

Image of user flow for outfit feature.

OUTFIT LISTING WIREFRAME

Image of wireframe desktop layout for outift product listing page.
Image of mobile wireframe for outfit product listing page.

OUTFIT DETAIL WIREFRAME

Image of mobile wireframe for outfit product detail page.
Image of desktop wireframe for outfit product detail page.

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.

Image of the 2 mobile testing screens used for A/B testing.
Circle shape with the letter B in the center.

B

Circle shape with the letter A in the center.

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

Image of desktop design comp for the outfit listing page.
Image of mobile design comp for the outfit listing page.

OUTFIT DETAIL DESIGN

Image of mobile design comp for the outfit detail page.
Image of desktop design comp for the outfit detail page.