HooD River Organic
E-Commerce Responsive
design
Usability Testing Findings:
​
Mid-Fidelity Prototype
5 users
100%
completion
rate
I tested 5 users, per flow, with a completion rate of 100% for each task.
​
I tested users with the following tasks:
​
Task 1: Please take the quiz to determine your produce box and place the order once your box has been chosen for you.
​
Task 2: Please take the quiz to determine your produce box and customize your pre-made box by buying a vegan beverage, then place your order.
​
Users were able to complete the given tasks. I then made iterations on the the mid-fidelity designs into high-fidelity designs focusing in on overall usability, cohesiveness, visual design, and decreasing cognitive load through simplicity (including modifying text copy) and expected heuristics for a checkout flow.
high fidelity
MOOD BOARD
I created a mood board to further drive the high-fidelity design.
​
I focused on an organic, farm to table, light, airy, healthy aesthetic to fit in with the brand.
The Challenge -
Designing for First-Time subscription box USers and Users with specific diets and values.
Introduction
Hood River Organic is a CSA that grows locally grown fresh, organic, produce in the PNW. Hood River Organic wanted organic produce to be more accessible, high quality, and provides a large selection.
I was given the opportunity to design a website for the project. The target device is a desktop and mobile responsive.
problem
How can we provide an easy, intuitive online experience to users who are supporting local farms?
​
Users need a way to conveniently buy groceries with staple items on a weekly basis, and they need a customizable way to shop that aligns with their dietary needs and values.
Timeline
2 weeks
ROLe
Researcher
UX Designer
Team
Individual
Solution
By redesigning the website, we can help users purchase groceries on a weekly basis that includes staple items, and provides options for users' dietary needs and values they support, we will help make their grocery shopping experience convenient and painless.
Tools
Deliverables
User Interviews
Competitive and Comparative Analysis
Affinity Mapping
Personas
User Flows
Sitemap
Usability Testing
Wireframes
Mid-Fidelity Prototype
High-Fidelity Prototype
Zeplin Hand-Off
Research
Competitive and comparative analysis
Prior to delving into interviewing, some data needed to be gathered. The focus consisted of the features within various markets, personalized/customizable services, and subscription services offered.
Methods
Competitive Analysis
Comparative Analysis
Usability Testing
User interviews
Affinity mapping
Personas
Competitive Analysis
A direct competitive analysis of other grocery markets (Thrive Market and Amazon Fresh) and an indirect competitive analysis of personalized customizable services and subscription services (Detox Market, Trunk Club, Stitch Fix) was completed. It was concluded that our competitors had some features we can implement such as providing a personalized survey, the ability to shop by diet via filters, and the ability to register later (similar to Amazon) which can halt the purchase flow of the user if it is required to register immediately. These features can be implemented in order to ensure Hood River Organic is competitive in the market and fulfill the needs of the users.
Comparative Analysis
Comparative analyses was conducted to implement a simple, accessible navigation, and identify how other competitors display their products, as well as various features like filters, to determine how we can further implement similar design patterns with Hood River Organic. Websites like IKEA and Apple were analyzed to help further drive the re-design.
usability testing
A usability test with the current website layout and design was conducted. 100% of the users failed the task of finding kombucha within two minutes. Users had an average rate of 10 minutes when they were finally able to find kombucha.
​
Many users clicked on the "home" button, which redirected them back to the main website and not the online storefront which further confused the users.
​
Through usability testing with the current website, I gathered data-informed insights that users needed:
-
a clear navigation bar
-
appropriate categories for the products Hood River Organic offers
-
an explicit understanding of the differences between the subscription boxes offered
-
change in the user interface and design, as the users thought the design was not representative of how great the products were
A usability test with a competitor, Thrive Market, was conducted with the same task (without using the search bar since that was not an option on Hood River Organic's website to further standardize the process).
-
Task: Order kombucha from Thrive Market (without using the search bar)
​
The same four users had a 100% success rate on the first attempt to find kombucha, with an average of two minutes of finding the product.
​
Users expressed things like "I feel more calm", and "this is not as overwhelming".
​
Additionally, a task analysis was conducted to understand the current steps users take to achieve their goals on a website that feels more intuitive for users, so that I could re-design Hood River Organic's website more intuitively. Thrive Market has more products, which requires more categories and filter options. This information further helped me understand how to design the navigation of products more easily for the user.
card sorting & Site Map
Card sorting was conducted to help further illustrate the appropriate categories for the products Hood River Organic offers. Frequency of the naming conventions users provided for the products and how they would categorize the products was analyzed. The data was standardized and cross-referenced with other websites to create the most appropriate information architecture of the website, as this was a pain point for users. Because the purchase flow was affected by the IA of the website, the current website exhibits a high drop off rate of users, which significantly impacts their revenue and growth.
​
Utilizing the card sorting data, a site map was created to represent how users sorted the cards, with cross-referencing similar websites, and implementing users' needs of accessing a simple navigation bar and filtering options.
​
User Interviews
4 Interviews
Newbies
Vegan
We wanted to inquire more from users surrounding purchasing behavior, utilization of subscription boxes or grocery subscription and delivery, diet, values, goals, and pain points when grocery shopping.
4 individuals were interviewed to further understand users' needs and pain points.
individuals seek customization and convenience
Users want to be able to shop according to their dietary needs
Users want to have a consistent subscription box
An affinity map was created from our interviews and collected two key insights.
Through interviews, individual shared that they are concerned about the option to shop for groceries according to their dietary needs (and other filters options such as specific values they support), as well as wanting to have a consistent subscription box that can also be customizable.
There are numerous subscription services that offer organic products, the ability to filter products, and receive a reoccuring set of staple items. Users need a way to conveniently buy groceries with staple items on a weekly basis, and they need a customizable way to shop that aligns with their dietary needs and values. Hood River Organic can provide these needs without the users paying for a subscription service like their competitors require.
Meet nathaniel, the newbie
Nathaniel is exhausted by the end of the week and is dreading going grocery shopping. He keeps putting it off as long as he possibly can.
​
He finally gets to the grocery store, and is overwhelmed by all of the shoppers there. Nathaniel tries to rush through the store to get in and out as fast as possible. Nathaniel notices seeing information about supporting his local farmers and having organic options, and values this information.
​
Nathaniel comes across a brand the he thinks he got last time, but can't remember what is was exactly. He puts the item back because he is not quite sure, and does not want to risk it.
​
Nathaniel tiredly comes back home, feeling drained from the grocery trip. Nathaniel puts away his groceries and has to sit down to take a break. He begins to open his computer, when his daughter calls him. Nathaniel talks about his day, including his tiring grocery trip. His daughter asks him if he has ever tried a grocery subscription box. Nathaniel has not, but he is open to trying one. He really wants something convenient.
"I just want a convenient way to shop for groceries"
Meet violet, the vegan
Nathaniel, the Newbie
GOALS
-
Easy way to buy groceries on a weekly basis
NEEDS
-
Easy, convenient way to buy groceries
-
Staple items on a weekly basis
FRUSTRATIONS
-
Grocery shopping takes a lot of time and energy
-
Hard to remember all of the items/brands he likes to get
Violet is having a hard time finding items that match all of her dietary needs. She just needs a way to find all of these items in one place. Violet is a busy millennial and an environmental advocate for GreenPeace. Violet has a lot of preference when buying food. Violet values voting with her dollar.
​
Before she heads home for the day, Violet has to quickly add some grocery items to her online shopping cart so that she can receive them the next day.
​
Violet is vegan, which can make it difficult to find snacks and options for her dietary needs. She has a hard time finding all of the things she needs from her local online grocery store. She values supporting local farms and wants a variety of options to choose from.
"It's so hard to find items that match all of my dietary needs. I just need a way to find all of these items in one place"
Violet, the Vegan
GOALS
-
Easy way to find the items that she is looking for
NEEDS
-
Items that match her dietary needs
-
Customizable options to fit her dietary preferences
FRUSTRATIONS
-
Not being able to find items according to her dietary needs
-
Not having an easy way to find items she enjoys based on values
what do users need?
Through synthesizing the research, two problem statements emerged.
Nathaniel
Newbies need a way to conveniently buy groceries with staple items on a weekly basis because grocery shopping takes a lot of time and energy, and it's hard to remember all of the items that they like to get.
Violet
Vegans need a customizable way to shop for their groceries that match their dietary needs and values that they support because they have a difficult time being able to find items that they enjoy.
ideation
How Might we?
We wanted to explore how to solve the problem for the users.
Methods
HMW
Sitemap
Wireframing
HMW
Provide a convenient way for Newbies to buy groceries?
HMW
Provide an easy way for Newbies to have their staple items on a weekly basis?
HMW
Provide an easy way to shop for Vegans' groceries?
HMW
Provide a way to shop for groceries that match dietary needs and values?
Two comprehensive HMWs were created:
​
HMW provide Nathaniel a convenient way to buy staple grocery items on a weekly basis?
​
HMW provide violet an easy way to shop for her groceries that complement her diet and values?
solutions
To solve the problem, data was used to inform the designs.
Based on the data collected, Hood River Organic's website needed to be designed to help users conveniently purchase groceries on a weekly basis that includes staple items, and provides options for users' dietary needs and values they support.
​
So I hypothesized that by re-designing the website, we can help individuals purchase groceries on a weekly basis that includes staple items, and provides options for users' dietary needs and values they support, we will help make their grocery shopping experience convenient and painless. We will know this to be true when we see that individuals who use this website report an increased use of the website, and an increased rating of satisfaction and ease of their grocery shopping experience.
Mid-Fidelity wireframes
I sketched the initial sketches and turned them into digital wireframes, building the mid-fidelity screens.
Mid-Fidelity
The website does not offer a customized experience in helping choose a box according to your needs. This page was created as a result after a user completes a quiz. The user also has the option to choose a different box or an additional box if their needs weren't captured, or they changed their mind about their selection.
High-Fidelity
From the mid-fidelity wireframe, I changed visual design elements including alignment, spacing, and adding images.
I changed the text copy to ensure simplicity and decreasing cognitive load.
This was the landing page of the website prior to design changes.
​
Users were confused about the subscriptions offered, the categories of the food, and overall had a hard time navigating the website.
Mid-Fidelity
Made changes to the landing page, ensuring that users understand the offered products and services by including how it works, what makes the product competitive, the types of diets offered, highlighting needs of the personas (staple produce shipped according to their schedule, diet, customizable - FAQ).
High-Fidelity
Changed the visual design of the landing page to ensure cohesiveness. Frequently asked questions was changed to match the playfulness of the website, and be more visually accessible.
Accessibility
For accessibility for all users, I ensured that the colors met the WCAG standards. I discovered some of the initial colors I was going to use did not meet the standards. These changes to colors will be made in the high-fidelity mockup.
​
Mobile Responsive
I moved into high fidelity designs and iterated on our mid-fidelity designs based on the insights from user interviews. I also moved into mobile responsive designs.
Next Steps
Hood River Organic website design provided a way for users to purchase groceries on a weekly basis and provides options for dietary needs and values users support, making their grocery shopping experience convenient.
​
Next steps include iterating on the high-fidelity designs, adding more color throughout the website (e.g., buttons are black and white), ensuring the flows are cohesive and intuitive through additional user testing with high-fidelity mockups, and implementing additional features as needs arise.
​
These next steps will further heighten the user's experience and ensure a painless grocery shopping experience.