-
SERVICE
-
BRANDING
-
WEB
-
UX + UI
-
MARKETING STRATEGY
TOOLS USED:
Photoshop, Illustrator, Axure
​
TIME:
Mar. 2017
Personal Work
PROCESS
Surveys
Interviews
Benchmarking
Ideation
Testing
​
Sitemap
User Flow
Wireframe
Usability Test
Mock-up
Persona
Story Board
Customer Journey Map
01.
BACKGROUND
Students' meal experience
For many students...
Meals in restaurants are expensive.
Not good at cooking.
Don't have too much time to cook.
Their meals are monotonous.
Insights from the survey and interviews
Benchmarking
I tried HomeChef, one of the most popular meal kit services, with a friend, here is what we thought:
02.
DESIGN PROPOSAL
CoCook
Basic Idea: Cooking Co-op + Meal Kit Service
How it works
1) Several people make a group and order meal plans on CoCook platform.
2) Then, they receive the pre-portioned materials from near grocery supplier and the recipes from the platform.
3) Each member takes a turn cooks and brings meals once for the whole group. The simplified recipe would shorten the cooking time, and people would eat healthier.
Persona
We tried this way of cooking. Following is the Evaluation of it.
Click here to view the details of the process.
Evaluation
After the test, a follow-up survey was conducted. The participants’ answers were used to evaluate their experience of CoCook.
​
As shown in following diagram (1= bad, 5 = good), the score of "difficulty", "time benefit" and "enjoyment" were increased. So, compare to cooking alone, CoCook makes cooking easier, helps user saving a lot of time, and brings more enjoyment.
03.
DEVELOPMENT
CoCook
Personas
Story Board
Customer Journey Map
04.
WEBSITE DESIGN
CoCook
Sitemap of CoCook
Purchasing Flow
Wireframe
Rough Sketch
Digital Wireframes
Usability Testing
The Missions of the Test:
1. View your CoCook Group and CoCook Schedule.
2. Order first three meals and checkout.
3. Select delivery method (In-store pick up or deliver to your door) and payment method (one payment or split the payment)
4. Place order.
Refined Design
Visual Design
Wireframes of Mobile APP (Key Screens)
UI Style Guide
Color Palette
Typography
Big Headlines. Hind Bold, 42px.
Big Headlines. Hind Semi bold, 32px.
Big Headlines. Hind Semi bold, 26px.
Big Headlines. Hind Semi bold, 20px.
Small Headlines. Hind Regular, 18px.
​
Long Paragraphs. Montserrat Regular, 13 px.
​
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
​
Small texts. Montserrat Regular 11 px
Please click here to view Part 2: Marketing Strategy