logo-big@4x.png

The edible live streaming community


DATE

March - April 2019 (2 months)

ROLE

Research, Branding, Design, Animation

DELIVERABLES

Persona, Journey Map, Sitemap, User Flow, Style Guide, Mobile Screens, Interactive Animated Prototype

contents

Introduction / Research / Design / Conclusion

 

INTRODUCTION

 

OVERVIEW

GOALS

My main goal was to take a product from conception to handoff while incorporating more UX research and testing into my design process. I also wanted to challenge myself by utilizing new tools to create my first Android project. I seized on an idea a friend had 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 tried to follow best practices to make future development easier. I started from the smallest android viewport, following a logical layer structure and style guide.

 
 
 

PROBLEM

Niche consumers and food choice, from vegans and foodies to organic and gluten-free food, are growing. Users, restaurants, and companies all want a space to interact. Users 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 overall quality of content on the platform 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 question credit purchase and advertising revenue.

SUCCESS METRICS

Success for this personal project was defined in terms of user success in accomplishing our 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 interface. By comparing these ratings across different prototype stages, I could assess how well the app could help Tia and hypothetical users accomplish their goals.

 
 
 

TOOLS

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 a pattern of health-conscious, tech-savvy people expressing interested in a food streaming platform. Based on these responses, I defined a persona and main use case.

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. Ultimately, they stressed that a difficult recipe or streaming experience would deter them. 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 Live, YouTube Cooking, Twitch Food, Periscope, and Livestream. The most prominent live streaming platform, Twitch, has a Food & Drink section. However, there are few active streams here as the platform’s typical user is a young male gamer; not exactly the type to watch cooking. Facebook & YouTube’s live sections are very popular, but not specifically focused on food. I found that these generic live streaming platforms contained mostly companion material to cable shows, without much original food content. The Twitch, Periscope, and Livestream mobile apps were useful for inspiration during the initial design process.

 
 
 
 
 

PERSONA

CHEW users could be anyone who enjoys watching cooking. More specifically, our survey responses suggested that our 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 our persona for this project, who I named Tia.

 
 
 

JOURNEY MAP

To better understand what an average experience with our platform might be, we mapped the main use case flow for Tia, noting obstacles, her actions, and solution opportunities. She tries CHEW for the first time, sets a stream reminder, asks a question, and finally makes 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 food content viewed in the app. 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 central aesthetic idea for the app was of a fine-dining ‘food cinema’. A cinema interior uses 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 was chosen for the header and body font as it’s a common web font that is readable at many weights and on many devices. Additionally, Phosphate Solid was chosen for the CHEW logo text to give it a thick, almost ‘chewable’ quality akin to a large steak. I chose to use the two-tone icon set to fit with the quirky aesthetic of the branding. The elevation system created a design hierarchy of manipulatable elements: e.g. cards, sliders, buttons. 

 
 
elevation-2.png
 
 
icons@4x.png
 
 

ITERATIVE DESIGNs

My design exploration began with sketching wireframes with inspiration from material design guidelines, food apps, and styles I had noticed from the web (Medium, Dribbble, etc). The branding had largely been decided on for a previous web landing page for CHEW. 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 to accomplish. I then ranked how easily the user completed each task (from one being worst to three being best), allowing me to judge the success 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 was aligning 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 issues that arose repeatedly and on difficult tasks (low score). 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

This was primarily a mobile project, but I created tentative tablet and web mockups if a port was later decided on. I started with the smallest Android viewport (360px x 640px), 8px grid, 4px baseline grid, and 2 column layout with 16px margins and gutters. I ensured mobile best practices by including 48dp x 48dp tap targets, 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 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 utilized in conjunction with a live or past stream. Streamers can’t always go into detail about the measurements and steps in real time. Instead, a restaurant can upload the 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 for 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 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 of any sort over high 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 (CTAs) when animating the CHEW app. The following microinteractions were involved: scroll, drag, button tap, loaders, and a logo animation. Adding working scrolling bars 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 Handoff

The final mobile screens were logically organized and named to make future development handoff as simple 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 interactive prototype. I was successful 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 effective.

obstacles

By the end of the project, I concluded that a food streaming app wasn’t viable on the market. A nearly similar platform called ‘Nom’ was launched by YouTube co-founder Steve Chen in 2016 with $4.7 million in funding and backing from major 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 interactive 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/CSS had to be used to make the prototype presentable on this page.

I enjoyed the animation and user testing phases on 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 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?

Lessons

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. That the process was ultimately a marathon, not a sprint. A night of sleep or a new user 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 (an average user) and one use case while designing was key. There is a laundry list of potential features that could be added to the app, but framing these in the context of what would be best for my persona helped me strip away the chaff from the essentials.

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. They 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.

 

Future Features

An entire tablet and/or web product.


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)