.png)
Process Behind the Scene
Step One.
Revamp Current Design Files
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
Show Specs
.webp)
In-Section Design
%201.svg)
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.
.webp)
.webp)
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.
.webp)
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!🎉
Our design files are clean and appealing now!
Our 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.
