chew-logo-3.png

DATE

March - May 2019

ROLE

Research, Branding, Design, Animation

error

*PROTOTYPE AVAILABLE ONLY ON DESKTOP SITE*

 

INTRODUCTION

 

OVERVIEW

GOALS

My main goal was to take a product from conception to handoff while incorporating UX research and testing into my design process. I wanted to challenge myself by utilizing new tools to create my first Android app. I seized on a friend’s idea for a streaming platform focused on food.

CONSTRAINTS

I was the sole contributor to this budget-less project, so I was constrained to my own software, trials, and user testing on my own. Countless technical issues arose from integrating partially-compatible design software. Next time, I will try to use a comprehensive tool encompassing the ability to wireframe, design, prototype, and animate all in one. Without a developer on the team, I followed best practices to make future development easier. I started design from the smallest common Android viewport while following a logical layer structure and style guide.

 
 
 

PROBLEM

Niche consumers and food choice are growing, from vegans and foodies to organic and gluten-free food. Consumers, restaurants, and companies all want a space to interact. Consumers want to learn from professional chefs, but cable cooking shows are slow and lack interaction while live streaming platforms aren’t focused on food content. Restaurants want to connect with new customers, but rely on word-of-mouth and unpredictable reviews.

 
 
 

SOLUTION

To address this lack of interactive food platform, CHEW was conceptualized as a ‘mobile food cinema’. It allows users and restaurants to connect over food in real time. Users can interact directly with chefs while learning about local restaurants and new recipes. Restaurants reach new clientele by showcasing their kitchen, talent, and menu. 

Over the course of the project, my concept shifted from a food streaming platform for all to a community of restaurant streamers and viewers. I hoped to raise the quality of the platform’s content by making CHEW more exclusive. To facilitate this, a verification process was added where your identity as a restaurant owner is checked before being allowed to stream. The business model for CHEW was similar to that of the Twitch streaming platform. The app is free to use, with profit being earned from advertising revenue and question credit purchase.

SUCCESS METRICS


Success for this personal project was defined by user completion of the persona’s main task: making a reservation. While testing, I rated the ease by which users accomplished this main task and other central tasks with the user interface. By comparing these ratings across prototypes, I could assess how comprehensible my design was in helping users complete their goals.

 
 
 

TOOLS


The following tools were used (from left to right): Talebook, Sketch, FlowMapp, Overflow, InVision, Figma, ProtoPie, and Adobe Photoshop.

tools.png
 
 

RESEARCH

 

SURVEY

I surveyed 21 friends and strangers on Slack and Facebook with 31-questions about technology, food, and my product concept. Overall, I found that health-conscious, tech-savvy people were most interested in a food streaming platform. Based on these responses, I defined a persona and main use case for the project.

On average, the respondents were in their late 20s, located internationally, tech-savvy, and most interested in Italian, Asian, and Arabic cuisine. The respondents enjoyed watching cooking, but didn’t use food-related websites or apps often. They learned about new restaurants and recipes from web searches, social media, and friends. They weren’t keen to open a cookbook and follow a recipe the old-fashioned way. Although the respondents were only somewhat interested in a food streaming platform, they sought to interact with content they did consume. Below are examples of particularly insightful responses.

  • “I wouldn't be really motivated to try a new recipe that requires unusual ingredients/kitchen equipment/super advanced skills.”

  • “I wouldn’t use [this app] because I like to cook with efficiency, I feel like videos and livestreams would slow me down. I just want to go through the recipe and be done.”

  • “I'd rather interact with people I'm cooking with in the room.”

 
 
 

COMPETITOR ANALYSis

The main competitors within the live streaming space are Facebook, YouTube, Twitch, Periscope, and Livestream. The most prominent live streaming platform, Twitch, has a Food & Drink section. However, there are few active streamers here as the platform’s typical users are young male gamers; not exactly the type to watch cooking. Facebook and YouTube’s live sections are very popular, but not concentrated on food. These generic live streaming platforms contain mostly companion material to cable shows, without much original food content. The Twitch, Periscope, and Livestream mobile apps below were particularly useful for inspiration during the initial design process.

 
 
 
 
 

PERSONA


Anyone who enjoys watching cooking could find value in CHEW. The survey responses suggested that my target audience were younger, tech-savvy foodies who eat out often. I aimed to provide this target audience with a community to learn about local restaurants, recipes, and to directly interact with chefs. This resulted in the persona for this project, who I named Tia.

 
 
 

JOURNEY MAP


To better understand an average experience with the platform, I mapped the main use case flow for our persona, noting obstacles, her actions, and solution opportunities. Mapped below is Tia trying CHEW for the first time, setting a stream reminder, asking a question, and finally making a reservation (her main goal).

 
 
 

SITEMAP


A basic information architecture was conducted resulting in a sitemap to provide a list of essential screens and flow logic for the design process.

 
 
 
 
 

USER FLOW


A visual representation of the path the persona user, Tia, would follow to accomplish her main task: making a reservation at a restaurant. This user flow diagram helped me to reflect and receive feedback on the internal logic and user requirements of the platform.

 
 
 

DESIGN

 

STYLE GUIDE

product-icon@4x-small.png

The CHEW logo focuses on our mascot, a goofy-looking boy with bulging cheeks who is chewing on the app’s food content. The tagline, “the edible live streaming community”, indicates that the the platform is more than just a service. It’s a community where consumers, chefs, and companies all can interact, share, and learn about food together. Google’s Material Design guidelines were used for the color, shadows, and icons.

My main aesthetic idea for the app was of a fine-dining ‘food cinema’. A cinema interior makes use of dark colors to focus attention on the media. This purple, being a darker color and more characteristic than black, was chosen as the primary color for this purpose. An analogous bright turquoise was chosen as a secondary color to match the primary purple while still standing out. Futura, a common web font legible at many weights and on many devices, was chosen for the header and body text. Additionally, Phosphate Solid was chosen for the logo text to give it a thick, almost ‘chewable’ quality. I chose to use the two-tone icon set to fit with the quirky aesthetic of the app’s branding. Lastly, the elevation system allowed me to create a sensible design hierarchy of manipulatable elements: e.g. cards, sliders, buttons. 

 
 
elevation-2.png
 
 
icons@4x.png
 
 
 

ITERATIVE DESIGN

My design exploration began by sketching wireframes with inspiration from Material Design guidelines, other food apps, and styles I had noticed from the web (Medium, Dribbble, etc). In Figma, I created low-fidelity designs without copy or assets and eventually 49 high-fidelity screens. Below are three examples of this design process from sketch, low-fidelity, to high-fidelity.

 

ONBOARDING

HOME

STREAM

 
 
 

USER TESTING

A round of user testing, consisting of two test types, was conducted on each successive prototype. For each round, I followed The Nielsen Norman group’s recommendation to test with no more than five users, as there are diminishing returns with larger numbers. The first two rounds focused on screen flow logic and features while the third round focused on aesthetic elements. After introducing the user to the app concept, I asked open-ended questions to ensure unbiased responses.

For the unstructured test, I asked the user to speak about their thoughts while exhibiting how they would use the app. For the task completion test, I created a list of 11 tasks based on my persona for users to complete. I then ranked how easily each task was completed (from one being worst to three being best), allowing me to judge the coherency of the interface. Such tasks included: watch a stream, make a restaurant reservation, send a message to a friend, change a setting, and view a restaurant’s profile.

User testing was critical to reassessing how my designed solution aligned with my persona’s goals. Additionally, the outside perspective allowed me to determine what actions or screens needed correction. When returning to design, I focused on difficult tasks (low scores) and issues that arose repeatedly. For example, many users scored poorly on the restaurant reservation task, leading me to rethink how the reservation screen connected to the rest of the app. I was surprised how quickly most users moved through even the poorly drawn wireframe prototype. They often began mindlessly exploring the screens before I had even asked a question. They naturally understood the navigational logic of a mobile interface. This key realization led me to follow tried-and-tested interface patterns over creative reinventions that muddled a user’s ease of experience.

 
 
 

RESPONSIVE DESIGN


While this was primarily a mobile project, I created tentative tablet and web mockups in preparation for a future port. I started with the smallest common Android viewport (360px x 640px), an 8px grid, a 4px baseline grid, and a 2 column layout with 16px margins and gutters. I ensured mobile best practices by including 48px x 48px tap targets, a maximum of 65 body text characters per line, and 8px intervals for sizing and spacing.

 
 
 

FEATURES

CHEW stands apart from other competitors in the food industry by allowing you to directly learn and interact with chefs and restaurants. The app focuses on emphasizing ratings, reservations, and reminders. I focused my design process around these core features.

 
 

RECIPES

The recipes on CHEW are meant to be followed in conjunction with a stream. Streamers can’t always go into detail about the measurements and steps in real time. Instead, a restaurant can upload a recipe for users to refer to while watching the dish being cooked.

 
 
question-3.png

QUESTION CREDITS

On other streaming platforms, the chat box is a wall of quickly moving text and memes. Not the best place to cut through the noise and ask specifics. The question credit system provides users with 1 credit per day, with a paid option to purchase more. A credit is used to pin a message to the top of the chat box for the streamer to answer.

 
 

CHEW STARS

Restaurant review websites typically have rating systems out of 5 stars. This platform uses a ‘raw rating’ in the form of CHEW stars (like the Michelin stars awarded to restaurants). The stars can be given to users that ask good questions or streamers that put on an impressive show. In the end, this focuses the community on contributions instead of ratings.


star-3.png
 
 

RESERVATIONS

If you watch a restaurant’s stream that particularly impresses you, you can always go to their profile and make a reservation—connecting you to their seat availability and calendar.




 
 

REMINDERS

For both upcoming streams and reservations you don’t want to miss, a reminder system within the app keeps you up to date on your latest food journey.

 
 
 

ANIMATION

I focused on my main features and call-to-actions when animating the CHEW app. The following microinteractions were involved: scroll, drag, button tap, loaders, and a logo animation. Adding working sliders to the video player and distance filter involved complex variables and formulas. A fake loader was added to both the reservation and verification processes to give the user a feeling that the app is working better. Below are a few examples.

 
 
loader.gif
splash-chewing.gif
slider.gif
 
 
 

Development

The final mobile screens were logically named and organized to make future development handoff in any software as easy as possible.

 
 
 

CONCLUSION

SUCCESS METRICS

The final deliverables included a style guide, 49 mobile screens ready for development, tentative tablet and web mockups, and an animated prototype. I succeeded in taking a concept through an entire product research and design process. Additionally, the task completion rating (from one to three) rose over the course of user testing, indicating the final design solution was the most user-friendly.

 

obstacles

By the end of the project, I concluded that a food streaming app wasn’t viable for the market. A similar platform called “Nom” was launched by YouTube co-founder Steve Chen in 2016 with $4.7 million in funding and backing from celebrities. Despite this support, the platform was taken down in 2018. Young people who are comfortable with live streaming as a technology aren’t that interested in cooking. Additionally, the realities of technology and food don’t fit well together. Cooking in a hot, hectic kitchen with dirty hands while trying to handle cameras and answer questions isn’t realistic. Users interested in food ultimately want quick entertainment and recipes, not a long cooking process on stream. Lastly, I didn’t feel there was a strong enough reason for people to switch to this platform from Twitch, Facebook, or YouTube.

I wanted to embed an animated prototype of my app with a device overlay. After considering InVision, InVision Studio, Adobe XD, Principle, and Figma, I settled on ProtoPie. A recent Figma integration allowed me to import my screens into ProtoPie. However, because it was still in beta I had to import one screen at time and adjust hundreds of minor compatibility bugs. Lastly, custom HTML and CSS were used to make the prototype presentable on this page.

 

Lessons

My user survey had too many questions and didn’t provide as valuable data as expected. Surveys aren’t always reliable as your respondents don’t represent average users. Respondents can be biased just by being motivated to fill out your survey. Next time, I will begin my research process with qualitative user interviews where I can obtain thorough responses and emotional insights.

I enjoyed the animation and user testing phases of this project, especially watching user’s initial responses to the app. However, I struggled knowing how to start the initial research. There were days when I really hit a mental block, where I’d lose sight of the big picture in the minutiae of daily problems. I would get frustrated trying to write about the product, business model, or user needs and think—I should just jump to the design stage. What am I doing wasting my time if the point of this entire exercise is to design an app?

This is where starting with a clear sense of overall direction really helped. I could glance back at my workflow outline and know that my current predicament had a purpose in the grand scheme. The design process is a marathon, not a sprint. A night of sleep or new user feedback would give me a fresh perspective that would allow me to find a solution to the problem and push forward to the next phase. Additionally, having one persona and use case while designing was key. There is a laundry list of potential features that could be added to the app. Framing these in the context of what would be best for my average user helped me focus on only the essential features.

 

Future Features

  • A complete tablet app

  • A complete website


Screens

  • error page

  • report button

  • social share icon dropdown

  • additional settings pages

  • profile edit page

  • additional user/restaurant profiles

  • additional stream pages

  • stream dashboard

  • reservation edit page

Animations

  • button ripple effect

  • active/error states

  • interactive keyboard

 

ACKNOWLEDGMENT


I have a number of individuals to thank for their testing, feedback, and consolation throughout this process. It was an international effort of family, friends, and strangers from America, Serbia, Thailand, Hungary, India, Britain, Nigeria, New Zealand, Israel, Sweden, Canada, Germany, Indonesia, Japan, Spain, South Africa, Taiwan, Ghana, and Vietnam. The project would’ve been far more one-sided without your diverse perspectives.

 

 
CASE STUDY: Starter Pack – Life Improvement (Web)

CASE STUDY: Starter Pack – Life Improvement (Web)

CASE STUDY: Move - Ride Share (Mobile)

CASE STUDY: Move - Ride Share (Mobile)