NATURE'S WAY
HEALTH FOODS
Designing an efficient online shopping experience for
health-conscious consumers
Nature's Way is an independent, small health food store in Connecticut. I created an e-commerce functionality that would complement its existing website.
From my research, I gathered that users needed an efficient method to purchase products, so they can more easily continue their healthy lifestyle. In addition to a speedy online shopping experience, I found that these health-conscious shoppers needed access to a variety of product details.
The goal was to create an efficient online shopping experience for health-conscious shoppers.
SKILLS
PROJECT
Design e-commerce functionality, resulting in a mid-fidelity prototype
TIMELINE
2-week sprint
TEAM
Solo project
ROLE
User researcher
Information architect
Interaction designer
PROGRAMS
Axure, OptimalSort, Miro
Note: I conducted this project independently of Nature's Way Health Foods. I was not hired to do so.
Process
RESEARCH
Empathize with users & understand their experience. Gather qualitative and quantitative data needed to make decisions.
Screener surveys
User interviews
Competitive & comparative analysis
Feature analysis
Task analysis
DEFINE
Analyze the collected data and identify user needs, and define problem and solution statement.
Affinity map
Personas
User flows
Problem & solution statement
Sitemap
Open & closed card sort
DESIGN
Diverge on a myriad of ideas and find a solution that best addresses user problems, needs and goals.
Sketches
Low to mid-fidelity wireframes
Low to mid-fidelity prototype
TEST
Evaluate prototype with users and collect feedback to efficiently improve and iterate on the design.
Usability testing
Iteration
User interview logistics
5 PARTICIPANTS
Health food store consumers
30 MINUTES
Average length
100% REMOTE
Zoom & phone call
User interview quotes
"I want to better myself...and feel better about myself."
"I want to get everything on my list without taking a whole lot of time."
"[getting products at healthy food stores] feels like a form of self-care."
UNDERSTANDING THE USER
After conducting 5 remote interviews with people who regularly shop at health food stores, I learned that users' main motivation for consuming healthy foods was how it made them feel. They felt fantastic when they maintained a healthy diet, and it felt like a form of self-care to some. Users wanted to strive for a healthy lifestyle in order to live longer for their kids and grandchildren and to just have an overall better quality of life. Although eating quality foods made them feel great, the act of shopping wasn't a source of enjoyment for the majority of my interviewees. Users wanted to have a seamless shopping experience, so they could enjoy their food and other health food products more quickly.
It became apparent that product details were salient to users as well. Almost all of my interviewees had some kind of dietary restriction, and many mentioned how certain values such as fair trade or organic were key in their decision-making process when buying a product. Reviews also heavily influenced which products my users chose to obtain.
Since I only interviewed 5 people, I recognize that I don't have enough data to create a true persona. My proto-personas, Jerry and Amanda, are shown below!
Primary proto-persona
.png){kind=avatar}
Jerry, frequent health food consumer
Jerry strives to live a healthy lifestyle. He regularly shops at health food stores so he can have a wide variety of nutritious, high-quality options. Jerry needs to access as much information about his food as he can since he is so particular about what he consumes. Although eating healthy foods makes Jerry feel good, purchasing those items aren’t what brings him joy. He aims to have a quick and efficient shopping experience.
Goals
-
Strives for better health, longevity, and vitality
-
To efficiently purchase everything on his grocery list
Needs
-
Access to detailed product information, especially for items he doesn’t already purchase
-
Quick and easy shopping experience
Behaviors
-
Takes reviews into consideration when shopping
-
Compares products to find the best quality and price
Pain points
-
When products are not available/out of stock
-
Having barriers to a quick and easy shopping experience, such as long checkout lines
Secondary proto-persona
.png){kind=avatar}
Amanda, occasional health food consumer
Amanda considers herself to be a typical grocery shopper. She doesn’t visit specialty food stores often and has a designated grocery store that she visits. Occasionally, Amanda finds herself looking for a specific product that her grocery store doesn’t carry. When this happens, she wants to be able to quickly search and find the particular item she is looking for.
Goals
-
Locate one or two items quickly and cheaply as possible
Needs
-
An intuitive navigation
-
An accurate search option
Behaviors
-
Shops at health food stores occasionally
-
Looks for deals/specials
Pain points
-
When the search option doesn’t pick up what she’s searching for
The problem
Jerry needs an efficient way to purchase products from his local health store, so he can more easily continue his healthy lifestyle.
My solution
By developing an efficient e-commerce component for Jerry’s local health food store website, he can more easily maintain his healthy lifestyle.
To create a better sense of direction, I crafted a user flow
Open card sorting helped me understand how users
organized groceries
9 PARTICIPANTS
Health food consumers
101 PRODUCTS
Representative of breadth & variety of store
I conducted the open card sort with OptimalWorkshop and quickly learned that people imagine grocery categorization very differently! There were 125 different categories in total. I narrowed the 125 categories down to 14 categories that had the most overlap between participants.
A closed card sort validated categorization decisions
4 PARTICIPANTS
Health food consumers
14 CATEGORIES
Based on open card sort results
101 PRODUCTS
Representative of breadth & variety of store
CLOSED CARD SORT FINDINGS
The main takeaway of the closed cart sort was that "Beauty & Hair," "Bath & Body," and "Health & Wellness" were three categories that caused confusion.
Participants were likely to be torn on which category to place several products into. For example, two people placed "Acure Incredibly Clear Sheet Mask" into "Beauty & Hair" and two others placed the same product into the "Bath & Body" category.
To solve this problem, I combined "Beauty & Hair" and "Bath & Body" into one category: Beauty & Personal Care. I also added subcategories in the drop-down menu of the global navigation so users can have a better sense of what products fall under which category.
These 3 categories were the main sources of confusion.
Categorization for these products differed and was oftentimes split equally between two sections.
It was clear that users
needed more differentiation
between these categories.
Sketches allowed me to work through various design ideas
Sketching helped provide a clear layout for how each screen should be designed. In the left image and a portion of the right, I am working through various ways to organize the navigation bar.
I was debating on adding a large search bar on the navigation because this might be something that would be more of value to the secondary persona than the primary persona. The secondary persona, Amanda, is typically searching for one or two specific items at a health food store. The primary persona, Jerry, would be completing his entire grocery haul, so he may need to browse more. I decided to include the large search bar because the primary persona could greatly benefit from this if they have specific products they are also looking to find.
Research findings drove my design decisions
Since the primary persona, Jerry, typically shops for multiple items, a sub-navigation is included to rapidly switch between sections.
"Add to shopping list" icon.
A major pain point for users was the inability to get everything on their shopping list. Having a way to see similar options when a product is out of stock is a way to ease this frustration.
A quick "Add to cart" button was included to help users achieve their goal of an efficient shopping experience.
Users expressed in their interviews that they look for certain values when looking for a product. Many users also shared that they have some kind of dietary restriction.
Here, users can filter by values that matter to them or dietary restrictions they have.
The majority of users had some kind of dietary restriction and expressed that certain values mattered to them when shopping. I included the option to filter by dietary needs and values, such as fair trade and local, to help serve these needs.
Multiple tabs are included under product details, so users have access to all the information they need.
To optimize the Nature's Way online shopping experience, I created a Shopping List function so frequent shoppers like Jerry can quickly check out if they are buying their typical weekly list. From here, they can add all or some items to the cart.
Usability testing provided helpful feedback for improvements
The goal was reached: All three usability participants were able to complete tasks in five minutes or less, with one error or less.
There was generally positive feedback:
-
One user stating it was a “smooth process, not confusing at all.”
-
Two users also mentioned that they liked the option to see similar items for out of stock products.
As well as lots of room for improvement:
-
Varying degrees of confusion with the “Add to list” icon.
-
Two thought it was a “favorites/bookmark” icon.
-
One had no idea.
-
-
Two users mentioned that they would like to see recipes under product details.
-
Two users initially expected “My Shopping List” to be under “Shop” but were able to find it under the profile icon fairly quickly.
LOGISTICS
Remote, moderated
3 tasks
PARTICIPANTS
3 people who shop at health food stores in varying degrees
GOAL
Complete each task in
under 5 minutes with 1 error
or less
Potential solutions to confusion around the shopping list iconography
Add to shopping list
Solution 1: Replace bookmark icon with an icon more closely related to shopping list, for example:
Solution 2: Add a clear text link.