The Universal Palette Builder
Eyeshadow palette builders are tools that are fun for customers and drive sales for brands. But the cost of making one is out of most brands’ reach, leaving customers confused and overwhelmed in an expansive, scattered market. So I made a builder for everyone.
Who
Firedrake Beauty Labs
What
Shopping Application
Why
Increase conversions & revenue
Role
Product Lead
Key Takeaway
unified 7,000+ shadows into one architecture
Key Takeaway
designed palette builder interface & checkout process
Key Takeaway
Guided development team through Back-end architecture
Key Takeaway
Achieved full backing on Patreon, 300+ user accounts & Growing
Data and Research

When the Project's Biggest Challenge... is You

A UX designer who is too close to a project can be a death knell for users. Because single shadows are my main hobby, I knew I had to account for the “UX baggage” I was bringing ASAP.

I took extra care in the research phase to deeply understand my users’ perspectives and avoid making an app that I only I would like.

In this phase, I:

  • Completed market research on consumer segments in the beauty market and their primary concerns
  • Crafted detailed personas and user flows for each, showing their paths through the Builder’s unique purchase funnel
  • Audited existing palette builders to ensure I stayed aligned with user expectations for a BYOP interface

Detailing personas and user flows helped me "get in the head" of potential users, as I would (and do!) use the Builder very differently than most.

Information & Data Architecture

Helping Users Navigate Over 5,000 Products... Without Having To Think

How could I resolve information overload while also giving users more options than they were used to seeing at on time? I had to unify and simplify. To that end, I created an information architecture that, while complex enough to organize over 100 brands’ shadows, could be translated into simple, digestible filters for users.

While the Builder is made on WordPress, much of our data is managed in Airtable for expediency.

Sometimes, the best communication tool is the simplest one. I laid out the basic data architecture for my dev in a Google Doc so they could set up our back end.

Our data is complex, but it is greatly simplified on the front-end for users.

What I’m most proud of

Finding the perfect color with just 9 categories

Color was our users’ #1 criteria for selecting an eyeshadow. It’s also the criteria that often left them the most confused. And it’s no wonder, when color is one of the most subjective ideas humans attempt to communicate. 

Fortunately, in cases like this, I know it’s more important to be consistent than it is to be right, so I:

  • Categorized colors with a familiar ROYGBIV color system 
  • Created additional definitions for earth-toned shadows (“neutrals”),  and magenta to satisfy important user requirements
  • Added discoverable temperature, lightness, and vividness filters for advanced users
  • Designed the filter interface so the results stay in view to enable exploration
Interface Design

UX 101: If It's Not Broken, Don't Fix It​

The basic structure of palette makers had already been established: arrangement area on the left and shadow finding on the right. With that framework as a base, I could pay closer attention to the user flow elements that would be unique to the Univeral Palette Builder.

  • Designed a deliberately slower “checkout” process to ensure users were educated about their purchases.
  • Added new palette design elements like rotation, showing names, and “short-listing” shadows for later.
  • Developed enhanced accessibility features (static shadow controls) that did not exist in other palette builders.

Advanced controls give users more creative freedom, and make the Builder feel more like an "app" worth signing up for.

Many users need to keep track of shipping costs, so having an eye on those "stats" helps them stay within budget.

I took a typical 3-step checkout process and modified it for the Builder. The second step served as an important fund-raising funnel in the Builder's initial live stages.

Users can re-arrange shadows by drag and drop (something only one other builder had at the time), but I knew that static shadow controls were important as well for people with limited manual dexterity, especially on mobile.

Similarly, list view spells out the shadow details without relying on a hover state, which is good for those using screen readers.

Testing, Build, and Launch

User Testing helped Us Make Hard Choices

This project was in build for over a year and a half before we had a workable prototype. With our team limitations, it could have easily been another year before we launched with our full feature set.

It was time to take stock of our priorities and get something viable out the door, so I:

  • Conducted qualitative user testing over video conference to find pain points in user flows
  • Used insights from testing to prioritize which features to finalize for launch
  • Pulled incomplete features and re-focused business goals to align with the new product scope
Play Video

I conducted user testing with our prototype over Google Meet. Users were given a set of tasks to accomplish and asked to speak out loud through their process

An in-progress social share module that was cut for launched. To help raise funds, we launched a Patreon as well.

Results

A Single Shadow Revolution

The Universal Palette Builder launched in November 2022, in time for Black Friday shopping. We labeled the project as an “open alpha”, to let users know to expect an unfinished, unpolished product — but one they’d still love. Through the support of our generous patrons, we have since launched user accounts, saving shadows, and numerous enhancements, with more to come. 
Play Video
Results

A Single Shadow Revolution​

The Universal Palette Builder launched an open alpha in November 2022, in time for Black Friday shopping. Through the support of our generous patrons, we have since launched user accounts, saving shadows, and numerous enhancements, with more to come. 
Key Takeaway
10,000 unique users 
Key Takeaway
300+ User Accounts
Key Takeaway
50 Patrons
Play Video
Key Takeaway
10,000 unique users 
Key Takeaway
300+ User Accounts
Key Takeaway
50 Patrons
Like what you see?

Let's Make Something Great Together​

Sort

Menu

Contact Us

Get in Touch

Report Bugs

Get help

One moment while the form loads...

Sign Up for a Free Account

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

You Need To Log In For That!

Log in to an existing account or create one for free to save shadows and more.

Save Limit Reached: to save this shadow.

Not Enough Space: Remove shadows and try again.

Shadows Moved to Short List

You chose a palette size that couldn’t contain your story! Don’t worry, though. We moved the extras to your Short List.