Full Site Redesign
Website Redesign
This project was a complete redesign of the website. It spanned the backend, frontend, visual style, and content, and was all completed on an aggressive eight-month timeline. The primary goals were to improve accessibility, create a scalable component library, and deliver a site that was easy to edit, maintain, and evolve over time.
From the outset, we focused on building a system rather than a collection of one-off designs. Every decision was evaluated through the lens of scalability, usability, and long-term sustainability.
​
My Role
I served as the lead designer in-house, partnering closely with an external agency while keeping the project on track from a design systems perspective. I worked cross-functionally with product marketing, engineering, and leadership to ensure alignment across visual design, content strategy, and technical constraints.
A core part of my role was maintaining focus on accessibility and scale—asking how we could design fewer, more flexible components rather than introducing multiple variations with slight differences. I also led the creation of page templates and provided design direction to ensure consistency across teams and contributors.​
Full page templates
-
Component-First Thinking - We prioritized creating components that functioned as true building blocks that were able to scale up or down depending on context. Rather than designing bespoke solutions for every scenario, we asked: How can one component support multiple use cases without sacrificing clarity or flexibility?
-
Templates Over One-Offs - I partnered closely with product marketing to create clear, repeatable templates for each page type, ensuring the structure supported how we wanted to tell our product story.
-
Flexible components that work across a wide range of pages
-
Easy-to-replicate templates for product overviews, solutions, and supporting content
-
Limited bespoke designs reserved for high-impact pages like the homepage
-
Brand personality expressed through color, shapes, product screenshots, and subtle motion. Motion was intentionally restrained. It was used to add visual interest on scroll without overwhelming or distracting users.
-
Component
flexibility
Three (out of 16) variations for icon + text
To balance speed, consistency, and flexibility, we audited existing patterns and collaborated with our agency to identify the most essential building blocks. The final system consisted of 11 core components used across the entire site.
Each component supported multiple configurations at the page-builder level, enabling teams to create variation without needing development support for minor changes. This approach allowed us to move quickly within a tight timeline while maintaining a cohesive visual system.
Three (out of 14+) variations for hero banner
Accessibility
Accessibility
​
Accessibility was a foundational requirement, not an afterthought. Ensuring WCAG compliance—particularly around color contrast—was a major focus throughout the project.
​
Duo’s signature bright green was a strong brand identifier, but it did not meet accessibility standards when paired with white text. To solve this, we expanded the digital color palette with additional green and navy shades, preserving brand recognition while enabling accessible UI patterns.
​
The updated palette now serves as the foundation of the Duo digital design system and is used across typography, UI elements, buttons, and page layouts. All color combinations meet WCAG 2.1 AA accessibility standards.
​
Performance & Optimization
​
We also prioritized site performance by optimizing image assets and exploring modern file formats such as WebP. Images were exported at the smallest possible size while maintaining clarity and legibility, helping improve load times without sacrificing visual quality.