Project Overview
More than 26 million Americans suffer from Celiac’s disease or gluten intolerance. That means if they have the slightest bit of flour, wheat, barley, or rye, they get violently sick for days or weeks.
Being gluten-free impacts many aspects of life, from the amount of money spent on gluten-free food alternatives to having to going through life with constant stomach aches, cramps, fatigue, and worse.
Many online resources such as Pinterest have gluten-free recipes. But a lot of gluten-free recipes add up quickly and/or are overly complex. On top of that, there’s no guarantee it’ll even taste good.
I designed GlutenFreed, an app to help people with Celiac’s disease or gluten intolerances to help with just that. The app features recipe ratings as well as cost and time measurements to help gluten-free home cooks pick the best recipe for their needs.
Tools
MY TEAM
TIME
Figma, Miro, Trello & Google Drive
Just Me!
5 Weeks
The Short Version:
Problem, Solution & Impact
THE PROBLEM
THE SOLUTION
There are many gluten-free recipes online, but there’s no dedicated resource for people with a gluten intolerance to find recipes that fits their taste, budget and schedule.
Create an app with gluten-free recipes that showcases average cost, rating, and time to make.
THE IMPACT
Users reported GlutenFreed alleviated their main concerns when cooking gluten-free: Finding good recipes, finding cost-effective recipes, and recipes that fit their schedule.
70%
85%
80%
of users said the info on the recipe thumbnails alleviated their cooking concerns
of users enjoyed browsing the home page for recipes
of users liked reading the reviews of the recipes
1. Research
UX Hypothesis: Gluten-Freed from Stress
Before diving into user tests and interviews, I needed to create a basis for our research to rest on. As my first project completed by myself, it took a little work. But after a few iterations, I landed on this:
Interview Data Synthesis
I interviewed 10 people and surveyed 26, all with a gluten intolerance or Celiac's disease. My study participants' ages ranged from 20-80. They were male and female and lived in different parts of the country, and had suffered from gluten intolerance or Celiac's from 6 months to 20 years.
The participants in rural areas found it difficult to find good gluten-free foods, and were mainly concerned with finding ingredients verses recipes. Most of the participants that had the disease 10+ years typically didn't have trouble finding recipes since they had plenty of experience cooking for themselves. I also found that:
50%
80%
66%
Said it's hard to trust recipes online
Said the cost of cooking increased by 100-300% when they went gluten-free
Said they spend more time cooking and grocery shopping than before
Mapping Out Empathy
With a better understanding of our users' needs and goals, I wanted to explore who their target users might be by creating an Empathy Map.
Incredible User Insights
The research phase led me to understand valuable user insights that were key to determining which features I would focus on for the design.
Let's Take a 4th Wall Break
If you've made it this far, thank you so much. Sorry for all the writing; it's the curse of the English major.
If you want to dig into Definition & Ideation then Prototyping, just keep scrolling! But if you're like "Jeeze, Carmen, you write too much," I get it.
Choose as you wish!
KEEP READING
SKIP TO PROTOTYPE
2. Definition & Ideation
SWOTting Away Competitors
I wanted to know what people were already using to cook gluten-free meals to understand how my product could fill the gap in the market. I conducted a SWOT analysis and discovered there was no app dedicated to gluten-free recipes. Here's what I found:
Defining Features First
Once I understood what users needed and how my product could fill a gap in the market, I moved on to defining the features. I ideated features with I Like, I Wish, What If, chose the best ones with dot voting, then chose which features to include in the app by placing them on a feature prioritization matrix.
Check out what feature I included below!
View the average cost of recipes at first glance
Feature reviews of recipes, also easily accessible
Just featuring ingredients and the recipes, no blogs
Feature videos with easy to view ingredients and instructions
Up for the Task Flow
When completing this project by myself, I knew I had to keep myself organized. That's why I created a task flow, ensuring I knew exactly how users would go through my pages before I designed them.
Let's Take a Breather
Thanks again for reading! You made it through Research and Definition & Ideation with only Prototyping left.
So if you're enthralled, read on or skip to my clickable prototype instead.
KEEP READING
SKIP TO PROTOTYPE
3. Prototyping
Low-Fidelity at Its Finest
When designing my low-fidelity frames, I focused on created an easy-to-browse home page with reviews, cost, and time easily visible. Check out my low-fidelidy prototype below:
Sticking to the Style Guide
I created a style guide to keep my design consistent as I continue to iterate and add to it. From color to typography, I focused on having a clean app that felt warm, caring, and food-y.
Case Study Highlight: Eye Tracking Tests Tell All
I then conducted eye tracker tests to gather data on how to improve my prototype. I showed 5 gluten-free users 5 photos for 7 seconds each, and used GazeRecorder to track what they looked at. This awesome tech told me what users looked at, how long they looked at it, and more. Check out this gif of 1 user and what she looked at:
Eye-Opening Insights
GazeRecorder can do some really cool things. Along with seeing the aggregate of all the users' eye movements, I can also see how many seconds into the test users viewed an aspect of a design and how many users did so.
5/5 users noticed and liked the recipe ratings on all pages.
Users viewed poor ratings less often than good ones on the home page
Users glanced at the cost rating the least
People surprisingly viewed how long the recipe would take to make
Users did not often directly look at how difficult the recipe was rated
Final High-Fidelity Prototype
With all the data in mind from the user tests, I iterated on my design. I used differences in typography and color to bring more attention to the difficulty and cost of the recipes on the home page.
And there you have it, my prototype for GlutenFreed, the app designed to help people with gluten intolerances find tasty recipes that fit their schedule and budget restrictions. I'm proud of how it turned out, and I plan on continuing to add to its features and iterate on its design.
At the moment, you can sign up, click on the first recipe, then click on make it. Check it out below!
Final Thoughts & Lessons Learned
This project was to help me review what I learned during bootcamp but testing myself to see if I could do it alone. I discovered that I like working alone as much as I like working with a group. I especially liked having experimenting over the interface.
WHAT I LEARNED
I can design by myself. While I like working with others, I discovered that I'm a self-starter, driven, and persistent even without others pushing me.
Pursue new technology. The eye tracking test was amazing. I discovered much more from that than from simply observing what users did.
New Figma skills. In continuing to grow my skill set, I'm challenging myself to work on micro interactions and prototyping skills.
I'm going to work un uploading videos to the app so people can view them and possibly cook alongside other gluten-free home cooks.
I'm going to expand on the app, designing out the save feature and review feature.
I'm going to continue to test and iterate on my design, especially on features such as including a grocery list and links to specific gluten-free products.
What Comes Next
Last Break, Best Break
Whether you stayed with me the whole time or just viewed my prototype, I'd like to thank you for taking the time to look at my portfolio.
Think I'd make a good fit for your team? Contact me!
CONTACT ME
VIEW NEXT PROJECT
