Baby Jogger
Stroller Journey Redesign
Role:
Art Direction
UX/UI Design
Tools:
Photoshop
XD
InVision
Miro
About:
Baby Jogger is for parents with passion and purpose, who want to continue to live life to the fullest and to share new experiences with their children.
When I joined Newell Brands, I was tasked with redesigning the Baby Jogger website as part of a migration to a new web platform. The existing site was outdated, non-ADA compliant, and offered a confusing user experience for selecting and purchasing strollers. Here, I will detail the portion of the project that focused on improving the journey through the stroller selection process.
The Challenge:
Users were confused by the many stroller options and didn’t understand a way to narrow their search and evaluate differences between products. Customers did not find the taglines and overall language for the product families to be helpful. For instance, the City Mini tagline “Start Exploring” and Summit X3 tagline “No Limits. No Boundaries” were not helpful in highlighting the differences between these two families of strollers.
In addition to the language, the visual design of the site was cluttered and hard to read. The green color of the header fonts was not ADA compliant, and the grey body text laid over faded background images was very difficult to read. Users had to take the extra step of clicking the “view all” button on each of the families to expand that section and see more information about the product offerings.
When a stroller family was selected, the individual products that populated the field beneath scrolled in a horizontal fashion. This made a comparison between products difficult. Users often missed products requiring scrolling or swiping. The color swatch options of individual strollers were quite small and not selectable. Users were not able to see the stroller in different colors without clicking to another page.
The Goal:
To simplify the selection process, making it easier for users to understand the strengths of each stroller family and choose the stroller best suited to their needs while minimizing the number of pages users had to navigate through.
The Solution:
The project was approached on two fronts: language and visual design.
Working with copywriting and marketing teams, competitive research and interviews were used to reimagine the language for each of the stroller families. They were differentiated based on strength and best usage. We also split the city mini family into two groups (city mini 2 and city mini GT2). This made it easier for users to understand the differences between them.
When it came to the design and structural layout, I created user flows, wireframes, and prototypes to develop a cleaner, simpler journey. As part of the overall site redesign, I worked with the development team to create a web-compliant UI design system with updated fonts and colors in line with our style guide.
All text was put on a clean background, making it easier to read. Image selection closely matched taglines, further clarifying the differences between the stroller families.
To navigate through products within a stroller family, I created individual landing pages. This allowed users to easily view the different iterations of each stroller (i.e. single, double, travel). The initial rollout of the new web platform had very limited capabilities. I worked within those limitations to create a layout where users could view each stroller in the various color options available.
A banner was added to each product family landing page to drive traffic to the accessories shopping options, which previously received few page hits. I also added UGC section to these pages to further engage customers.
The Result
The final result of the reimagined stroller journey was a cleaner, more streamlined experience that alleviated user confusion and frustration in the selection process.