Rebrew — Redesigning Sustainable Rewards Management
Simplify Setup. Strengthen Sustainable Impact.
About Rebrew
Rebrew is a sustainability rewards platform that partners with cafés and local beverage shops to promote Bring-Your-Own-Cup (BYOC) habits. Businesses can offer discounts to customers who bring reusable cups, while Rebrew provides a simple dashboard for managing their participation and tracking rewards programs.
*All visuals and text in this case study have been anonymized to respect confidentiality under NDA.
Timeline
Dec 2023 - Jan 2024
(~4 weeks)
Role
UX/UI Designer (Me)
UX/UI Designer
Front-end Engineer
Product Owner
Task
UX audit & flow analysis
Information hierarchy
restructuring
Responsive design
Visual design
Prototyping
Design System
Tool
Figma
Token Studio for Figma
What's the problem?
The design drifted.
Following the company’s rebrand, Rebrew’s web experience began to suffer from visual and structural fragmentation.
Legacy layouts and inconsistent UI decisions made the interface feel unreliable and incohesive, eroding both user trust and internal design alignment.
01 Lack of Visual Structure and Rhythm
Misaligned elements, inconsistent spacing, and dense layouts created visual noise, making it difficult for users to scan and process information efficiently.
02 Inconsistent branding and component styling
Lack of brand consistency across the platform resulted in a fragmented look and feel, reducing overall product credibility and visual unity.
Why does this matter to the business?
Consistent Design, Stronger Trust, Better Efficiency.
As Rebrew expands to partner with hundreds of cafés and beverage brands, a fragmented interface risks confusing partners, increasing setup time, and weakening brand credibility.
By improving structure and unifying its visual language, Rebrew can:
Enable faster internal updates through a scalable design system
Reduce time for partners to onboard and manage rewards
Strengthen brand perception and trust
Design
Consistency
Brand
Credibility
Partner
Trust
Builds
professional
perception
Drives
partner
confidence
Encourages cohesive design
Design Objectives
Rebuild Rebrew’s settings and onboarding experience into a cohesive and trustworthy design system that strengthens brand credibility, simplifies user interaction, and supports long-term scalability.
Clarify hierarchy to improve readability and flow
Establish visual and structural consistency across pages
Build scalable patterns for future growth
Design Process
From Structural Logic to Visual Harmony
Iteration
Structuring for Clarity
I restructured the layout hierarchy to enhance readability and reduce visual clutter.
Through several iterations, I:
Consolidated multiple sidebars into a unified navigation
Grouped related settings to clarify information flow
Introduced modular form sections for scalability
Before
Nav Bar
Primary
Sidebar
Secondary
Sidebar
Main Content Area
(Form section)
After: Iterative layout
Nav Bar
V 1
Primary
Sidebar
Secondary
Sidebar
Main Content Area
(Form section)
Version 1
Refining Visual Balance
Since the settings page contains dense information, I aimed to reduce users’ cognitive and visual load while maintaining a strong brand presence.
I minimized the use of the dark green brand color—restricting it mainly to the top navigation bar—to create more breathing room and a lighter visual experience.
Extending the System
Building a Scalable Design Foundation
Once the layout achieved a clear hierarchy and balanced visual rhythm, I focused on scalability. To ensure the design system could grow with future product needs, I established a scalable visual foundation inspired by Atlassian’s token-based design system.
Instead of applying colors directly, I built a layered token structure by starting from a minimal base palette and mapping it into semantic tokens for brand, surface, and component use cases.
*While the full token system covers color, spacing, radius, and elevation, this section focuses on the color tokens that form the visual and functional backbone of the interface.
Sample color palette for Rebrew
Base
Primary
200
400
600
700
Neutral
000
100
300
600
800
900
Surface
100
Feedback
error.600
success.600
The base palette serves as the visual foundation, defining consistent tones for brand identity, neutral surfaces, and feedback states.
Translating colors into functional tokens
Color HEX
Base Token
Semantic Token
Explanation
#506C59
base.primary.600
color.bg.brand.bold
Used for brand-driven components such as primary buttons and navigation backgrounds.
#FBFAF9
base.surface.100
color.bg.surface
Used as the app’s overall background color, providing a soft neutral tone.
#FFFFFF
base.neutral.000
color.bg.default
Used for containers and cards layered above the surface.
#333333
base.neutral.900
color.text.default
Used for primary text across light backgrounds.
Each base color is mapped to semantic tokens that describe its functional role in the interface — improving clarity, maintainability, and cross-theme scalability.
Designing for Responsiveness
I also refined the grid and component behaviors to ensure the interface adjusts fluidly across screen sizes, providing a consistent and effortless experience on every device.
Final designs
Before & After
The old form layout lacked hierarchy and visual balance, causing information overload. The redesigned interface introduces structured grouping, consistent spacing, and clearer visual rhythm. It improves readability, reduces cognitive load, and creates a scalable foundation for future settings pages.
Building a feedback-driven experience
Interactions across Rebrew’s dashboard were refined to make the system feel responsive, predictable, and trustworthy. Whether users are editing form details or uploading a business logo, every action now receives clear, timely visual feedback.
The new design introduces consistent motion and state transitions — from hover and pressing effects that guide attention,
to live previews that show exactly how an uploaded logo will appear across mobile and dashboard views.
Visual clarity through state feedback
Users receive clear feedback at every step, whether something goes wrong or completes successfully. Error and success states provide instant reassurance, showing what needs fixing or confirming when changes are saved. These subtle visual cues shorten the feedback loop and make the experience feel smooth and reliable.
Error state
Success state
Tooltip
Consistent across devices
The layout and interaction patterns were designed to stay consistent across desktop and mobile, ensuring users receive the same clear feedback experience no matter where they manage their business.
Reflection
Laying the foundation for scalable web design systems
🤿 Deep dive into design systems
This project was my first hands-on web design experience, where I built a deeper understanding of how a design system supports long-term scalability. Since Rebrew’s website was still in an early stage, I initiated the setup of a design system and design tokens, ensuring that future pages could be developed and maintained with consistency and speed.
💭 Challenge in balancing design and implementation
Working closely with the front-end engineer helped me connect visual design decisions with their technical impact. I learned how responsiveness, grid systems, and component behaviors interact in real development environments, and how even small design inconsistencies can affect usability and maintainability.
🧩 Alignment across design and engineering
Collaborating closely with engineering taught me how scalable thinking can bring visual and technical consistency together. It strengthened my ability to design frameworks that grow with the product.
Future steps
Validate the design through user testing
Once the web implementation is complete, I plan to conduct usability testing to observe how business owners interact with the settings flow. While the current focus is on the mobile app, I’m exploring internal reviews and heuristic checks to refine the design early.
2. Refine and document the system
Next, I’ll continue improving design tokens and usage guidelines so future designers can expand the system with clarity and consistency.