Educate your palette with

eduplate

discover and learn from your favorite cooking tutorials!

in process…

MY ROLE: UX Research + Visual Design

eduplate is a responsive website for finding + viewing cooking tutorials will help busy professionals search, filter, save, schedule, and learn about recipes all over the world. By significantly cutting down research and planning time users can get back to their work and family priorities without the cooking process hindering them. We will measure effectiveness by analyzing the number recipes saved to user profiles and cooking tutorials viewed.

Project Goal

Design a usable and useful interface for the beginner and experienced cook
Provide clear search / filtering and recipe saving processes
Create a customizable interface that allows users to prioritize their cooking needs (ex: social media and blog integrations)
Design a responsive website to allows users to enjoy the cooking process rather than it being a burden / chore

Objectives

TARGET USERS

Persona 1 (experienced cook)

Persona 2 (cooking novice)

Problem Statements

Pain Points

Competitive Analysis

After comparing six companies representing both direct and indirect competition, eduplate has the opportunity to fill a couple of gaps in the market.

Only one of the sites focused on video (tasty). While it is common for users to save recipes from multiple sites (yummly / allrecipes), creating a way to bring that information in automatically from social media would build on a feature that so many users already enjoy. There is also little customization for users, so offering a personalized experience / interface based on needs would be unique. Each of the apps had little to offer regarding accessibility, specifically regarding to translation, which would be another opportunity for eduplate to stand out amongst the competition.

IDEATE

Lo-fi Prototype - Custom Profile

From Paper to Adobe XD

After sketching and ideating some potential solutions using Crazy 8s and “How Might We”, I created digital low-fidelity wireframes using Adobe XD for the first time. These wireframes were used to create the low-fidelity prototype that was sent to users for testing before moving on to a high-fidelity design.

After creating the lo-fi prototype in Adobe XD, I conducted an unmoderated usability study for participants to complete in their own homes. Five different participants were asked to complete core tasks within the lo-fi prototype in order to answer the research questions below.

Research Questions

How long does it take a user to find a recipe on the website and work through the steps?
What can we learn from the user flow, or the steps that users take to find, save, and learn from recipe tutorials?
Are there parts of the user flow where users get stuck?
Are there more features that users would like to see included?
Do users think the website is easy or difficult to use?

Research Analysis

Currently I am waiting on feedback from users in the study. As results come in, I am analyzing their reactions, feedback, and questions in an affinity diagram for the next iteration of the website.

What I’ve learned so far…

I still have quite a bit of work to do before this project is complete, but here are a few takeaways so far.

First, I was surprised by how easily I wanted to veer from the research with my own solutions at times. When I noticed I was forcing a design solution that wasn’t in line with the research, I really made an effort to go slower and return to the user’s needs / problem statement.

Technically, this was my first project in Adobe XD, and I really enjoyed working with features such as “repeat grid” and the built in column/gutter guides. These tools will make the “graceful degradation” of my responsive website much more consistent.

Finally, since I have gained a deeper understanding of component creation and design systems, I have been able to better organize my document assets in XD. I know this will really make the high-fidelity design process more efficient.