Seattle Tilth Alliance Website Mac View

Eat Local

UX/UI Design
User Research Methods


Eat Local is a local food company producing healthy and good quality prepared meals. As the number of online food delivery services increase today, Eat Local needs to improve their online shopping features on their website in order to be successful.
This is an academic project that I worked on by myself in my UX/UI Design class. I focused on understanding interaction design to create a product that enables the users to achieve their goals in the best way while designing an E-commerce website.


This website will be designed to be a self-service UI where customers browse and potentially make purchases. Since most of the users purchase a prepared meal to save their time, making it easy for the users to complete their order through mobile will be one of the biggest goals.
In order to achieve this, I focused on improving ease of use of the purchase process to allow users to find a product and complete an online shopping tasks more quickly and easily.

Information Architecture

Eat Local Information Architecture

User Persona Example

Eat Local User Persona
Eat Local Visual Design

Interaction Design For Check Out Process

Eat Local Interaction Design

Low Fidelity Wireframe

Eat Local Check Out Process Wireframe

Visual Design

Eat Local Check Out Process Visual Design

Style Guide

Eat Local Color Scheme Eat Local Color Scheme Eat Local Icons

Final Thoughts / Reflection

Through this UX/UI Design project, I was able to obtain a deeper understanding of how to provide the best interaction design by understanding users. I learned the importance of selecting right user personas in order to know the users' needs and preferences, and the context of use. For the visual design, I chose a card-based design which is one of the best ways to organize all the different contents in one small space. Users are able to select one of the items that they are interested in to see more details as they pick a tangible card in real world.

If I were to continue working on this project, I would focus on providing clear error messages so users can easily correct any problems they encounter. It is very important for me as a UX designer to predict where users will make mistakes, and be able to lead them to the right direction.