CUELIN - APP Redesign
Cuelin is a guided cooking app that lets users cook simply by providing a photo of ingredients or a list of items available at home, then walks them through the process step by step until the dish is complete
01
Problem
No consistent design system in place, so the look and feel varied across screens (inconsistent colors, typography, and components)
The user experience felt uncomfortable to use, particularly in the flow from ingredient/menu input to the actual cooking guidance
An outdated visual impression that made the app less competitive compared to similar apps
02
Things to Do First
Before jumping into the design process, the initial steps were:
UI Audit — inventory all existing components (buttons, cards, inputs, iconography) to identify inconsistencies
Benchmarking — look at other cooking-guide apps as references for common interaction patterns
UX Review — review the existing user flow to find friction points
Every component in the app like buttons, cards, input fields, icons was catalogued and compared side by side.
This wasn’t about finding “beautiful vs ugly”. It was about finding inconsistency.
The audit turned an abstract things into a concrete list of specific problems that could actually be solved
[List Design System Component]
03
Benchmark
We also looked at how other cooking and step-by-step apps handled similar moments. The goal wasn’t to copy them, but to see what worked well and use those insights as a reference for our own design. So we marked red outline for the references
[Image of reference]
04
UX Review
Before jumping into the design, we started with a quick UX review to see if there were any areas that could be improved or anything that needed to be removed.
We then mapped out the flow and compared the new design with the existing one to see what changed and why. Since the app was under a tight development timeline, we kept the process lightweight and focused on making quick, practical design decisions without overcomplicating the process.
05
Design process
Instead of redesigning each screen one by one, we started with the foundation first: defining the color palette, typography, spacing, and reusable components for buttons, cards, and forms.
Then we are applied the new visual language across the app, replacing the inconsistent old styles with a more cohesive and consistent look and feel.
[List of Design System]
06
Result
[List Image Before and After]
07
Mockup
[List Mockup Visual]