Daily Table Website Redesign

Daily table is a nonprofit community grocer located in Boston dedicated to providing fresh, convenient and nutritious food to local communities in need at prices they can afford. They believe delicious and wholesome foods should be available to all.

The goal of this website redesign is to emphasize the key messages of Daily Table, which are helping more people in the local communities to get access to healthy food at an average of 30% or less cost than local markets and free delivery with 2 miles.
Timeline
10 weeks
My Role
User Research, UX/UI Design, wireframes, visual design
Tools
Figma
Project Overview
The original website was cluttered, lacking imagery and call to actions. It is difficult for users to focus on their mission and what makes their store unique from other grocery stores. There are too many navigation menus which creates a confusing experience.
The Problem
1. Primary:
Poor families. 60%. They are lower-class families who have low income; They are returning customers who live near the neighborhood. Single mothers/fathers with their children who cannot afford groceries in their local supermarkets. They get groceries very frequently since they need to cook for their children every day so they want very cheap food.
‍
2. Secondary:
Low Income Workers. 30%. They work in places that pay minimum wages such as restaurant servers, childcare providers, housekeepers and etc. Since Daily table also provides pick up and delivery. Some supermarkets won’t accept food even it’s a few months/weeks from the expiration date. That individual worker can order online or go to the local store to buy groceries after work.
‍
3. Tertiary:
Elderly (55-80) -10%. They are the people who already retired and probably can’t afford health issuance. Their children are away from them and can’t give them support for their health, they need fresh and affordable food.
Target Audiences

Sitemap

Based on the research and brief brand discovery, I created the initial sitemap with 8 templates for different pages. I started with how I can reorganize the features and content that could solve the problems, which helps the design of the wireframe and the logic of the entire application.

Design System

I created the style guide with the colors, typefaces, buttons and icons. I choose four main colors for my website which I think would better represents the food service. The color palette is minimal to focus on the content and imagery and still keep the similar original theme color. I added one yellow as a secondary color, and four different shades of grey for the texts. Plantin MT is the primary font for the headings since I want to keep the font more consistent with the logo, I used Proxima Nova with different sizes and weights for the subhead and body, and buttons to indicate information hierarchy.

Initial Wireframes

Home Page

About Page

Product Page

Donation Page

Other Screens

On find a store page, I put the three blocks of the three individual stores, and three locations are showing on the map to give users a better sense of where they located. It is important to show all the employees and their positions on our team page to conveys the message of a warm and friendly environment. In order to reduce page loading time, I designed one carousel so users can click through to see more partners. Besides, I changed the layout for product details and blogs to make it easy for users to navigate and kept all the hero images sizes consistent.

Mobile Version

Reflection

This project helped me to make design decisions from a client's perspective and prioritize usability over aesthetics. Creating the style guide is a key to my design solutions.

If I have more time, I would improve more on conducting the usability tests to understand more on user pain points. I will continue to do more research about brand discovery and the company's culture. In the future, I hope Daily Table would implement this design which will attract more customers to the store.

JOHANNA CHEN'S PORTFOLIO
LinkedinResume