Natural Grocers is a family-owned grocery chain that is dedicated to the education of middle-class health while also providing healthy, affordable grocery options. Through a two week sprint, a new desktop layout was designed for Natural Grocers; which featured a new, seamless design in which users could find products, leave reviews, and have a smoother check-out process, in a more timely manner.
Natural Grocers
Being the only designer on the project, it was my responsibility to not only design a new layout, but to research and synthesize data that showed what users wanted or looked for when partaking in an eCommerce site. After a two week sprint, a presentation was built and shown to classmates and instructors, being this to be a spec project, that showcased the work and changes made to the website and how those changes would prove to be helpful to the business.
The process for this project was long and tedious; yet informative in how users really experienced eCommerce and what their expectations were. For the beginning stages of design, Natural Grocers had already developed business goals and a user persona.
Business Desirables:
-
A welcoming Homepage showcasing business
and encouraging users to shop online. -
Clear ways of locating specific products
-
Efficient check-out process.
-
Ability to contact business.
-
Responsive designs
User Persona: Careful Critic
-
Takes a long time to make purchase decisions
-
Thoroughly reads descriptions and reviews
-
Compares multiple items before choosing which to purchase
-
Reads the details for each item, including materials and manufacturing standards
-
Seeks out familiar brands
-
Writes comments and submits review
User Problem Statement
“User needs to be able to find products easily while also being able to compare details, reviews, and brands thoroughly in a timely manner. The user would also like the ability to leave their own reviews on products.”
Once the problem was defined, research led to comparing certain elements, such as the header, footer, homepage, product page, and check-out process, of competitive companies such as Walmart, Target, and Lowes Foods. Comparative companies such as Warby Parker, Amazon, and H&M Clothing were also analyzed. After much research of Natural Grocers and user needs and desires, design commenced.
Click here for a list of links from which these lovely logos came from.
Designing began with paper sketched user flows for each feature of the website; including finding a product, leaving reviews of a product, comparing to other products, and the check-out process. A low fidelity was built through Figma after paper designs were decided upon.
Delicious Designs
Usability testing began with interviewing five users on the flow of the tasks listed above. Each user completed all tasks given. Three out of five completed all tasks in under two minutes. After usability testing was complete, a mid-fidelity prototype was designed, which iterated on changes needed from the usability tests.
Simple Changes
Simple changes such as enlarging text, to changing the onboarding screen location to the front of the flow rather than at the check-out phase were made. After the design changes were implemented and decided on, the final, high fidelity prototype and mockup was created to show how users might view the new website.
A deeper look into the redesigned features would spotlight the homepage, navigation, product page, and check-out process.
Product page
-
Included product pictures, pricing, description, featured, and related/suggested items.
-
Comparison charts and the ability to leave reviews were added.
The homepage would feature the following elements:
-
A clean, uncluttered, and simple design.
-
Showcasing of products and featured news and events from the company.
-
Navigation to other sections of the website without even having to use the header or footer.
​Navigation would include:
-
Cleaner, more specific navigation in the header and footer
-
Shown throughout website
-
Leads to stated department page
-
Would allow users to choose a product from departments with ease.
-
Breadcrumbs to show users their location on the website.
-
Made clickable to enhance the navigation.
-
A clickable logo to redirect users to the homepage
Check-out:
-
Included an editable list of items, personal information, and payment information.
-
Time selection for grocery pickup.
-
Confirmation page leading from time selection,
allowing users to edit any information if necessary. -
Clicking confirm would place the order and lead to a confirmation page informing users their order had been placed.
A Fruitful Future
The final version implemented both company desires and user needs through a simple, flexible design that showcased the company’s products, news, and events while maintaining a clutter-free layout. This design allowed the user to browse the website and find products according to the problem statement; finding, comparing, and purchasing products in a timely manner. Colors and typeface schemes close to that of Natural Grocers' style guide were implemented. Also, information and a similar layout of the company’s about page were used in an attempt to preserve what the company had previously been using and to provide the users with some form of familiarity.
After presenting the final website, planning of future iterations began. Future iterations include but are not limited to:
-
Expansion of the website as the company grows.
-
Store locations being searched via zip code instead of by city and state to improve accuracy.
-
Enabling users to save items/orders to allow them to access previous orders and products faster and place orders more efficiently.
-
Creation of a mobile designed website to accommodate users who prefer to shop using their phones.
Fine Finale...
The design process for Natural Grocers, while tedious, proved to be an informative process. Learning about how users viewed products and the navigation of an eCommerce proved to be valuable when designing this website, as well as influencing future projects. By taking what Natural Grocers had in place, and learning about how users interacted with an eCommerce website, I was able to design not just a website, but rather, a bridge to which both user and business can reside and communicate effectively the needs of both in order to better the overall user experience for this eCommerce site.
Email:
Linkedin:
Contact Me:
Resume: