Home Kitchen To Deli

Seitan Road

Project Overview
Building a web application for a Seitan products business, includes a products store, delivery reports , kitchen reports and fresh new branding
year
2020-2021
my role
UX Design | Business research
team
Alex Guberman - Full stack developer
Liron-inbal persi - UI design | Branding
project on different screens

Introduction

As a boutique business owner Aya was everything - chef, Marketer, dispatcher - all while being a full time mom. She needed more time, and we were there to help her find it.

Challenge

Reduce the time and effort of manual Order logging and direct phone calls with customers explaining about existing products , orders and delivery Methods.

Business Research

The process included 3 key stages:
  1. User research - Users interviews (phone), online information from social media and relevant sites.
  2. Owner research - Business owner interviews
  3. Market research - Team meeting, brainstorming,  internet and social media analysis

Target Audience

users
Men and women
20-50 years old
notebook
Educated and curious.
Value quality, taste and service over price.
classes
Middle/high socioeconomic status
bag
Average order: once every 3 weeks
vegan
Mostly vegans
place
Residence: Central and Jerusalem district

Brand promise

Creating fresh, vegan, high-quality products with a rich texture and flavor.

Identity values

Handmade
Quality service
Delight
Richness of flavors
Freshness

User Journey

We created a customer map based on questions about the purchase journey from start to finish, a combination of emotion and actions that accompanied the order.

Business owner

The business owner map shows how much effort and passion the owner puts into her service, and how it is to optimize her time and energy.

Key insights

Management
-Issuing the delivery system to an external supplier
-Building an ordering and kitchen reports system
-A customer management system
that will keep details and information about repeat customers
Customers
-Product catalog and product page that includes detailed information for customers
-Automatic payment and receipt system

Products
-Rethinking product packaging, labeling and storage to create a holistic experience that present freshness and provides preparation instructions and additional help.
Marketing
-A new design system that will highlight the quality of the products and provide a basis for the application, packaging and future materials.

App research

Experience challenges

Customer
  • External payment services
  • Weekly product preparation
  • Option for different versions of the product
  • Three different delivery options on regular day
Owner
  • Use of order data for kitchen and delivery reports
  • A simple interface that allows the owner to change and limit purchasing options

Web structure

Due to the nature and goals of the business, research emphasized the following topics
sites analysis
market sites analysis

Design, prototype and testing

Wireframe

The design base was created to meet the needs and limitations of customers and the business itself. Everything was done using tools for top-quality accessible use following extensive research and analysis of similar stores.
low Fidelity Prototypes
wireframe
Old Graphics
old graphics
New Mood board
mood board
New logo
new logo seitan road

App style tile

Typograhy
Heebo Light
א ב ג ד ה ו ז ח ט י כ ל מ נ ס ע פ צ ק ר ש ת
Heebo Normal
א ב ג ד ה ו ז ח ט י כ ל מ נ ס ע פ צ ק ר ש ת
Heebo Medium
א ב ג ד ה ו ז ח ט י כ ל מ נ ס ע פ צ ק ר ש ת
Color palette
#214D3A
#2C753B
#F9CE40
#CE2A21
#E22A24
#3B3B3B
#A3A3A3
#F0F0F0
#FFFFFF

Final design

final design preview

Testing

Throughout the project, a number of tests were performed on real customers, utilizing heat maps, screenshots and user reviews. The conclusions were converted into changes made during the developing process.
  • Features and basic flow testing.
  • Alpha test - Version of adding products without order to a limited number of users
  • Beta - Full order version for a limited number of customers
  • Gamma - Full order version open to all users - coming soon
heat map
heat map seitan road

Process conclusions

The process involved dozens of design decisions, business efforts and development changes, several lessons were learned for future development:
  • Get started - Do not wait for the perfect version. Once you have the minimum necessary features on the site to create an order, you should expose it to the users and learn as you progress.
  • Jumping around - As the process progresses the owner discovers customer needs and expectations and is exposed to new options, It is important to match expectations from start and be attuned to the customer's needs and not just their requests.
  • Small steps - A cycle of design and development, shortening the design process and reducing the number of elements worked on simultaneously, thereby optimizes the progression of the project.
  • Anything is possible - But it all depends on manpower, In thie specific case, a bottleneck was created because everything was done by a single developer.
  • Decision making - Despite understanding the project objectives and preparing a PRD document, work was not conducted with a schedule and MVP. Task management must be mediated by a product manager in order to establish order and prevent misunderstandings.
  • Initial design - The initial wireframe screens were designed on a widescreen which prolonged the responsive design process. No original text lengths were tested, an issue created a feature placement problem. Wireframing for mobile should have been done before web.
Habit compass

Searching for the perfect grid