Golshid Yousefi
UX Designer

Fresh Market

Grocery Shopping List Application Website

What is Fresh Market?

I was tasked with developing a grocery list website application. I would assume that a mobile application for a grocery list would be more popular but nevertheless I was asked to design a website application in 8 hours, and that’s what I did.

The purpose of this application is to improve the experience around grocery shopping.

Go to Interactive Prototype 

PROJECT OVERVIEW
Fresh Market

Objectives

Developing a grocery list website application to improve the experience around grocery shopping. The design task specifically mentioned that this shopping list application should help users fulfilling at the grocery store. So, my understanding was that we want to focus on in-person grocery shopping versus online ordering.

Design Goals

  • Users save money and time
  • Increase traffic (store & website)
  • Expedite customers flow

The Process
Fresh Market
DISCOVER

When I work on projects, as much as my minds want to skip steps and jump to ideation and developing the prototype, I always consciously make myself stick with the design process and have a methodical approach. Of course, I prioritize tasks based on different constraints, but, I don’t skip important steps of the design process.

User Interview


The first phase of my methodical design process is Discover. For this project, my discovery phase was limited to conducting some qualitative research, which basically means that I interviewed a few friends and I also conducted comparative analyses.

Again, the design task specifically mentioned that this shopping list application should help users fulfilling at the grocery store. So, my understanding was that we want to focus on in-person grocery shopping versus online ordering.

So, I asked questions from my users to determine their challenges and opportunities around the in-person grocery shopping experience.

Fresh Market

Takeaways:

These finding show

  • The users care about health and sustainability
  • The users are busy and saving time is important
  • The users are interested to save money

Comparative Analysis

I also conducted a quick comparative analysis of some grocery stores and food recipes websites to learn about their different features and their process. But, in the interest of saving time, I did not tabulate my findings.

Side-by-side landing page comparison

Side-by-side landing page comparison

DEFINE / ANALYSIS
Fresh Market

Understand the Business (SWOT)

My next step in my methodical approach is always to learn and define the business and make sure that I know business SWOT, which is strengths, weaknesses, opportunities, and threats.

Again, in this specific case, because we don’t have a real business, I had to make some assumptions.

But, knowing the business SWOT helps me have empathy for the user and the business during my design process.



Fresh Market

Ideation (Diverge Ideas)

My next step was to start brainstorming and ideating.

Here are some of my initial ideas

Fresh Market

Ideation (Converge Ideas)

Then I picked some of the ideas that were most relevant and important for this step of the design and I crossed out the rest.

I used the principle of Minimum Viable Product (MVP) and I considered each idea based on the impact versus effort matrix to make my decision. That’s because I believe a UX designer makes the business decisions in addition to the visuals. because when you talk about design some people tend to just think about the visuals.

Some of the ideas that I crossed out at this step are good ideas for the next step planning.

Persona
Persona

Persona

Understanding the User 

The persona is defined based on the data gathered during the discovery phase.

The website will be redesigned based on Sara’s needs and preferences.


DEVELOP

According to what Sara wants

we develope our idea to start our design process. For developing the idea we considered A Scenario to respond to our Persona's needs, and we conducted the user flow to show her journey through browsing the website.

User's Needs

  • Save money and Time
  • Select fresh food in-store
  • Ideas for cooking good food according to their diet
  • Eat healthy and home-cooked food

Solution 

  • Prepare a shopping list and share it with the others
  • Categories for different diets

  • Load coupons on the account

  • Locate product aisle

  • Recipes

Fresh Market
Scenario & Flow Diagram
User Flow

User Flow

Scenario

Sarah does not know what she wants to cook, she needs ideas. she logs in to her fresh market account. She goes to the recipes page, she chooses the food category, and then she filters based on her diet. she chooses a recipe and she adds the ingredients she needs to her list and shares the list with her husband.

Site Map

After iterations

I developed the site map. This is my final site map after a few iterations. For this assignment, I focused on the recipe pages because when I was looking at other websites, I did not find something with the features that I had in mind. I will show you the iterations that got me here.

as you can see ….

Fresh Market
DESIGN

Ideas, Sketches, Wireframes, and Iterations

Interaction Design

Home Page Iteration

Here in the interest of saving time, I quickly jumped into developing the digital wireframe before doing much work on paper. When I have enough time, I would prefer to develop paper prototypes and do limited testing before going digital. But, here, I saved my progress as I was making these digital wireframes so that I can keep track of iterations and each design decision.

I think it is always valuable to see the process as opposed to the final prototype because I want to be able to see and remember my design decisions and sometimes you wouldn’t remember the reasons for each step of the way if you don’t see those steps.

Fresh Market

So, here are a few iterations. Version 4 is my final wireframe. Now on the next steps, I will show a few design decisions that took me from version 1 to version 4.

Fresh Market

I start with something simple and then I build on it. My first version of the landing page was very simple. and an infinite scroll of products. Well, that wasn’t really desirable.

In my second version, I added product categories.

Version 02

In the Landing Page

  • Added product categories



Version 03

In the Upper Nav Bar

  • Store Locations
  • Lifestyle
  • Profile/ Account

In the Landing Page

  • carousel for product categories
  • Deals
  • Coupons
  • Seasonal



Version 04

In the Landing Page

  • Add product to list
  • Load coupon to the account
  • In the Upper Nav Bar



Fresh Market

Soup page Iteration

Mid-Fidelity Prototype (Soup Page)

Mid-Fidelity Prototype (Soup Page)

In version 1 does not have the filters, version 2 has filters and version three has depth and shade visualization.

Fresh Market

Recipe page Iteration

Mid-Fidelity Prototype (Recipe Page)

Mid-Fidelity Prototype (Recipe Page)

In my iterations, I added some features to improve the user experience.

For example in the ingredient list, I added a feature to cross out the items that you already have and then add the rest to your list.

I also added a widget at the top right corner so you can see the items in your list without having to go to the grocery list page.

Visual Design

Color System

Because of my limited time, I had to quickly choose a color pallet for preliminary design.

I used Adobe stock colors and asked a few friends to tell me which set of colors more closely reminds them of fresh produce.

So, this is how my preliminary colors were selected.

Fresh Market

This is my Preliminary Color's Code

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Fresh Market
Fresh Market

Logo Design

Well, visual design is important. Having a well researched and tested logo is important. But, again in the short time that I had this is the logo that I developed for preliminary design.

Fresh Market

I used a circle to represent the shape of many fruits and some vegetables. I used a typeface that was close to handwriting because handwriting conveys a sense of freshness. Basically handwriting means this is so fresh that we did not have enough time to go type and print it. Also, shopping lists are usually are written by hand.

I showed these logos to a few friends and picked the one with more hits.

Fresh Market

Typography

Typography is always very important for me

I wanted to be able to clearly communicate with the user. I assumed my users spend a lot of time behind the screen, so their eyes may be fatigued. I want to choose something that is legible, use a readable size, and have a strong color contrast to make it easy and pleasant for the user to spend time on our website.

I choose some samples, I used example sentences both in lower case and also full capitalized and I had my users tell me about their reaction. 

Fresh Market

I ended up choosing Arial and Avenir.

Of course, if I had time, I would do usability testing on the final prototype to help me choose typography as well as color pallet. But, considering the time constraints, this is what I came up with.

Why? Obviously I did not have the time to do usability testing on the typography and other aspects, so I had to rely on my design instincts as I was developing my prototype. And I made this table to show what typeface and size I choose during the design.

In a real project, I would spend more time on researching and choosing the typography as I believe typography is really important for design.

Fresh Market
DELIVER

Interactive Prototype

You can click here to check the Digital prototype.

REFLECTIONS

Measure

I believe it is very important to think about metrics that would help you measure product success.

Here are some metrics that comes to my mind:
  • How much time does the user spend in product and recipe pages
  • How many users use recipes ingredients to generate their grocery lists
  • How often users use this feature
  • Rate of retention: How many users that login actually end up creating a list
  • Rate of return: How many users return to create another list after their first experience
  • Sharing: How often users share their list or share recipes
  • Security cameras can develop metrics that time the average flow of customers in the store

Next Step

  • Introduce AI
  • Recipe of the day and special deals tailored to the user profile and dietary restrictions
  • Help user with the decision-making process - recommend recipe and products
  • Let the user choose the specific brand and type of product when adding items to list
  • Generate user review and ratings for products and recipes