The Brief
Hanna Andersson’s signature product is their amazing pajamas for kids & adults. Recognizing the trend of family matching, the company began offering family matching collections. Over a 3 year period, the number of collections grew from 6 to 50+.
Research
To identify points of friction and opportunities for improvement, the UX team conducted user interviews; reviewed anonymous user recordings & heat maps; & validated the findings with google analytics.
Challenges
The research showed that users were overwhelmed by the number of collections; had a hard time navigating between them; and when users were looking at products, they wanted a way to view what was relevant to the needs of their family.
The Solution
The main landing page focused the 50+ collections into groups that could easily be expanded to show relevant collections. We also simplified the product grid and brought a left hand navigation to the experience. This allowed the user to move between collections no matter where they were. We also leveraged emotive photography & video to excite the user about family moments.
Expandable Collection Modules
We combined the vast number of collections into overarching groups. To visually organize this for the user, we developed a new type of asset that would expose the collections once the user clicked on the button.
Simplified Product Grid
Testing showed that the user was distracted by to much information on the product page. At this point of the experience, they only needed to know who the product was for and the price.
We removed the clutter of repeating elements and simplified the information to the category (kids, adult, etc.) and price.
Expanded Product Tile
At this stage of the journey, the user wanted to add different product for their family members. We noticed an issue where users had to navigate to the product detail page, add the product, and then navigate back to the grid. To alleviate the extra page loads, we developed an expanded product tile function that would allow the user to quickly add items from the product grid.
Family Checklist
Within the product grid, we added a family checklist function so the customer could filter down to most relevant product. The user clicks on the button and the tray slides out to show the options for different family members. They select who they want to shop for and the return removes the extra offerings.