UX Designer
Role
August - September 2024
Timeline
Interaction design
User research
Usability testing
Tasks
Figma
Google Forms
Canva
Tools
Recipe Refinery is a mobile-based platform designed to help users discover new recipes by entering the ingredients they already have on hand. The app provides tailored recipe recommendations, allowing users to reduce food waste and easily filter recipes based on dietary preferences or restrictions.
As the sole designer, I conducted user research, planned out the information architecture, drafted the user flow, created wireframes and mockups from scratch.
What is Recipe Refinery?
The story of Recipe Refinery began in 2023 when my team and I participated in the SlashKey 2.0 hackathon, a 32-hour event where we aimed to create a working solution within the tight time frame. We decided to build the project as a website since it was quicker and easier to develop than a mobile app given our constraints.
At that stage, our primary goal was functionality—just getting everything to work was the main priority. Usability and aesthetics took a backseat, as we didn’t have the luxury of time or manpower to focus on a polished design. I took on the role of the frontend developer, and even though I wanted to dive into proper design, the situation called for quick action. So, I sketched out a rough wireframe and got straight into coding.
While it wasn’t the ideal way to approach the design, we managed to complete the project in time. The hackathon version of Recipe Refinery functioned well, but it was clear that a more thoughtful design approach would make it a much better product. This realization motivated me to rework the user experience and design post-hackathon.
Context
Where it all began
Early design - Lacked visual consistency and cohesion
The motivation for this redesign came from a desire to enhance the usability and overall aesthetic appeal of the platform. Through user feedback and testing, I identified several areas where users struggled—primarily with navigation and filtering recipes based on available ingredients or dietary needs.
To address these issues, I incorporated key UX principles:
Aesthetic Usability
Goal-Gradient Effect
Law of Proximity
Motivation
Why Redesign?
Survey respondents, ranging from teenagers to individuals over 60, provided insights into recipe search habits, dietary needs, and challenges with online recipes.
Common challenges included:
difficulty finding recipes that fit dietary restrictions
limited recipe variety
navigating ad-heavy or complex interfaces
dealing with inconsistent measurement units
Research
Understanding User Needs Across Generations
Wireframe Screens
In this redesign of Recipe Refinery, I was able to place greater emphasis on design, enabling me to craft a more thoughtful and engaging user experience.
The feedback highlighted users’ desire for an intuitive interface that simplifies ingredient input and recipe discovery. By prioritizing these elements, I crafted a wireframe that emphasizes clarity and ease of use, ensuring that users can effortlessly navigate the platform and access the recipes they need.
Wireframing
Mapping the User Experience
I utilized Poppins and Roboto to create a clean and modern aesthetic. Poppins adds a touch of elegance with its rounded forms, making headings and important elements stand out, while Roboto offers excellent readability for body text. In the Profile page, I incorporated Nunito for a friendly and approachable feel.
I chose this color palette because it strikes a harmonious balance between warmth and freshness, which I believe is essential for a recipe app. These colors are intended to inspire cooking and promote healthy eating, creating an inviting atmosphere that encourages users to explore new recipes and ingredients.
Visual Identity
Brand Colors & Typography
Due to the large volume of recipes, it is pertinent that the user be able to bookmark the ones that they like.
Another feature that I've included is the measurement conversion, which was a very popular suggestion during the research phase.
And finally, meal planning.
A very tedious task when it comes to cooking is deciding what to cook. So to eliminate that issue, plan your meals ahead to save time in the future.
Organize, Convert, and Plan with Ease
It is safe to assume that the person using the app on their phone will have consistent dietary constraints.
So rather than having the user fill in their constraints every single time, the constraint bar can come pre-filled with the items they have added in their profile.
And if they don't need the constraint anymore, they can simply remove it.
Removing Repetition
To ensure that the interface is accessible, I kept the font size large and the action buttons bold. The user journey is simple.
And why icons?
Humans are visual creatures.
Iconography is an integral part of our design solution as it allows users to skim the interface and quickly find recipes.
Accessibility
Design Solutions
Bringing Wireframes to Life
User Flow
"Was navigating the app intuitive?"
"Is the text legible and easy to read?"
Typography
"Is there anything in the app you found confusing or unexpected?"
Clarity
I conducted usability testing with 13 users. Through this, I received information on what to iterate. Below are the questions I asked to gain those insights.
Usability Testing
Validating Design Choices through User Feedback
Final Design
From Concept to Completion