Map
Revisit flows and inventory interface inconsistencies.
← Back to workDesrotulando
DESROTULANDO / MOBILE APP / UI & COMPONENTS
Desrotulando
Clearer information.
A consistent experience.
A new visual proposal for Desrotulando, connecting interface inventory, reusable components and the evolution of product lookup and comparison screens.
Contribution
Product Design · app UI and facelift
Scope
UI inventory, journeys, wireframes, components and interfaces
Product
Desrotulando · food product lookup app
01 / Challenge
Evolve the interface.
Create a shared language.
Desrotulando aims to support users looking up products at the supermarket. This project’s challenge was to standardize components and create an app facelift, revisiting flows and UI inconsistencies before proposing a new visual direction.
How can screens with different patterns become a visually coherent experience that can evolve?
Standardize
Create reusable components for future screens.
Evolve
Connect inventory and conversations with users and stakeholders to the visual proposal.
02 / Inventory
Before redesigning,
understand what already exists.
The inventory brought previous app screens together to map presentation differences across journeys. Seeing the whole helped approach the facelift as a system rather than a sequence of isolated screens.
03 / Structure
Structure before
visual refinement.
After inventory and alignment with stakeholders and users, the work progressed to low-fidelity wireframes. The flow organized entry, access and the main experience; visual detailing followed approval of this structure.
04 / Interface
From approved wireframes
to interaction detail.
The high-fidelity proposal connects Home, search, product details and scan comparison. Navigation patterns and product presentation repeat across contexts, preserving recognition of actions and information.
01 / Home
An organized entry point for discovery.
Suggestions, recommendations and popular products share a card language. The active profile remains visible and scanning occupies a central navigation position.
02 / Product
From overview to detail.
Image, score, tags and information form different reading levels. Tabs distinguish evaluation, alternatives and comments, while detail organizes information items.
03 / Search
Find without starting over each time.
Search input, categories, recent searches and recommendations meet in the same experience. Product presentation follows the other touchpoints.
04 / Scan comparison
Compare within the same context.
Scanned items appear in a list with images, identification and access to details. Continuing to scan maintains task continuity.
05 / DESIGN SYSTEM
A system that brings
consistency to choices.
A synthesis of the interface system: clear foundations, organized information and components that adapt across the app.
A visual synthesis redesigned for this case from the original guide. Illustrative interface examples and data.
Desrotulando UI SYSTEMFOUNDATIONS → COMPONENTS → EXPERIENCE
DESIGN LANGUAGE / 01
Clarity in every detail.
One shared language, from discovery to product.
Aa↗
Choices with context.
Titles guide. Text explains. Actions show the next step.
Display / 40Body / 16Label / 12
Action#1A75C8
Positive#60B106
Attention#F5A623
Alert#E12340
Text#222B45
Surface#F5F7F9
03 / Rhythm & spacing
An eight-point foundation connects composition, breathing room and alignment.
8
16
24
32
48
64
04 / ComponentsOne product.
One product.
Different contexts.
Image, identification and indicators keep the same reading order in discovery cards and comparison lists.
Suggested for youCard / Vertical
Cereals & grains
Wholegrain granola
84/100Example
Beverages
Plant-based drink
72/100Example
Card / Horizontal
Cereals & grains
Wholegrain granola
84/100Example
Beverages
Plant-based drink
72/100Example
✓ SelectedCategoryInformation
✓
Action completed
Product added to your selection.
Recognizable information.
Color and labels work together to organize states and indicators. Hierarchy stays recognizable in each component.
An example of app indicator presentation. Demonstration values.07 / The system in useFrom rule to component.
From rule to component.
From component to experience.
The same tokens appear in typography, spacing, controls and card structure. Consistency becomes visible across the whole screen.
- 01Product image
- 02Identification and context
- 03Labeled indicator
- 04Consistent action
9:41▰ ▮
D.Desrotulando2 example itemsED
Your selection
Cereals & grains
Wholegrain granola
84/100Example
Beverages
Plant-based drink
72/100Example
⌂Home⌕Search⊞Scan♡Saved○Account
06 / Synthesis
Evolving the whole.
Beyond its appearance.
The presented outcome is a facelift proposal with documented components and patterns. The project narrative moves from inventory to high fidelity, showing how a shared foundation can guide different app journeys.
Explore the Scoobi case ↗Consistency is a product decision, too.
Repeating patterns intentionally connects discovery, lookup and comparison. UI work gains continuity when each screen comes from a shared language.
VAMOS CONVERSAR
Let’s bring clarity
to your next product.
Me conte um pouco sobre o seu projeto. Vou receber sua mensagem por e-mail para continuarmos a conversa.
Prefere outro caminho?LinkedIn ↗