S.le

Cook off

UI/UX DESIGN
My roles and responsibilites included Creative Direction, Ideation, and Design

Overview


In my third term, a major project assembled me and 3 other teammates to build an innovative community support application. During our journey, we experienced a lot of excitement, surprises, and ups and downs.

In brief, Cookoff  is a social media application designed to host cooking parties, bring family and friends together, and make cooking fun between users by streaming.

In this application, my role is to design the interface, style guide, design brand identity, conduct usability testing and helping the front-end engineers to complete front-end components.

DESIGN PROCESS
01
Overview
02
Problems
03
Solution
04
Testing
05
Insights

My role

The team

Duration

1. Handle UX UI design
2. Defined color, typography, and interaction for the brand.
3. Design the end-to-end user experience.
4. Produced the floe/interation prototyping, design mockups, design assets and guidelines.

Simon Le- UX UI designer
Amina Ashour-UX UI designer
Takuya Toyokawa-Front-end Developer
Dmitry- Back-end Developer

3 months from September 2020 to December 2020.

Identify problem

The business perspective problem is that many people, especially now, are unable to host cooking parties due to their schedules, location, or in the pandemic. Many people are failed to enjoy their meals with their beloved. Additionally, there is a big gap in the streaming market that focus on people who enjoy cooking and want to share the way they do it with the world. Lastly, local businesses face challenges with selling their local foods based on the pandemic effects.
‍
However, the UX and UI problem for me (as a UX UI designer), I have to figure out a design solution to make cooking virtually easier, funnier, and more interactive between the host and the audience. Or, let say in a virtual dinner, how does the host can keep everyone engaged not just staring at the phone looking other eating and feel even more isolated.
‍

Mood board

I started with a mood board, 2 user personas and briefly build 2 user flows in order to emphasize, put my feet into user's shoes to understand their behavior and goals.
‍
‍

Primary Persona + User flow

Our team build 2 different personas in order to present the potential user based on our discussion and the research we conducted earlier. A useful persona must represent the actual potential user who are most likely to have motivation to use the app based on their struggle.

Secondary Persona + User flow

Design wireframe

To provide a clearer visual flow of the users, I transferred the design ideas into wireframes.
With 3 main features: streaming cooking and sharing recipes + recommended shopping list, we firstly decided that user will need multiple steps to operate a stream by themselves and inviting other friends. During the stream, the host is able to share their recipe either beforehand or after they finish their stream so that the audience can actually try it out.

Because of limited time of the project, we discussed and decided that this is the most convenient interface solution for both developer and designers to complete it on time.

Design Components for Front end Developer

This is the phase when I and another designer brainstormed ideas for logos, color palette, and all the interface elements. We tried to stick to the brand identity: MODERN, CATCHY, COOKING-RELATABLE.

The final color palette first came up with the violet color, however, we decided to change to warm red after discussed with the team because it aligned more with the brand which is related to cooking.

The menu bar will have three main icons: Recipes, User profile, and Event (when you hover it will turn to the egg yellow color to differentiate with others icons).

Take away:
It is important to understand the brand spirit and design the interface to match with the brand, not just I made it because I like it.

Mock-up (High-Fidelity)

The Mock-up or the High-Fidelity is the combination between the wireframes and the style guide. It took us 3 days to discuss, determine the navigation and polish the interface one more time before developing it.


Take away

Technically, I am not fully happy about the project due to limited time allowance. However, building this app really helped build my confidence as a designer. This was my 2nd portfolio major project in my program. In this project, I really felt like I was starting to get in the groove of the design process. Still, I am now working on enhancement of the app interface because I want to improve my UI design skill set.

MORE WORKS

Replay

Minimal

Others

About me