A Fresh Redesign
Outfitting WA community grocer My Fresh Basket’s website with e-commerce for bargain hunters
UX Design ▪ UI Design ▪ Information Architecture ▪ Brand Identity
Project Overview
OBJECTIVE
My Fresh Basket is a community grocer in Spokane, WA, that provides fresh, high-quality, and often locally-sourced products. Given the conditions of the pandemic, it is looking to launch its business online to better serve its loyal customer base but its website does not have e-commerce functionality. I was tasked with designing an improved desktop site that would showcase its products and allow customers to make online purchases while still maintaining its core “small shop” brand image.
PROJECT TYPE
Conceptual student project
TOOLS USED
Figma, Optimal Workshop
DURATION
2-week sprint (Oct 2021)
MY ROLE
I served as the individual end-to-end UX Designer on this project
METHODS USED
Problem Statement, User Flows, Comparative & Competitive Analyses, Card Sorting, Usability Testing, Affinity Mapping, Sketches, Grayscale Wireframes, Rapid Prototyping, High-Fidelity Prototype
Preview the solution
Click through the below slideshow to preview the high-fidelity prototype.
Want to know more? Read about my design process below ⬇
Framing the redesign
Project Goals
When going through the process of a redesign, it is critical for the new design to maintain the essence of the existing brand and a commitment to meeting core user needs. My Fresh Basket has been able to carve out a strong customer base in a highly competitive market, primarily because of its focus on providing value. Therefore, their e-commerce experience should be centered on the target user: a customer whose primary priority is to be able to price-compare, plan their purchases, and identify discounts and deals quickly.
With this in mind, I decided to focus the design process around four primary goals:
With these goals established, I first completed a design audit of the current site to identify opportunities for an improved user experience and an updated aesthetic.
Seeing what’s out there
Competitive + Comparative Analyses
Given the surge in demand for online shopping, particularly since the onset of COVID-19, many grocers have had to shift to e-commerce. Because of this, I wanted to next take a look at how key competitors had adapted to this shift with their sites so that I could identify value-adds in an online grocery experience. I made sure to look at a mix of high-end (Whole Foods), value-based (Walmart), and local (QFC, Fred Meyer) competitors.
I also conducted a comparative analysis of top e-commerce leaders (Allbirds, Crate & Barrel, H&M) to see if there were certain features used in retail that could be successfully employed for grocery.
Some key takeaways I identified:
Sort it out
Information Architecture
A critical aspect of an e-commerce site is site navigation. In keeping with the essence of the My Fresh Basket brand, I want to make sure that the navigation online feels as intuitive as the in-store experience does for customers. As a result, I decided to conduct a card sorting activity with five participants, who sorted the full inventory into product categories. I observed participants so that I could ask follow-up questions on their choices.
After parsing the participant data, I was able to identify eight core product categories to use for the site, which I believed would allow for a simplified experience.
Between the insights from the card sorting activity and my competitive analysis, I was able to devise a preliminary site map:
Food for thought
Wireframing ▪ Usability Testing
With a sense of the core elements I wanted to include on the site as well as the site map, I moved into the next phase: developing the initial designs. I created a user flow for three key tasks: searching for an item, adding it to the Cart, and completing a purchase. From there, I built some mid-fidelity grayscale wireframes in Figma.
To test the effectiveness of my design, I conducted usability tests with three participants, who completed all three tasks of the user flow. Affinity mapping afterward allowed actionable insights to emerge from the sessions.
Find some of the key insights below.
Brand (new) ideas
Brand Identity
Having established a plan for how to improve the design based on user insights, I wanted to now focus on the updated brand identity. In order to get some creative inspiration for the visual look of the site, I created a mood board on FigJam, focusing on the store’s local, community feel and the freshness of its products.
Given how claustrophobic the current website design was, I sought to simplify it with a sleek, minimalistic design that replicated their in-store experience and matched the modern feel of their competitors’ sites. For the color palette, I selected a slightly brighter shade of the original logo’s green and added an orange as a complementary color to create more balance. To round it out, I also decided to create greater consistency with the typography by switching to the Roboto font family, a simple and welcoming typeface. These changes inspired an update to My Fresh Basket’s logo.
Ready to check out
High-Fidelity Prototype
Taking into account the takeaways from usability testing and the brand identity process, I designed a high-fidelity prototype of the site. The final design not only provides My Fresh Basket with a functioning e-commerce site, but serves as an online extension of their in-store experience: a highly personalized user journey oriented towards price comparison and deal discovery.
Homepage
Users can access their Favorites and Cart easily via the buttons at the top-right, and both open as sidebar overlays so that customers are not taken away from their browsing activity.
The primary navigation prominently features “Specials & Deals” to allow users to quickly navigate to items where they can get the most value.
The “Popular Items” and “Coupons” carousels allow users to price-compare top items and add them to their Cart without having to begin a product search.
Product Search
To assist with price comparison, users can sort search results by price and popularity.
Users are able to filter their results by brand and nutrition to allow for a more personalized experience.
Individual item listings feature key information, including price, star rating, and demarcations for popular or discounted items, in a compact manner and allow users to Add to Cart or to Favorite for future purchases.
Product Page
Features the discounted Loyalty Program price to facilitate more opportunities for deal discovery.
Additional information about the product can be found under tabs located next to the product details, allowing users to only see what is most important to them and avoiding information overload.
A carousel of recommended products based on the user’s browsing and shopping history is located at the bottom of the page to help provide a personalized and curated experience.
Checkout
Adding an item to the Cart immediately opens the Cart overlay, prompting the user to complete the purchase.
The animations on the screen after a completed purchase add elements of both delight and validation to the flow.
Thoughts & reflections
I enjoyed the challenge of being the end-to-end designer on this project. It was exciting to have my own vision for the design and to be responsible for its development from research and ideation to a high-fidelity prototype. However, I did learn that it is critical when working as an individual designer to constantly seek out feedback and to test and iterate on your designs to reduce bias in the process and ensure that the designs are effectively rooted in user needs and behaviors.