← Back to work

The most brutalist and efficient library by Sidebay Studio

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

A Webflow library infused with the brutalist way.

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Launch your portfolio, agency, startup faster than ever

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Just drag, drop and make your first MRR faster

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Making the lowest tier feel like it belongs.

I was brought onto Agoda’s growth design team. My job was to build a brand for the entry tier from scratch, without disrupting the existing tiers already in place. I led the project end-to-end. From competitive research and color psychology surveys with internal users, through accessibility testing across shade options, to full handoff documentation.

Loyalty & Retention
Tier Design
Behavioral Design
Product Rebrand
A/B Testing
TIMELINE

Dec 2021 - March 2022

TEAM

PM, Engineers
Marketing
Me as designer

TOOLS

Figma
Claude

the brief

A tier rebrand that touched every team, every page, and every surface on the platform.

The existing loyalty structure had Silver, Gold, and Platinum. Before Bronze existed, Agoda's lowest-tier users had no identity in the product. If you had fewer than two bookings, you were just “Agoda Member.” No badge, colors, or sense of belonging to anything.

I was brought in to rerand that entry tier (without disrupting what was already working).

The goal was to enhance awareness and engagement among newer users while making the entry tier feel like it actually belonged in the VIP program.

Before the rebrand

the challenge

What do we even call it? VIP Member, VIP Bronze, or something else?

Before designing anything, I had to answer three questions:
What do we even call it? What color feels premium without competing with higher tiers?How do you make the lowest tier still feel worth earning?

These sound simple, but they weren't. Every decision had downstream consequences across the entire platform.

01 competitive RESEARCH

Which colors feel premium without overshadowing Silver, Gold, and Platinum?

I started by auditing how successful loyalty programs use color and naming to signal tier hierarchy. What reads as premium versus cheap. What sits naturally below silver. The research surfaced common patterns; most programs use metals or materials, warm tones for entry tiers, cooler tones as tiers increase in prestige.

Competitor loyalty programs: color conventions & tier naming

02 color psychology & internal survey

I mocked up five badge options and asked the whole design team to vote.

I explored multiple badge directions and shared five options with the design team. Not to outsource the decision, but to pressure-test it early on. The feedback surfaced real tension. Some felt too warm and cheap. Some were too close to Gold. Some looked good in isolation but failed accessibility.

Survey responses/color preference results/feedback

03 finding the right shade

After rounds of testing, we landed on a bronze palette.

After multiple rounds of testing across real product surfaces, I landed on a bronze palette that felt earned. Warm enough to feel distinct but muted enough not to compete. I then ran contrast checks on every shade using WebAIM's contrast checker to find the color that would work across every surface in the product.

04 alignment

I mocked up badges, labels, banners across the entire platform, every context a user might see it. Then presented to the product marketing team and other design teams for approval. Getting buy-in meant proving: it worked across contexts, it was accessible, and it wouldn’t break existing flows.

Bronze shade explorations with accessibility checks. Desktop & app mockups showing new branding in context.

05 HAND-OFF

Worked with design systems designer to finalize the exact shades & created color tokens for engineering handoff.

Once approved, I worked with design systems to define tokens for consistent implementation. Documented token names, usage rules, component states, and platform-specific guidance.

After: Final implementation across web and app.

bonus part

Along the way, I noticed inconsistencies in how VIP components were being built across teams.

While working on the Bronze rebrand, I kept noticing the same problem: designers across different teams were building VIP components differently. Different badge styles, conflicting states, outdated versions being used in production.
So I created a master component library; every state, variations, usage guidelines for all VIP components.

The component library included VIP badges, product card labels, banners for all tiers. It was adopted by three cross-functional teams. Ended up reducing cross-team friction and became the reference doc for VIP design standards across the platform.

New Master Component Library for Loyalty Team

results

The rebrand went to A/B testing and passed. 19% increase in VIP bookings from entry-tier users. Shipped to millions of Agoda users globally. Turns out that giving new members something to belong to matters.

This project taught me valuable lessons in strategic branding, cross-team collaboration, and developing design system documentation.

Next Project→