Enterprise-scale design system created to actively resolve component and typography issues
Enterprise-scale design system created to actively resolve component and typography issues
Redesigned, implemented and validated 32+ design pages with new components & features.
Redesigned, implemented and validated 32+ design pages with new components & features.
Timeline
During my time at Loft Design
Contribution
Design System
Marketing Materials
Slide Deck Templates
User Experience Design
Interaction Design
Prototyping
Web Typography
Team
1 ux designer, 1 creative director, 1PM, 1 Dev
Full Case Study Coming Soon.
IMPACT
IMPACT
• Assessed, evaluated and challenged the existing web user experience focusing on visual and interaction designs.
• Developed enterprise-scale design systems to actively resolve component and typography issues that impede the workflows of designers and developers.
• Streamlined 39+ type scales/styles, constructed font stacks & typography guidelines with a deep understanding of design principles, brand and usability standards.
• Updated 32+ design pages with new components and new features, produced detailed and scalable documentation for designers and dev, ensured consistency across mediums.
• Assessed, evaluated and challenged the existing web user experience focusing on visual and interaction designs.
• Developed enterprise-scale design systems to actively resolve component and typography issues that impede the workflows of designers and developers.
• Streamlined 39+ type scales/styles, constructed font stacks & typography guidelines with a deep understanding of design principles, brand and usability standards.
• Updated 32+ design pages with new components and new features, produced detailed and scalable documentation for designers and dev, ensured consistency across mediums.
Testimonials
Testimonials
Metric showing our significant progress on the website.
-Clotilde G, PM (From report)
We've achieved a new standard of handoff and documentation, thanks to Phoenix's meticulous approach. The strategic insights, attention to detail, and thorough analysis of our web experience were precisely what we needed. In the past, we often dealt with various designers and interns tackling disparate design projects, and the disjointed designs were always a challenge. Now, with a clear strategy and system in place, we've achieved a new level of coherence and direction that's truly transformative.
-Gregor M, Creative Director (Almost verbatim)
Thank you for the awesome spec by the way! It was a joy to implement!
-Felix M, Developer (From group message)
Metric showing our significant progress on the website.
-Clotilde G, PM (From report)
We've achieved a new standard of handoff and documentation, thanks to Phoenix's meticulous approach. The strategic insights, attention to detail, and thorough analysis of our web experience were precisely what we needed. In the past, we often dealt with various designers and interns tackling disparate design projects, and the disjointed designs were always a challenge. Now, with a clear strategy and system in place, we've achieved a new level of coherence and direction that's truly transformative.
-Gregor M, Creative Director (Almost verbatim)
Thank you for the awesome spec by the way! It was a joy to implement!
-Felix M, Developer (From group message)
PROCESS
PROCESS
1. Understood the problem space, aligning on project requirements, milestones, and technical feasibility.
2. Researched about design system, web typography, design tokens, and etc
3. Performed a high-level audit of the typography and components across the web
4. Explored font stacks & visual hierarchy, constructing the first version of the type library
5. Componentized the major typography elements of the web
6. Established type scale and hierarchy
7. Clarified how the typography system helped in improving the consistency and performance across various digital and physical platforms.
8. Pitching, refining and iterating, implementing feedbacks, and conducting testing sessions for the designers and developers to use the design system.
9. Documenting and considering scalability & adaptability.
1. Understood the problem space, aligning on project requirements, milestones, and technical feasibility.
2. Researched about design system, web typography, design tokens, and etc
3. Performed a high-level audit of the typography and components across the web
4. Explored font stacks & visual hierarchy, constructing the first version of the type library
5. Componentized the major typography elements of the web
6. Established type scale and hierarchy
7. Clarified how the typography system helped in improving the consistency and performance across various digital and physical platforms.
8. Pitching, refining and iterating, implementing feedbacks, and conducting testing sessions for the designers and developers to use the design system.
9. Documenting and considering scalability & adaptability.
LEARNINGS
LEARNINGS
Looking back, I have gained tremendous experience and confidence through constant engagement with the team, receiving feedback and support. Handling both small and complex projects has taught me to collaborate with different types of designers.
Realizing that creating and managing a complex design system at scale isn’t an easy task, I am constantly thinking:
• How would we distribute a component library and train designers and developers in using the design system properly and effectively?
• How can we ensure the design system is consistent, customizable, scalable, and easily adaptable to fit the entire platform/brand and the larger roadmap?
• In an agile world, how should benchmarks be set, and how should the PRD be read and interpreted with its known benefits?
• How can well-structured documents be created to expedite the delivery of major projects?
• How might we balance the pace and detailed perfection? Wild exploration versus safety net?
• We all know that design handoff is a crucial step in the product development process. It's a misconception to think that designers are no longer responsible for the product's development once they hand it off to the development team. As a visual designer, I also wonder what happens after the visual design handoff, should we pay more attention to the execution of those great ideas in the later stages where the decisions are no longer made by graphic designers and how can we communicate in a way to possibly make the handoff process more efficient?
Looking back, I have gained tremendous experience and confidence through constant engagement with the team, receiving feedback and support. Handling both small and complex projects has taught me to collaborate with different types of designers.
Realizing that creating and managing a complex design system at scale isn’t an easy task, I am constantly thinking:
• How would we distribute a component library and train designers and developers in using the design system properly and effectively?
• How can we ensure the design system is consistent, customizable, scalable, and easily adaptable to fit the entire platform/brand and the larger roadmap?
• In an agile world, how should benchmarks be set, and how should the PRD be read and interpreted with its known benefits?
• How can well-structured documents be created to expedite the delivery of major projects?
• How might we balance the pace and detailed perfection? Wild exploration versus safety net?
• We all know that design handoff is a crucial step in the product development process. It's a misconception to think that designers are no longer responsible for the product's development once they hand it off to the development team. As a visual designer, I also wonder what happens after the visual design handoff, should we pay more attention to the execution of those great ideas in the later stages where the decisions are no longer made by graphic designers and how can we communicate in a way to possibly make the handoff process more efficient?
