Full-Site UX & UI Redesign

Designed and launched a mobile-first website for a startup beverage brand, building a responsive design system and streamlining Webflow implementation.

UI/UX Design, Responsive Design, Design Systems, Brand Design

UI/UX, Brand & Web Design, Design System

January 2024 - September 2024

January 2024 - September 2024

Platform: Web + Mobile

Platform: Web + Mobile

Tools: Figma

Tools: Figma, Google Analyrics, Hotjar, Lookback

Summary

Summary

At Milestone, a growing beverage startup, I led the design of a mobile-first website and developed a clean, responsive user experience that aligned with the brand’s evolving identity. Working closely with engineers and marketing, I implemented a new design system in Figma, streamlined the Webflow handoff, and prioritized usability on mobile. The project gave me a chance to balance startup agility with scalable design practices—building quickly while still thinking long-term.

The Problem

The Problem

Milestone Beverages, a startup beverage brand, needed a mobile-first web presence that would reflect their brand identity and grow with their business. The challenge was to design an intuitive, aesthetic experience from scratch—one that worked seamlessly across platforms and could be easily implemented by a small engineering team.

Goals

Goals

  • Design a responsive website optimized for mobile

  • Create a scalable design system for consistency and handoff

  • Collaborate with marketing and engineering to align on brand vision and implementation

  • Ensure the site is clean, intuitive, and ready to grow with new product offerings

Research & Insights

Research & Insights

🧠 Brand Alignment & Stakeholder Input


Met with the Marketing Director and stakeholders to understand the brand’s aesthetic, messaging priorities, and audience. Identified visual themes and competitive benchmarks in the beverage and wellness industries.

🧠 Usability & Platform Constraints


Collaborated with developers early to understand limitations of their Webflow stack and ensure design feasibility.

🧠 Inspiration Gathering


Reviewed modern DTC (direct-to-consumer) sites for layout, interaction, and hierarchy inspiration. Focused on mobile-first ecommerce patterns and simplicity.

Solutions & Process

Solutions & Process

✨ Ideation & Wireframes


Sketched early flows and homepage modules using Figma. Aligned layout with user priorities and brand tone. Focused on clear calls-to-action and mobile responsiveness.

✨ Design System Creation


Developed a foundational design system with reusable components, styles, and interactions to streamline dev handoff and enable future scalability.

✨ Implementation & Collaboration


Worked alongside developers and the marketing team to QA designs in Webflow, ensuring responsiveness, fidelity, and interaction accuracy.

Old Design - desktop

New Design - desktop

Old Design - Mobile

New Design - Mobile

Impact & Metrics

Impact & Metrics

  • Launched mobile-first site optimized for product storytelling and brand presence

  • Built a design system with 40+ reusable components

  • Estimated 30% faster dev handoff based on structured documentation and ready-to-use assets

  • Improved mobile layout performance, improving load performance with a Largest Contentful Paint (LCP) averaging under 0.5s, ranging from .17 to 0.64s, and zero layout shift (CLS = 0), based on local Lighthouse audits

  • Improved Lighthouse scores across Accessibility, Best Practices, and SEO to 90+ on mobile, and achieved 90+ across all four categories—including Performance—on desktop

Reflection

Reflection

Designing for a lean startup taught me how to prioritize clarity and scalability over complexity. I had to think not only about aesthetics and usability, but also about the handoff process and real-world constraints of a fast-paced launch. This experience reinforced my belief that good design is both beautiful and practical—and that collaboration across teams is what brings it to life.