Designing a Bacon-o-Meter (UI/UX Case Study)
Background
Bacon is a popular food loved by many for its amazing taste. For context, it is a cured pork product that is most commonly fried, grilled, smoked, baked, or boiled before consumption. It is most commonly associated with being a breakfast side-dish, but can also serve for other culinary uses.
Although bacon offers awesome deliciousness and crunchiness, with certain health benefits (reduce your risk of cancer and heart disease, good for the brain, etc.), there’s also the concern that an unhealthy level of consumption of bacon that can lead to certain health risks (raise your cholesterol levels, high blood pressure, stroke, etc.)
Challenge
Design an app that allows users to see how much bacon they have consumed
and how much more they can eat to enjoy bacon but still stay healthy.
Feature specifications:
- Users can track how much Bacon they’ve consumed, including the calories
- Users can see how much Bacon they can still consume this week
Phase 1: Learn
Research Method
To keep my research time as short as possible due to the short timeline I had for the project, I needed to leverage resources around me, such as user surveys, competitor apps, online articles, and market research.
User surveys
I quickly reached out to my friends and asked how they would like to track their favorite meal (I used meal instead of bacon because not all of them eat bacon) and how an ideal tracking app for them would work. Some of the interesting feedbacks I got are:
I don’t mind tracking my food consumption but I can’t type my meal every time
Can I scan my food to see the calories?
I would really love to recipes on how to make healthy meals
User persona
From the results of the survey, I was able to come up with a short user persona that captured the motivation and attitude I saw in the interviews.
Market Research and Online Articles
Next, I leveraged on Google search to find out more about bacon, its level of consumption, health benefits, fun facts, and health risks. I found out that about 268.04 million Americans consumed bacon in 2020, according to this report. Meaning there’s a large number of users who might potentially want to eat bacon healthily.
Competitor apps
Next was to look up existing applications doing something similar. I couldn’t find any special tracker app dedicated to bacon, but I found a lot of food/calorie tracker app. I decided to download a few, to examine the solutions they were providing and their experience.
My takeaway was that most of their apps offered too many features that were not very relevant to my target audience. My approach is to design an app focused solely on bacon and allows users to log their consumption quickly and easily, with little tips on healthy consumption.
Brainstorming
Before proceeding to sketch down a few of my ideas, I needed to ask a few questions that were pivotal to how I would approach the design.
How do I educate users on number of bacon calories that is heathy?
How do I make onboarding fun?
What incentive can I provide to motivate users to log their food on the app?
How do I make logging bacon consumption as easy as possible?
Assumptions
A few assumptions I made while attempting this design, were:
That the weekly recommended bacon calorie intake is 1200 Cal
That 1 slice of bacon contains 40 cal, regardless of how it was cooked.
That there were no limitation in technical know-how
Phase 2: Sketch and Design
Next was to put pen to paper. This is how I filter out the bad or “not-so-good” ideas and explore the good options. I try to capture as many aspects of the user journey as I can during this phase.
User flow
Wireframes
From my sketches, I designed high-fidelity wireframes to help better visualize the app screens and the interactions between them
Style Guide
To kick off the design of mockups, I needed to create a simple style guide to help me maintain consistency across the design.
Phase 3: Prototype
Once I finished up the final designs and I started to prototype. I created different flows for users who wanted an onboarding tutorial and those who didn’t. For this project, I added interaction screens, screen overlays, and pressed buttons.
Click here to view the clickable prototype
Next Steps
- Usability testing: Typically I would start by sharing the link to some of my friends, before attempting to do a more robust test using an online tool.
- Iterate: Take the findings from the usability test and iterate upon the design to see where needs improvement.
- Explore more features: For the sake of time, I limited the number of features I explored in the prototype. With more time, I would elaborate more on other features of the app.
Conclusion
I tried to keep the app as simple as possible to make it easy for users to understand and use the app. I couldn’t do as much research as I would have wanted but I believe the little I did prove to be quite useful. There’s still a lot to be done before the app is ready to be shown to the public, but I think this is a great start. I’m really excited to have taken on this challenge and I want to say a big thank you to the team at Combyne.