cityryde logo

    Connecting People Through CookSpace

    I designed a mobile app that brings people separated by distance closer by helping them cook together virtually over video.

    My Key Contributions
    Information Architecture
    User Flows
    Mixed Fidelity Wireframes
    Prototyping
    Iteration
    Team
    UX Researcher
    Visual Designer
    Developer

    My Role: UX Designer
    Tools
    Figma
    Miro
    Timeline
    2021
    3 Months

    INTRO

    The Pandemic made it difficult for people to connect.
    During the pandemic people were unable to connect in-person in the most important ways due to social distancing policies. This had strong impacts on the mental health and well being of individuals. So our UX team and developer got together to create a way to reconnect people over food and cooking irrespective of the geographical distances that may be between them. 

    GOAL

    How might we provide amateur cooks and food-enthusiasts a way to share cooking experiences with others to build and maintain relationships virtually?

    With more and more people maintaining connections virtually, our team wanted to create a progressive web app for people to connect through cooking.

    We began by validating whether home cooks might be interested in doing this virtually via video and exchanging recipes online through a social platform and learned there was a market and interest for our idea.

    KEY RESEARCH INSIGHTS

    People have difficulty with online recipes and finding common times to meet.

    We began by conducting a survey with 43 respondents and 5 user interviews to understand the existing problems people have with cooking recipes and speaking with friends online. 

    People have difficulties with recipes online...
    Unclear content and lots of scrolling back and forth
    Hard to know which recipes are good
    Hard to save and organize recipes for later
    People are open to cooking virtually with family and friends, but...
    It's difficult to coordinate schedules and schedule virtual meetups. 
    During video calls it’s difficult to do anything else on your device, which slows down the process of cooking together. 
    Bad wifi connections and audio problems are an issue.

    Our Personas, AKA "Who's Cooking"?

    Ashley

    middle aged man's face

    San Francisco Project Manager

    Motivations

    • Gain more confidence in cooking
    • Extroverted at heart
    • Passionate about cooking

    Goals

    • Cook diverse and difficult recipes
    • Socialize with others virtually through cooking
    • Show off food she made and passion for cooking

    Frustrations

    • Bad wifi connections, long downloads, difficulty with sound
    • Unclear recipe instructions, disorganized information
    • Difficulty coordinating schedules

    Timothy

    Woman smiling

    University Student in Manhattan

    Motivations

    • Wants to save time and money
    • Feels disconnected from others due to being away at school
    • Wants to get better at cooking

    Goals

    • Cook easy and quick recipes at home
    • Connect with long distance friends/family virtually
    • Gain more confidence with cooking

    Frustrations

    • Unclear recipe instructions, not knowing if doing things correctly
    • Hard to save and organize recipes online
    • Hard to find ingredients at home, hassle to go to grocery store

    MVP

    What features should we build for our home cooks?

    Based on our research, users wanted to be able to connect with friends and family (social), in order to share recipes (cooking), and cook together over video conferencing. To ensure we create a great minimum viable product we decided on the following core features:

    LOW FIDELITY PROTOTYPING

    Collecting User Feedback

    I began by designing low fidelity prototypes for several features, which I’d then use to collect feedback. Below is a small preview of them:

    Scheduling a call using a Recipe:
    To ensure users found it easy to schedule events, we designed two different ways for them to schedule events:

    1. By first searching/selecting a recipe, and then scheduling a call from that recipe’s screen

    2. By first going to the events page and scheduling a call, selecting a recipe here

    Video Calling:
    I split the screen into two parts to ensure users found it easy to read a recipe’s instructions while talking to their friends. Furthermore I broke the recipe instructions into multiple steps so as to ensure users did not get lost or confused. 

    USABILITY TESTING

    Discovering a few critical areas for improvement

    We recruited 5 more home cooks to usability test our low fidelity clickable prototype made in Figma before moving further in the design process. There were a few adjustments needed.

    1. Making the search and upcoming events more visible as users had trouble find this information in our testing
    Before
    After
    2. Added Next and Back Buttons to make it easier to navigate recipe instructions
    Before
    After

    We reiterated and tested again

    We began to design our high fidelity prototypes which we also usability tested with users. Here were some key improvements we made:

    1. Onboarding Intro: Made it explicit that this is a video calling app to cook together
    Before
    After
    2. Added a label next to the hands free button to clarify what it does
    Before
    After
    3. Changed "Favorites" to "Bookmarked"

    This was because users were confused whether clicking the heart icon would add it to a saved recipes list or add to the recipe’s rating
    Before
    After

    READY FOR LAUNCH

    Letting users connect and find quality recipes to cook together over video calls during the pandemic

    Below is a look at the final build of our solution that help connect users online through cooking:

    Onboarding and Sign-In

    As a cooking-over-video platform may be new to users, an automatically scrolling carousel gives information about how it works to get them cooking and connecting. Users can access some basic features, like seeing recipes to create some trust and buy-in. Users can write a short bio and rate their cooking skill level.

    Add friends to cook meals with

    In order to facilitate the social connection, I designed a profile and friends section, where users can add people in order to easily invite them to cooking video events and see what recipes they like.

    Search quality recipes easily

    Users didn’t just want any recipes. They wanted good recipes tailored to their tastes and available ingredients. I addressed this by designing user-centric filters as well as reviews and ratings from other home cooks.

    Schedule calls with friends

    Users expressed frustration with applications like zoom, that are often challenging to schedule and organized. I designed an events page that keeps your events organized and easy to create and schedule.

    Video Calling

    Users expressed frustration with applications like zoom, that are often challenging to schedule and organized. I designed an events page that keeps your events organized and easy to create and schedule.

    • A video chat with a recipe on the same screen.
    • Instructions that can be stepped through one at a time, letting multiple users be on the same page.
    •  Hands free option to skip a step for when your hands are full.

    IMPACT

    Our solution was very well received

    Conclusion

    I learned a lot from this project, especially in regard to working on a team as well as in creating a design that would be developed. We really had to create a very thorough design, including detailed prompts, pop-ups, and some complicated flows and possible use cases.

    I believe we were successful in that our design was creative, fun, and human-centric. A rough version of our design was coded, which approximated the flows and features of our designs. Before disbanding, we began working on a desktop design, which would also be a future direction for the design.

    In the future, I would like to see this app developed more thoroughly to match the UI and usability of our prototype. Once developed, I would measure the following KPIs:
    Conversion Rate

    Do users sign up for the premium version of the app after seeing the recipes and what the app can do?

    Actions during Session

    Are people using core features (adding friends, participating in video calls, creating events based on recipes)? How many people in each cooking event?

    Task Success Rate

    To gage whether users can successfully create events from a recipe as well as from the events screen.

    Let's get in touch