Cardamon

Create. Modify. Cook.

・Overview・

  • Role

    UX Designer
    UX Writer
    UX Researcher

  • Tools

    Pen & Paper
    Figma
    Adobe XD

  • Duration

    January – April 2022

Product

Cardamon is a recipe note-taking app and responsive website that provides the user with an enjoyable experience creating, writing, and modifying recipes.

Solution

Imagine jotting down your recipe ideas with ease; making quick changes, adding notes, or exploring flavor inspiration for your recipes.

Cardamon is the solution that allows cooks to add ingredients, directions, & notes easily while preparing food, utilizing fast text input & auto-saving changes.

01.

Saving your favorite recipes & re-visiting recents with one click.

02.

Writing a recipe becomes a quick, easy process.

03.

Inclusive & accessible features auto-save changes for you.

・Understanding the Challenge・

The Challenge

Users have difficulty taking notes and writing recipe ideas while preparing food; they need an easy, accessible way to create or modify a recipe.

The Goal

Design a scalable recipe note-taking site for chefs & culinary students with accessible features to allow users to record notes while cooking.

  • User Research

    Interview
    Create Personas
    User Journey Map
    Competitive Audit

  • Ideate | Design

    Brainstorming
    Paper Wireframes
    Information Architecture
    Lo-fi Digital Screens

  • Prototype

    User Interactions
    Visual Mockups
    Hi-fi prototyping

  • Test

    Usability Study
    Affinity Diagrams
    User Tests

  • Implement

    Refining Designs
    Next Steps
    Documentation

・User Research・

Understanding the User

Creating a recipe note-taking flow required understanding the cook. What features, interactions, or resources do chef’s need in a recipe writing app? How, why, or what do users look for in order to create a recipe?

Using primary research methods, I conducted interviews, surveys & usability studies of chef’s & food lovers. My predictions of what users want or need from a recipe writer include filtered search options, quick editing, & resources as a source of inspiration for cooking.

Other research methods used include a competitive audit of various recipe & note-taking websites, as well as measuring KPI’s such as navigation/search & user error rates through user testing prototypes. 

.

Interviews

Although Recipe apps are very common, few are catered towards the niche market of culinary students & serious cooks. To find the proper recruitment of people, I used my social network to identify people who enjoy cooking, have high levels of experience as a cook, diverse ages, and differing food interests.

When preparing the script, I kept the questions open for participants to expand on their cooking styles & needs. In this phase, it was important for me to be unbiased and listen carefully for any frustrations.

The interviews were conducted online, asking various questions and interacting using neutral terms to allow the participants to elaborate and express any needs or pain points.

Personas

After conducting interviews, I combined lifestyle similarities to generate personas and user stories. This step was key to the design process because it reflected real challenges that users may face and it allowed me to empathize with their needs in order to identify frustrations.

Pain Points

Based on the Interviews and user persona research, I assessed 3 user pain points to address with my designs.

  • Visual Design

    Note-taking & Recipe resource sites often have confusing designs, busy with trivial information.

    Users want clear design interaction

  • Accessibility

    Users have difficulty viewing & editing recipes using assistive technology such as speech to text.

    Users want recipe sites with accessibility options

  • Interaction

    Recipe sites are often filled with ads that distract & mislead users with unethical business practices such as use of ads & taking personal data.

    Users want to keep information private

User Journey Map

Arri’s user journey revealed which features users might need from a recipe note-taking app to spark engagement. These improvement opportunities include the ability to sort items, easily search by name or ingredient, autofill common words, and autosave changes for accessible use.

User Flow

The User Flow references the problem statement developed earlier in the process ensure that the designs truly address the users’ needs.

The outline demonstrates the path taken by a typical user on the app/website to complete a task from start to finish.

・Ideate・

How Might We

By exploring the “How Might We” process, I was able to generate a variety of ideas to assess the needs of potential users & address pain points.

  • “How might we design a recipe note-taking flow for cooks & culinary students to quickly and seamlessly write, add, share, or edit recipes?”

  • “How might we design a recipe note-taking flow for chefs to easily & accessibly write notes while preparing food?”

Crazy Eights

The Crazy Eights ideation exercise incorporates a visual, hands-on approach to ideation, which I used to solve the problem statement I wrote for the Recipe writing app.

I believe it to be a helpful & fun technique in a team brainstorming environment.

Problem Statement

Users have difficulty taking notes while cooking and preparing food and need a way to easily make changes to recipes in an accessible way.

・Design・

Wireframes

Sketching out design ideas on paper allowed me to visualize the layout of the recipe writing flow, and to plan the information architecture of the experience in the next part of my design process.

Paper wireframing also enabled me to problem solving & creatively design based on the users accessibility needs & priorities from the pain points. 

Low Fidelity Digital Screens

The flow, starting from the home screen, was designed to give users choices for navigation & clear search functionality to quickly create or find a recipe. 

Designing Screen Variations

Cooks are interested in using Cardamon across a variety of devices, which inspired my designs for the scalable desktop site alongside the app version. 

Although the website layout is slightly different than the app, the functionality is similar. Ingredients are listed on the right side & it includes more space for notes & directions.

・Prototype・

Low Fidelity Prototype

My lo-fi prototypes demonstrate the primary user flow from the home screen, to creating a recipe from scratch, to saving changes. 

The flow was represented in the unmoderated usability study to assess the time it took users to navigate the desktop site, as well as any accessibility issues (see Maze test). 

Mobile App Lo-fi Protoype

I mapped out animations & interactions with easy navigation to reflect a clear path for users to create, view, or edit recipes.

The key differences are how the recipe writing flow begins & ends: on the mobile app, the add icon in the footer begins the recipe writing flow & clicking the save icon at the end brings in a popup to confirm new changes saved. 

Adobe XD lofi desktop site flow

Desktop Site Lo-fi Prototype

The lo-fi website prototype made in Adobe XD follows the same flow as the app: creating a recipe from start to finish. 

・Mockups・

App Mockups

Based on my usability insights that users prioritize ease of adding ingredients & recipe instructions, I made changes to the Cardamon apps text-editing functionality that allows “tap to add/delete” on the same screen.

By adding images, assistive states such as active text fields & disabled text fields, & visual hierarchy to highlight important elements, the design can better guide chefs to create a recipe from scratch. 

To give users quick access to notes or ingredients, search & filter options were added. App users can filter by date, favorite recipes, or recently viewed. Search options by title, ingredient, or notes for easy navigation.

Responsive Site Mockups

The Cardamon desktop website includes featured articles & resources that link to the “Explore” page for chefs to find inspiration. The All Recipes section has room for horizontal layout within the Homepage; similarly, Recently Viewed section shows the full list of items, as opposed to the mobile app displaying a carousel to swipe between recent recipes.

Additions

I added tooltips to the scalable website in order to direct users attention toward a specific navigational flow & teach them how to use the larger scale site.

・Testing・

Usability Study: Parameters

I conducted a usability study of my lo-fi prototype to determine if users encountered difficulties creating or editing recipes in the note-taking flow. 

The unmoderated usability study I conducted was a remote, 10-15minute click-through of the lo-fi prototype observing 5 participants between 25 and 63 years of age.

Affinity Diagram

I gathered notes based on participants’ thoughts, feelings, challenges, & suggestions from the user study.

By categorizing the notes into an affinity diagram, I was able to identify patterns & themes around their experiences with testing my prototype.

Next, I formulated insights based on these patterns to innovate & improve my designs.

User Test: Findings

My findings & insights from the first study guided the designs from wireframes to mockups. The findings from the second study allowed me to hone in on important aspects of the product experience in the high fidelity designs.

Insights

  • Search

    Users were unable to filter by ingredient, date, or title & instead had to scroll through a list to select a recipe

  • Edit

    Users want quick editing capabilities; adding the ingredient amount with faster using recommendations

  • Save Recipe

    Most users want an auto-save functionality to reduce the risk of losing recipe edits

High Fidelity Prototype

My hi-fi prototypes include animations, clickable elements, & clear interactions for users to navigate through. Additional screen sizes for mobile app condensed the navigation menu & utilized more gestures for adding notes or searching. 

Recent recipes is displayed in a carousel that swipes horizontally, with an All recipe page overlay for minimalist navigation to view or edit recipes in the personalized list.

Mobile Hi-fi Prototype

The final prototype showcases visual hierarchy & responsive UI by highlighting elements such as text input fields, use of color contrast, icons, & imagery with fluid animation.

I applied elevation & contrast to buttons & images; I also changed the text fields to include add & delete icons in order to give users a visual editing guide.

Lastly, I added assistive tooltips to guide the user through the app in order to create a more dynamic interaction experience.

Desktop Site Hi-fi Prototype

The hi-fi prototype for the website has more space, but includes similar elements within the visual hierarchy to the recipe app. The navigational options are diverse, including more than one path for users to explore the site.

Live Mobile App: Working Prototype

・Implement・

What I Learned

  • Listening to the users needs & designing with intention is key to creating a great UX/UI experience

  • Design is fluid & ever-changing; new ideas build over time to add to the overall user experience

Impact

  • “Nice mockups! Simple and easy to understand, well done.” - Coursera peer review feedback

  • “Everything flows really well, I like that there's a note section … I would use that!” - User test participant

Accessibility Considerations

Providing a back button gives users a necessary exit route to control their interactions. The back button would give the option to open/close menus & screen overlays.

Another accessibility consideration is designing better text readability. Users need large enough text & legible fonts that allow them to easily read labels, form fields, & buttons.

Next Steps

  • Create a secondary flow for users to navigate the search engine, explore page, & site menu

  • Conduct a third round of user research to understand if the chef resources page meets user needs

  • Apply changes based on new research & insights to produce a well-rounded, personalized app adventure

Thank You!