Oui Chef
Concept app — Jan '24
My Role
User Research, Competitor Analysis, Visual Design, User Flow, Branding, Rapid Prototyping
Team
Saru Arora
Yua Gao
Anna Sybinco
Tools
Figma, Miro, Adobe XD, InVision
Timeline
3 weeks
Overview
This is a revisionary approach to our first team design challenge assigned by University of Toronto SCS UX and UI Design program.
Our project centered around developing a mobile iOS app concept named 'Oui Chef,' aimed at reinventing the way people cook through leveraging innovative technology.
Oui Chef integrates AI technology to address common pain points encountered when cooking at home. It boasts a smart search feature that provides personalized meal plans, recipe suggestions, and ingredient alternatives, tailored to individual preferences. The app also incorporates voice AI functionality, enabling users to navigate and execute cooking tasks hands-free. The goal of Oui Chef is two fold: promote healthy, sustainable diets and convenience.
CONTEXT
Where healthy eating meets urban hustle.
Residing in a bustling urban setting, time is a precious commodity, and the pursuit of convenience is paramount. While individuals want nutritious meals, cooking can be a time-intensive challenge. As a consequence, many resort to dining out or ordering in, options that can be costly and occasionally detrimental to health.
THE CHALLENGE
How can we design an app that solves users’ painpoints when cooking at home?
USER RESEARCH
Finding key pain points.
We conducted 5 interviews in order to discover what challenges and motivates users when cooking at home. We discovered there was a common theme of cooking at home to be time consuming.
We also surveyed 130 participants, ages 18-40, who on average cook 3-5 times a week.
USER PERSONA
Meet our match.
Based on our research insights, we came up with two personas that reflects our target user base.
COMPETITOR ANALYSIS
Unveiling the top culinary champions of the app world.
Tasty, SideChef & Yummly were the top three mobile applications that are In the food & drink category and are aligned with the concept of home cooking. By conducting an analysis, we discovered their unique competitive advantage and features that enhanced and took away from a seamless user experience.
FEATURE PRIORITIZATION
Turning insights into actionable goals.
Gathering and analyzing our data from our user research and competitor analysis we decided to focus on four high-level goals.
IDEAL USER JOURNEY MAP
Cooking quest: the ultimate user journey recipe.
Based on our data and discoveries from our research, we’ve put together an hypothesized user journey map.
USER FLOW
Whipping up seamless user bliss.
As we unveil our MVP, AI smart search and voice AI as our unique value proposition, we recognize the pivotal role of swift and successful user adoption from our target audience. Our aim is to seamlessly integrate our app into users’ daily routine by following Jacob's law and thoughtfully designing an interface with a simple and intuitive user flow.
Our user flow was categorized into three phases: Onboarding, Browsing & Interaction, and Cooking.
Onboarding Flow
Returning users who have logged can sign in and then go to the homepage.
New users have the option to sign up. The sign up process will ask them if they would like to 'Create an account' or sign up with Google, Apple, or Facebook. If they choose ‘Create an account’, the sign up form asks users to enter their name, email or phone number, username and password.
Browsing & Interaction Flow
A user’s browsing experience after the landing page has five main pages:
2.0 — Homepage
The homepage presents users with uniquely curated content and personalized recommendations based on their activity. They can use smart search, view delivery notifications, check out stores and recipes.
2.1 — Cookbook
This is where users can create custom tabs to save their favourite content to view later or share with friends and family.
2.2 — Mealplan
Users can create their meal plans for the week. They have two viewing options, “today” and “this week”. Recipes can be added by day, change serving sizes, view total macros and add all ingredients to the shopping cart.
2.3 — Shopping cart
Users can add items to their list and view the recipe that is associated with them and change serving sizes which would update the list automatically. They can share their shopping list with friends and family. They can also order home delivery from grocery stores near them.
2.4 — Recipe page
This page presents users with a video of the recipe they tapped on, they can see the number of ingredients, the approximate time, and ratings underneath the title. The mic icon on the right has a cta to turn on hands free mode that sends a prompt asking users If they want to allow microphone access to use voice commands such as ‘play’, ‘rewind’, ’pause’, 'forward' and ‘stop’ for the video. Users are able to customize serving sizes that presents accurate number of ingredients and the ability to add ingredients to a shopping list. There are three closed tabs that can be expanded to view info, Directions, Nutrition and Reviews. When users play their video it will show them how to cook recipe step by step.
Content Flow
One of our MVP— Voice AI is the highlight for this flow. Our aim is to make the content as intuitive, seamless and convenient to follow along so users can easily use the app day to day.
A user that wants to make the most of their time in the kitchen will find everything they need on the content page.
LOW FiDELITY WIREFRAMES
MOODBOARD
Mixing ideas to craft mid-fidelity wonders.
As a team we wanted to maximize creativity so we decided to brainstorm multiple lo-fi wireframes, then weighed out the pros and cons for each and combined all the best ideas into our mid-fidelity wireframes.
MID FiDELITY WIREFRAMES
Building a precise journey.
We designed the onboarding, browsing & interaction, and cooking wireframes.
MID-FIDELITY TESTING
Unveiling insights to perfect the user journey.
We conducted two rounds of user testings with 5 participants each to discover problems with onboarding, understanding of MVP, and navigation.
We identified two challenges: Enhance the onboarding process and the content layout.
This can be accomplished by:
BRANDING & VISUALS
Cooking up confidence.
The focus on Our Chef’s branding was to cultivate a sense of reliability, expertise, and convenience to an immersive culinary journey. We wanted users’ to feel a sense of excitement and ease knowing their cooking experience would be stress free, quick and healthy.
Logo
Our goal with the logo, “Oui Chef” was to be catchy and playful, suggesting a sense of authority and expertise, instilling confidence in leading users through their culinary journey.
Colour Palette
We wanted the visual focal point to be on the vibrant colours of ingredients that make up a dish— earthy tones, deep reds, and fresh greens at the forefront.
This led us to follow Materials Dark theme colour elevation principles, the background was a shade of black followed by lighter shades as component elevation increased. To contrast a dark theme and ensure readability, we chose white for texts. To subtly bring attention to CTA buttons without visually overwhelming users, we choose a vivid green that portrays trust, health and growth.
Typography
The typeface choice for the logo is Giaza serif, it has an elegant and playful look meant to give the app a unique and recognizable identity. For the header and body we chose a legible and modern typeface, Proxima Nova.
FINAL DESIGN
User feedback shapes the experience.
The iterative design process, driven by user feedback and testing insights, has resulted in an engaging and personalized user experience.
We streamlined the sign up process by adding concise and appealing infographics of the main features for easier transition and adaptability.
Our commitment to accessibility is reflected in our adherence to WCAG guidelines for color contrast and screen reader compatability. We also placed the search bar near the bottom of the screen with the ability to change the text bigger or smaller.
We emphasized a clean aesthetic, ensuring clear information hierarchy and spacing. Tabs were added to organize content effectively, preventing user overwhelm. Furthermore, CTA buttons were consistently placed throughout the interface.
REFLECTION
A Journey of growth, insights, and AI magic.
This was a revisionary approach to our original case study after four years. I went on a journey to refine and elevate our concept app, a chance for myself to reflect and grow. When i revisited the competitor analysis, i realized that there were overlooked details, prompting a redo for accuracy and deeper insights. Discovering AI integration in competitor apps led to pivoting our MVP to smart search and voice commands. Through this process, i experienced significant growth in storytelling, design and analytical thinking. Embracing a learners mentality, this revision served as a catalyst for professional development, shaping my approach to future projects with confidence.
Project Takeaways:
