Savly

Next, I used my research findings to create personas to empathize with user’s needs, goals, and frustrations. As a reference throughout the project, they helped me to stay on track and make design decisions with end-users in mind.

To translate insights into requirements, I first brainstormed as many HMW statements as possible. Afterwards, I prioritized the most important ones in an impact-effort matrix to narrow down the scope for the MVP.

Mapping Out the Journey

After the prioritization of features, I created user journey maps to visualize the process Ben and Nina need to go through to accomplish their goals in Savly.

Nina's Journey: Nina found some grated cheese in the fridge that will expire soon. She wants to use it to cook a meal but has no idea what to make of it. She will use Savly to find a recipe for grated cheese to prepare a dinner for two.

Prioritized features based on journey maps

• Sign up & onboarding
• Search for recipe for available ingredient
• Adjust recipe servings and units
• Follow directions and save the recipe to favorites
• Add missing ingredient to the cart
• Buy missing ingredient through the app

User Flows

Using the journey maps and personas as a guide, I created user flows to understand the specific tasks Ben and Nina would need to do and the pages needed to complete them in the app.

User flow for cooking a recipe

Information Architecture

Using user flows and journey maps, I created an initial sitemap to structure web app pages hierarchically.

The challenge here was to determine which pages allowed for guest access and which required users to sign-up. My goal was to identify key pages that would create enough instant value for users to encourage them to explore the app further.

Next, I worked on several iterations to experiment with different layouts on the homepage, recipe page, and onboarding methods, as the first solution wasn't always the best.

Afterwards, I created mid-fidelity wireframes and a prototype in Figma to test my design with real users in the upcoming phase.

Mid-Fidelity Wireframes

To assess learnability and errors for first-time users, I conducted moderated remote usability tests with 5 participants via Google Meet.

I wanted to know whether users understand the app and its value and can complete basic tasks such as finding a recipe or buying ingredients through the app.

Metrics

• Success rate and time on task to assess learnability.
• Severity of errors is measured by Jakob Nielsen’s rating scale.
• Net promoter score to gauge satisfaction by asking users how likely it is that they would recommend the app to a friend or colleague on a scale from 0-10.

Recruitment

Recruitment was done by following up with persona users from interviews, asking friends who fit the recruitment criteria, and posting on Slack.

Test Results

Overall, the feedback was mostly positive, but the test results also brought some critical issues to light. The main sources of confusion were task 2 (searching for a recipe using available ingredients), the lengthy onboarding process and data entry during the checkout process.

Issue 1: Couldn’t find recipe for available ingredient (Severity: 4)

2/5 participants struggled to find recipes for grated cheese, assuming it had to be added to the fridge first. They browsed recipe categories instead of using the overlooked search bar.

To address this, I enabled adding items to the fridge with a plus button and included copy and a button for users to find recipes for their fridge ingredients more easily.

Issue 2: Onboarding is too long (Severity: 3)

2/5 users found the onboarding process too lengthy and were uncertain about adding ingredients to the fridge, feeling it was too early for them. The fridge concept was also not clear from the homepage.

To solve this, I removed the ingredient addition from onboarding and postponed it to a later stage. Users can now access the fridge page after onboarding to add ingredients for recipe suggestions. I also added images of recently added items to clarify the fridge concept on the homepage.

Solution for Issue 1 & 2

Issue 3: Entering personal data during checkout (Severity: 3)

2/5 users found the checkout process with PayPal confusing and frustrating due to the need to enter personal data. They expected their data to be saved and prefilled.

Users also wanted a PayPal checkout option on the cart page to shorten the process. In addition, users noted missing details like delivery costs, food item quantity selection, and price visibility at each step.

To improve this, I integrated the PayPal button and delivery time selection in the cart, reducing the checkout process from 5 to 2 steps and adding the necessary information for transparency.

Solution for Issue 3

After issues had been fixed, I moved on to bring Savly to life with visuals. As Savly is content-heavy, I aimed for a minimal and modern design to highlight images. I chose green as an accent color to emphasize the freshness of dishes.

As a number of people mentioned in the survey that they still use books and handwritten recipe cards, I chose Libre Baskerville to evoke the feel of vintage cookbooks, pairing it with Libre Franklin for a modern touch.

After having implemented user testing feedback and the visual design, I finalized the prototype using Figma. Feel free to interact with the prototype to see how it works.