Facelift

My Contribution

Design System

Accessibility

Usability Feedback

Timeline

Three Weeks

Team

Tina Chen (UX Designer)

Jade Wang (Design System Designer)

Bill Guo (Design Manager)

Overview

This project aims to assess and improve site accessibility, alongside updating outdated UI elements to match the new design system.

I wireframed in Figma, ensuring accurate mapping to implementation, and built components using the new design system, correctly linking them across various breakpoints. I also added annotations for smoother developer handoffs and documented the wireframes using an MRD checker template.

Process

Process Behind the Scene

Step One. Replicate & Facelift

I revamped the old design file to align the frames with the current brand theme.
If updated components were available in the new design system, I replaced the old ones accordingly.
Otherwise, I manually selected the closest colors or margins to ensure consistency.

Show Specs

In-Section Design

Summer 2024

Summer 2023

Whole Page, Between-Section Design

Step Two. Design Handoff Annotations

I then annotated the design file to highlight the changes for the developers, detailing updates such as component usage, margin adjustments, and color changes.

Show Specs

Step Three. Make it Responsive

To enhance the adaptability of the frames across different breakpoints, I applied Minimally Responsive Design (MRD), an internal guide for responsive screens, ensuring the updated sites were fully responsive.

The four rows represent four different breakpoints (from top to bottom: "Mid <768px," "Lg," "XL," and "XXL"). The columns represent three stages, each with specific requirements to consider at each breakpoint.

Final Deliverable

Congrats!🎉
Your design files are clean and appealing now!

Learning

Embracing Design System Consistency

While updating the design files, I focused on aligning the components with the new design system to ensure consistency across various touchpoints. As a product designer, I learned that adaptability and attention to detail are essential in ensuring that design systems can be smoothly integrated across different breakpoints and contexts.

Improving Developer Collaboration through Clear Annotations

Creating clear and detailed annotations for developers was crucial in streamlining the handoff process. By documenting changes like component usage, margin adjustments, and color updates, I facilitated better communication between design and development. Going forward, I plan to further refine how I annotate design files, aiming to anticipate developer needs and clarify design decisions early on to make the process even more efficient.