Universal Yums — UX Overhaul

My Process

Step 1: Building the Design System from Zero

Before any page redesign or flow work could begin, the team needed a shared foundation. The design system was the highest-leverage intervention available — without it, everything downstream would continue to diverge.

The design system did not exist in any form before this engagement. No style guide. No shared components. No naming conventions. I introduced the concept, made the case for it to stakeholders, and built the entire system from scratch in Figma.

When I shared the initial system with the team — which included tokens, semantic color naming, and a full component architecture — the reaction was telling: it was their first encounter with a design system of any kind, and the complexity was overwhelming rather than empowering. I recognized the problem immediately. A system that a team can’t confidently use or build on isn’t a foundation — it’s just documentation no one reads.

I restructured delivery into two phases. Phase 1, delivered during this engagement, is deliberately approachable: a practical set of building blocks the team could understand, adopt, and contribute to without prior design system experience. I paired the handoff with direct training — walking the team through how to edit colors, apply text styles, and use and create components — so they could work independently and with confidence.

Holiday Landing Pages (×3)

Three simultaneous Christmas campaign pages were designed, each mapped to a specific paid ad creative. Each page reflected the ad a customer arrived from, maintaining message match and reducing drop-off between click and conversion.

A critical insight came from Hotjar session recordings and email click-through data: the majority of Universal Yums customers were opening emails and navigating to the site from their phones. Yet none of the existing pages were designed with mobile in mind. I made mobile-first layout the primary constraint for all three pages — restructuring content hierarchy, touch targets, button sizing, and CTA placement for small screens first, then scaling up.

All three pages were built using the new design system, establishing a reusable campaign template pattern the team can use for future seasonal promotions without starting from scratch.

Evergreen Homepage Redesign

The existing homepage accumulated sections over time without a governing content strategy. The result was visual noise, competing calls-to-action, and cognitive overload — a page that worked against conversion rather than for it.

I audited each section against user goals and business objectives, removing content that increased friction without supporting the primary action: choosing a box and starting a subscription. The redesigned homepage applies the design system throughout and establishes a clear content hierarchy. It is more succinct, less overwhelming, and more effective at directing attention.

Email Template System

Universal Yums’ email campaigns were built as sliced images — meaning each email was a single exported graphic file. This approach is inaccessible (screen readers cannot parse image-only emails), unresponsive on mobile devices, and unmaintainable. Every campaign required a designer to rebuild the entire email from scratch.

I rebuilt the email system using a hybrid of live text and images, structured within the design system. The new template follows email best practices for width, spacing, type sizing, contrast ratios, and alt text. It is modular — sections can be swapped, updated, or reordered without rebuilding.

The result: an accessible, scalable email system targeting a 60% reduction in production time per campaign, with new designers able to onboard to the template in approximately 2 hours versus the previous approach of building from scratch each time.

Strategic Recommendations
(Approved · In Build 2026)

In parallel with delivery work, I conducted a full UX audit of the customer journey — reviewing existing flows, analyzing competitor approaches, studying Hotjar session recordings, and mapping the technical constraints of the WooCommerce stack. The outcome is a set of strategic recommendations approved by stakeholders for development in 2026.

Customer Flow: Before & After

Current flow (live):

1. Landing page
2. Mandatory taste quiz — required for all users, no skip option
3. Country selector — choose box(es) and subscription length
4. Checkout — no cart, no upsell, no subtotal review

Problems: The quiz creates unnecessary friction and a false sense that it generates personalized results — it does not. There is no cart, so customers cannot add à la carte Yum Shop items to their order. There is no opportunity for upsell before, during, or after checkout. The Yum Shop is invisible unless a customer navigates there directly.

Proposed flow (approved):

1. Landing page — Homepage with Yum Shop surfaced in global navigation
2. Product selection — Box tier, country, subscription length
3. Cart — Review order, see subtotal, encounter curated upsell items
4. Checkout — Streamlined, with upsell accessible post-purchase

Quiz Redesign

The current taste quiz is mandatory and produces no actionable result — completing it does not change what a customer is shown or recommended. It is a point of friction with no payoff.

My recommendation, approved for build: make the quiz optional and available at any point in the journey — useful for customers who are undecided between country boxes, but not a barrier for customers who already know what they want. I redesigned the quiz UI and content for clarity and engagement, and proposed integration of a vector database to generate genuinely personalized results based on a customer’s flavor preferences. This is supported by competitor research showing how leading subscription brands handle preference-matching.

Information Architecture & Navigation

The Yum Shop — where customers can purchase individual snacks à la carte — is absent from the global navigation. This makes repeat purchases and product discovery invisible to customers who don’t already know the shop exists. My IA proposal surfaces the Yum Shop into the main navigation and adds a cart accessible site-wide, enabling upsell opportunities throughout the session.

Accessibility Standards

I introduced a documented accessibility baseline across the design system: WCAG AA color contrast for all text and interactive elements, focus states on all interactive components, minimum touch target sizing, and alt text standards for email. These are now embedded in the design system and available to all designers and developers as a reference.