Caloric Control

Caloric Control

Caloric Control

This is a project I completed as part of Designlab’s UX Academy. The prompt for this case study was to create a responsive design for a calorie-counting website with the goal of helping users eat healthier by eating less red meat. With that being said, this is not a real company but the research is real and the design is based on actual user input, along with mentor and student feedback.

Role

UX/UI Designer

UX Researcher

Tools

Figma

Whimisical

Optimal Workshop

Role

UX/UI Designer

UX Researcher

Tools

Figma

Whimisical

Optimal Workshop

Role

UX/UI Designer

UX Researcher

Tools

Figma

Whimisical

Optimal Workshop

Research

To start off, I conducted 6 user interviews with individuals who had experience with dieting and cooking. I wanted to really empathize with users and understand their motivations, pain points and frustrations with having to adjust their diets. I knew that discussing diets could be a sensitive topic, which is why I conducted these interviews in a gentle and respectful way. During these interviews, I carefully listened to each user's story and took detailed notes on their experiences. I asked open-ended questions to encourage them to share their personal experiences, challenges and successes. As a result of these interviews, I was able to identify some common themes that many individuals with dietary needs faced.

To start off, I conducted 6 user interviews with individuals who had experience with dieting and cooking. I wanted to really empathize with users and understand their motivations, pain points and frustrations with having to adjust their diets. I knew that discussing diets could be a sensitive topic, which is why I conducted these interviews in a gentle and respectful way. During these interviews, I carefully listened to each user's story and took detailed notes on their experiences. I asked open-ended questions to encourage them to share their personal experiences, challenges and successes. As a result of these interviews, I was able to identify some common themes that many individuals with dietary needs faced.

User Interview Themes

Users looking to replace proteins within recipes they already know.

Users find recipe breakdowns hard to follow due to the layouts used.

There was no agreed-upon way to save a new recipe or recall old recipes. Young participants didn’t think of the health benefits from cutting out proteins like red meat.

Best in Class Research

Before delving into the competitor analysis research, my primary goal was to identify a website with strong filtering of informationally dense items. I spent time researching various websites before identifying Airbnb as a strong reference for filtering.

During my research, I discovered that the design at Airbnb was very intuitive and did not feel like information overload. I appreciated the design choices they made and referenced them in my final design. I was particularly impressed with how the website presented the options to the users, making it easy for them to find exactly what they were looking for without feeling overwhelmed.

However, during my analysis, I identified an opportunity for improvement. I noticed that the Airbnb website lacked clear CTA buttons, which I believed would be essential for this project since we were introducing a new experience to the users. So, I took it upon myself to ensure that my final design had clear CTA buttons that would guide the users and make it easier for them to interact with the website.

Direct Competitor Research

The next step of the research process was to investigate similar websites that offered recipes and ways to save them to assist with meal prep and planning.

I was able to identify five competitor websites that possessed strong feature sets which were viable for the project. I took an inventory of these websites, analyzing the different features that they possessed and how they were arranged on the interface. My aim was to recognize the features that could work for our project and explore ways to incorporate them.

Through my research, I established that the two strongest competitors were Whisk and the Food Network’s website. They had intuitive designs, a unique way of presenting their content, and their features were well-arranged on the interface. These two websites stood out as they had a balance between aesthetics and functionality.

Overall, my research provided important insights that guided the design process. By understanding the strengths of our competitors, we were able to incorporate features and design elements that enhanced the user experience on our site. In the end, our website provided an intuitive and engaging solution for users looking to plan their meals and save their favorite recipes.

Defining

My first step was to empathize with the users and analyze their pain points to identify the key issues. Through extensive research and user interviews, I was able to isolate a critical problem that hindered their user experience.

To overcome this challenge, I delved deeper into the competitive market and studied various websites and mobile applications that dealt with diet and recipe-based solutions. This allowed me to generate ideas and develop an informed solution based on my research insights. The solution was designed with the objective of simplifying user experience by providing easy access to relevant information.

During the design process, I ensured that all design elements were incorporated carefully, keeping in mind the user's needs and preferences. I worked closely with the development team to ensure that the solution was technically feasible and scalable, ensuring a smooth implementation process.

Ultimately, I was able to create a solution that succeeded in enhancing the user experience for the platform's target audience. The project was a testament to my ability to empathize with users, analyze complex problems, and create effective solutions based on research insights.

My first step was to empathize with the users and analyze their pain points to identify the key issues. Through extensive research and user interviews, I was able to isolate a critical problem that hindered their user experience.

To overcome this challenge, I delved deeper into the competitive market and studied various websites and mobile applications that dealt with diet and recipe-based solutions. This allowed me to generate ideas and develop an informed solution based on my research insights. The solution was designed with the objective of simplifying user experience by providing easy access to relevant information.

During the design process, I ensured that all design elements were incorporated carefully, keeping in mind the user's needs and preferences. I worked closely with the development team to ensure that the solution was technically feasible and scalable, ensuring a smooth implementation process.

Ultimately, I was able to create a solution that succeeded in enhancing the user experience for the platform's target audience. The project was a testament to my ability to empathize with users, analyze complex problems, and create effective solutions based on research insights.

‍Card Sort

To gain a deep understanding of the user requirements related to diets and recipes, I decided to build a card sort. This was a challenging task for me as I had to determine the most effective way to group certain terms. However, I successfully organized the top features and built the card sort that gave me valuable insights about user behavior.

I am incredibly proud of the card sort that I created as it helped me identify more and more connection points that were actionable. With this new knowledge, I felt that I had a lot to learn, but I was on my way to creating more compelling user experiences. It was a great feeling to know that I am making a real difference and positively impacting the users' lives.

To gain a deep understanding of the user requirements related to diets and recipes, I decided to build a card sort. This was a challenging task for me as I had to determine the most effective way to group certain terms. However, I successfully organized the top features and built the card sort that gave me valuable insights about user behavior.

I am incredibly proud of the card sort that I created as it helped me identify more and more connection points that were actionable. With this new knowledge, I felt that I had a lot to learn, but I was on my way to creating more compelling user experiences. It was a great feeling to know that I am making a real difference and positively impacting the users' lives.

Dendrogram Key Takeaways

Recipe Page (Yellow) is the most informationally dense page

-The layout will be key on this page to avoid option paralysis and visual clutter

Filter Options (Light Blue) had the most agreement and had the least amount of entries

-Indicates users will not be utilizing

Explore Page (Blue) shows that users are open to seeing broad topics

Ex. Seasonal Recipes, Popular TikTok

Similarity Matrix Key Takeaways

A higher connection rate will inform the placement of elements in the design and informed my design layout to ensure related elements are placed together

Ex: Total Servings and Nutritional Facts will be placed together

MVP

In this case study, I was tasked with designing a new site within a short period of time. I decided to take inspiration from two sites, Figma and Gumroad, that had a unique, simple and quirky aesthetic. Drawing on elements of both, I created a design that was part low-fidelity and full of fun.

Creating a site that was both fun and accessible was important to me, so I focused on creating a colorful and engaging user interface. To achieve this, I used bold colors and playful typography throughout the design. I also added fun animations that helped to create a more dynamic and engaging user experience.

While some might argue that the design was just a colored wireframe, I believe that the low-fidelity aesthetic created an atmosphere that was both fun and accessible. The design allowed users to focus on the content and user experience, rather than getting lost in flashy design elements.

In the end, the site was a success, with users commenting on how fun and engaging the design was.

Full Case Study

Let's be honest, I'm not a developer so I just wanted to highlight some key points in my case study that I was proud of but I included the full case study in a PDF if you would like to take a look into my full work process!

© 2023 Eddie Farfan's UX Design Portfolio