Kroger Search Experience

 
91374.jpg
 

As the world’s largest supermarket chain, kroger is paving the way for the future of grocery shopping online. Only problem is— customer’s can’t always find what they need while searching. To improve this, Kroger partnered with Empathy to solve back-end data problems, And launched a full redesign of the experience to regain customer trust.


User Experience • Research • User Testing

My role

 
old-search.jpg

UX Challenge

How might we eliminate distractions to create a focused search experience?

How might we guide users to find what they need, while encouraging exploration?

 

process

At Kroger, our design process begins with a collaborative one-week discovery session involving representatives from design, engineering, and product management. Early in the week, we spend time understanding and defining the customer problem, journey mapping, and identifying areas of opportunity. From there, we dive into competitive analysis followed by pen & paper sketching and piecing together ideas to form a solution the entire group can feel confident in.

 

Initial Solution

initial-search.jpg
 

User Testing

User testing was done in three parts, beginning with an initial survey to gauge users’ feelings about iconography, language, previous experiences searching online. Next, we tested our initial design in an online, unmoderated setting. Finally, after making some small adjustments, we conducted 10 60-minute moderated usability tests.

Overall, users reacted positively to the new design and helped us identify areas that would require further investigation.

 

Accessibility Concerns

Although the design tested well with users, accessibility issues arose during development leading us to quickly modify the design. The full-width search experienced caused tabbing & voiceover users to become trapped in the experience. Countless iterations later, we landed on a design that maintained a strong emphasis on focus, while allowing users to tab in and out of the experience with ease.

 

Final Design

Animation.gif
Final_Desktop-mobile.jpg