Wokie Talkie

Connecting foodies through recipe translation and preservation, sharing, and exploration

OVERVIEW

When I started this project, my grandparents were in the process of moving to China. We have lived together for as long as I can remember, and my inspiration for designing this app came from my passion of cooking with them.

They will be moving to China soon, and as I can only speak and not write in Chinese, I wanted to design this app with the goal of allowing us, as well as many others going through similar situations, to continue this tradition. 

Wokie Talkie is a recipe-sharing translation app that enables users to preserve family recipes, share cooking creations within a small community, and learn new culinary styles from around the world.

MY ROLE

User research, interviews, illustrating and logo design, wireframing, prototyping, user testing

DURATION

July 28 - Sep 7 2023

TOOLS

Figma, Figjam, Miro


PROBLEM

Stirring the Pot: woking on a solution

How might I create a centralized platform that bridges language gaps so that families can preserve culinary traditions, new cooks can build a close-knit community to share their creations, and where foodies can explore global recipes?

(working, get it?)


RESEARCH

How can I make the lives of foodies easier?

I conducted semi-structured interviews with 6 food-loving individuals who also have family members living miles (or countries) away. From my research, I wanted to collect information on their current methods of communicating with family members and their cooking styles/preferences. My own grandparents played an integral role in my research, as designing an app inspired by our experiences together was a fundamental aspect of my project.

Participants:

  • 18-73 years old

  • Interviewed via phone call or in person

  • Interviews were 15-20 minutes long

Key Insight #1:

“I love that my grandma teaches me how to cook over FaceTime, but it can be time-consuming because I take notes on my iPad”

Key Insight #2:

“My kids are all busy away at college, so when I send them a recipe, I feel like it gets lost with all of the other messages” 

Key Insight #3:

There is a disconnect when sharing recipes because some users do not measure (they eye their measurements) 

Key Findings:

Opportunities

  1. Text translation feature for chats, recipes, and ingredients 

  2. Appealing and simple platform that is usable by older users who may not be as tech-savvy

  3. Space for friends and family members to share their creations in a close-knit community 

  4. Feature for adding images to recipe steps

  5. Feature to like, comment, save, and see the recipes to posts 

  6. Feature to add ingredients from a recipe into a shopping list 

  7. Provide the option of posting a recipe to a specific chat or publicly to your friends

  8. Provide a shareable account QR code to invite friends without the app

Competitive Analysis

Based on my user interviews, I discovered that Messages, WeChat, and Facebook Messenger are the main platforms they use to stay in touch with their loved ones. While these apps serve as popular communication tools, some of their weak points make it difficult for users to fully utilize the apps, and they’re not an ideal platform to share recipes.

I also looked at two popular recipe apps
to gain deeper insights into current recipe sharing practices and how I can design my own unique version of one.

Pain Points

“Camera eats first” is cute but knowing how to cook is cuter

Messages, WeChat, and Messenger are great when it comes to sharing messages, images, voice memos, and face-to-face interactions; but a recipe is more than just an image lost in messaging history or words that come in through one ear and out the other in a video call.

That being said, Pepper and NYT Cooking are great apps when it comes to finding recipes,
but they do not offer user communication features and their recipe content is exclusively in English, limiting accessibility for non-English-speaking users.

There is an opportunity to create an app that integrates messaging, translation, and recipe sharing + holding


USER STORIES + TASK FLOWS

Whose day can I brighten?

Based on my user interviews, I crafted 3 main user stories that encapsulate the diverse range of individuals who would benefit from using Wokie Talkie.

Jerry, sentimental college graduate

Jerry is a 22 year old college graduate who used to cook with his friends in college. He enjoys cooking, but is shy about sharing his not-so-aesthetically-pleasing dishes online. Since graduating, he wishes to be able to share his fun creations with them again and to see what they’ve been cooking. He then hears about Wokie Talkie, where he and his friends can share their creations privately. He feels content because it’s like their own social media platform and the experience is reminiscent of their college years.

Bonnie, stressed pre-med student

Bonnie is a stressed Chinese American student studying for the MCAT at SFSU. Her schedule is packed with classes, labs, assignments, and studying. She also feels homesick because she misses her grandpa’s comforting food. She wants to cook his dishes, but it’s difficult for them to communicate because she can’t speak Chinese. She then discovers Wokie Talkie, where she can communicate with her grandpa and translate his recipes into English. Now, she can learn how to cook her favorite dishes and rejuvenate herself for studying.

Suzanna, curious mother

Suzanna is a mother of 2. She cooks by eye, so measuring spoons and cups are nonexistent in her kitchen. Ever since her youngest daughter moved out, Suzanna wants to recreate her cooking, but she doesn’t measure ingredients like her daughter does. She discovers Wokie Talkie, where her daughter can add pictures to recipe steps. Now, Suzanna can estimate how much of the ingredients to use based on the photos, and she’s excited to find out whether her cooking abilities were passed onto her daughter.

Task Flows

From the user stories, I created 3 task flows that would enable Jerry, Bonnie, and Suzanna to accomplish their goals: create an account, open a recipe and translate it, and post a recipe.

I want to reconnect with my college friends so we can share our food creations together again

Task Flow 1 - in order for Jerry to accomplish this goal, he needs to:

Create an account and connect with friends/family

Open a recipe and translate it


I want to learn how to cook my grandpa’s recipes but we speak different languages :(

Task Flow 2 - in order for Bonnie to accomplish this goal, she needs to:

I want to learn what kind of dishes my daughter cooks but I don’t measure ingredients like her😢

Task Flow 3 - in order for Suzanna to accomplish this goal, her daughter needs to:

Create a recipe and add it to a group chat

IDEATION + DESIGN

Finding a way to create a simple app with a range of functionalities

After identifying key functions and characteristics that foodies desire, such as translation capabilities for both messages and recipes and a simple user-friendly interface, I focused on crafting pages and features that aligned with the insights I gathered from my user interviews and stories.

Low-Fidelity Sketches

Low-Fidelity Sketches

Mid-Fidelity Wireframes

In order to gather early insights and feedback on my premature designs, I conducted a first round of unmoderated user testing with my mid-fidelity wireframes, to pinpoint areas of potential usability issues and space for improvement. Below are just a few of the key screens.

I wanted to make it easier for users to find group chats and one-on-one chats by making a clear distinction between them

I designed a community page where users can share and view recipes with their close friends and family within a small and intimate group

I made a recipe section in the chats, creating a central place to find both recipes and messages exchanged between a specific group of people

Users can save ingredients from recipes in chats and the community page; I wanted to simplify finding their shopping lists by organizing them based on where they saved the ingredients

I implemented a translation toggle button so that users can have a convenient way of translating recipes within the app

I placed “create a new recipe” on the same page with the users’ posted recipes, creating a central place for all relevant functionalities


TESTING + IMPROVEMENTS

Woking it out: testing and sizzling improvements

During the initial round of user testing, I asked 6 users to perform three core tasks: account creation, opening a recipe and translating it, and posting a recipe. My goal of the testing was to find any inefficiencies or inconveniences users experienced while completing the tasks, as well as their thoughts and feedback for how to improve my designs and functionalities of the app.

(working it out)

During the usability testing, users navigated through the tasks with ease and without error. However, they raised concerns and expressed confusion about certain screens and features, particularly the lack of emphasis on recipe creation and the translation buttons. I addressed these issues by identifying several key areas for improvement in my design through the following iterations:

1. Onboarding Process Enhancement

Initial feedback suggested that the onboarding process was perceived as too quick, leaving users unsure of where to navigate after creating an account

To address these concerns, I implemented an informative onboarding with self-illustrated drawings that guides users through the app’s key functionality

2. Highlighted Recipe Creation

Users noted how the translation button was inconsistent throughout the app (one had a toggle, one didn’t)

In response, I created a separate page designated for creating recipes so that the process is more easily accessible

3. Consistency in Translation Options

Walkie talkie?🙅🏻‍♀️ ✨Wokie talkie✨

When it came down to naming the app, I wanted to blend its core aspects: messaging and food! Inspired by my talented grandparents' delicious and homey meals cooked in a wok, "wok" was the first piece of the puzzle. To incorporate the messaging element, I considered names like "Wok Chat" and "Wok n Talk" and then came the light switch moment: walkie talkies.

To fix this, I added a feature for users to save their preferred translation setting, making it easy to translate content across the app with the translation button

Does “Wokie talkie” sound exclusive?

A few individuals pointed out that "wokie talkie" might sound like it's catered to the Chinese community, which was not my intention because I wanted it to be an inclusive space.

To address this concern, I reached out to a few non-Chinese users and they liked how the name was a cute play on "walkie talkie." Combining this new feedback with my initial inspiration for the name, I decided to keep it. From there, I designed the theme of the app as planets to reinforce the idea of inclusivity, and I chose blue and purple as the main colors to represent the galaxy.

Gaining perspectives: taking a step back, expanding, and fine-tuning

During my second round of user testing with my newly iterated wireframes, I collected valuable feedback from users who expressed concerns about the app’s perceived limitations: 

“It would be nice if I could look at recipes from different cuisines and diets”

“What if a recipe has a cultural/region-based ingredient that I don’t have?”

“None of my friends are that good at cooking, so I’d like to find popular chefs who actually know how to cook” 

Upon reflection and mentor feedback, I realized that my initial focus on users sharing their food with close contacts may have led to overlooking the potential for a more expansive user base. I was faced with a dilemma of maintaining the app's privacy while also making it open. After brainstorming how to address this, my solution to this problem provided both privacy (private or public account) and exploration through the following changes to my initial design:

1. Addition of an Explore Page

Users enjoyed having a community page exclusive to friends and family, but some felt limited and perceived the app as isolated

To address this concern, I added an explore page so that users have the option of discovering cuisines, recipes, and chefs outside of their direct following, while also maintaining a private account if desired

2. Offering Ingredient Substitutions

Users were worried about how to adapt recipes that called for cultural or region-specific ingredients that might not be easily accessible to them

In response, I created a substitution feature that provides suggestions for replacing ingredients

3. Translation Clarification

Users are used to translating individual message blurbs, and they appreciated the convenience of having a single button for that purpose. However, this change from their usual translation process led to confusion at first

To resolve this issue, I included a tooltip that encourages users to click the translation button, ultimately saving them time and effort while reducing potential confusion


Initial feedback suggested that users were confused about having to visit the account page to create a recipe

FINAL SOLUTION

The learning process was like woking on sunshine☀️

After multiple rounds of usability testing and all of the iterations were made, my final design was complete!

TASK - Create an account and connect with friends/family

TASK - Open a recipe and translate it

During user interviews, participants emphasized how important communication and recipe organization was, so I created an efficient method for finding recipes shared in chats.

  • Users can click on the notification to be directly taken to the chat where the recipe was posted

  • Playful wok pun in the notification title

TASK - Create a recipe and add it to a group chat

Wokie Talkie was created for people of any age, so I wanted to make the launch screen and onboarding process visually appealing, descriptive, and captivating.

Users have various ways of finding their friends:

  • Connect with those who already have the app

  • Request friends from any country

  • Send a personalized QR code to invite people to the app

I separated the recipe creation process into three sections: details, ingredients, and steps.

  • The three sections allows users to easily access and modify specific information without the need to scroll through the entire content

  • Users are able to add images to their ingredients list and to the step descriptions as visual aids


CONCLUSION + REFLECTION

Gained so much knowledge, and so much more to learn!

This was my very first project and it was quite a journey! Just a few weeks ago, I taught myself the fundamentals of UX design and understanding the needs and goals of users. While there was a notable learning curve, it challenged my thinking process and helped me grow.

Wokie Talkie is a passion project, and the user feedback I received was invaluable in creating a product they would enjoy and find useful. As I progressed, the process of seeing my sketches turn into a workable prototype was such a fulfilling experience and I’m excited to continue learning and improving my research and design skills.

Further Development

I began Wokie Talkie in late July, with the goal of completing it before my fourth year of college. I created a project timeline, honed my time management, and I was able to meet my goal by doing so.

Given more time, I would have liked to explore alternative recipe creation methods, such as voice or video input, to provide greater user flexibility. Additionally, although users voiced their favor of the name "Wokie Talkie," I recognize that opinions can evolve, and what works now may not work in the future. I am committed to proactively making any changes if needed to ensure inclusivity and alignment with the core values of the app.