Reusable Systems
Creating reusable resources for efficient design and collaboration.
Overview
Background
When I joined the team, there wasn’t a complete design system or proper documentation. Each new design task often started from scratch, which led to inconsistent designs and lower efficiency.
• Repeatedly redesigning similar tasks from scratch.
• Inconsistent visuals across emails, banners, and pages.
• Design assets were scattered and hard to find.
When I joined the team, there wasn’t a complete design system or proper documentation. Each new design task often started from scratch, which led to inconsistent designs and lower efficiency.
• Repeatedly redesigning similar tasks from scratch.
• Inconsistent visuals across emails, banners, and pages.
• Design assets were scattered and hard to find.
My Role
Led the design efforts, initiating and structuring reusable design resources. Worked cross-functionally to gather feedback and improve consistency.
Led the design efforts, initiating and structuring reusable design resources. Worked cross-functionally to gather feedback and improve consistency.
The Team
1 Designer (Initiator, with Mentor Support), Product Managers, Engineers, and Copywriters.
1 Designer (Initiator, with Mentor Support), Product Managers, Engineers, and Copywriters.
Timeline
Ongoing since in Q1 2022
Ongoing since in Q1 2022
How I Tackled It
As I worked on more projects and became familiar with the company’s products and workflows, I started noticing recurring patterns. Instead of solving the same problem repeatedly, I decided to create systems that would make everyone’s work easier and more efficient.
1. Audit
I reviewed all existing designs, like marketing pages, emails, and UI components, to understand what we already had and where the inconsistencies lay.
I reviewed all existing designs, like marketing pages, emails, and UI components, to understand what we already had and where the inconsistencies lay.
2. Categorize
I categorized designs based on types and common sections. This process helped us clearly see how many different designs we had for each category and identify repeatable components that could be standardized.
I categorized designs based on types and common sections. This process helped us clearly see how many different designs we had for each category and identify repeatable components that could be standardized.
3. Collaborate
With the gathered information, I reached out to different stakeholders, including designers, product, marketing, and content teams. I shared the problems I identified, along with my findings and insights. Together, we decided which designs and patterns best addressed user needs, solved existing problems, and represented our brand consistently.
With the gathered information, I reached out to different stakeholders, including designers, product, marketing, and content teams. I shared the problems I identified, along with my findings and insights. Together, we decided which designs and patterns best addressed user needs, solved existing problems, and represented our brand consistently.
4. Create
After selecting the core elements, I built responsive, reusable templates and centralized them in an accessible UI library, ready for the team to use at any time.
After selecting the core elements, I built responsive, reusable templates and centralized them in an accessible UI library, ready for the team to use at any time.
Solutions and Impacts
Marketing UI Blocks
I created auto-layout, easily customizable UI sections for different categories on marketing pages. This improved turnaround speed for marketing page designs while maintaining cohesive visual styles and reducing duplicated design work for the entire design team.
I created auto-layout, easily customizable UI sections for different categories on marketing pages. This improved turnaround speed for marketing page designs while maintaining cohesive visual styles and reducing duplicated design work for the entire design team.
Email Templates
To avoid recreating emails for every project, I designed reusable email templates based on key email types. This significantly reduced email design time and unified email branding, ensuring a consistent look and feel across all user communications.
To avoid recreating emails for every project, I designed reusable email templates based on key email types. This significantly reduced email design time and unified email branding, ensuring a consistent look and feel across all user communications.
Company Glossary
Collaborating with our copywriters, we developed and maintained a comprehensive Company Glossary to ensure consistent content usage and establish a living reference document accessible across teams.
Collaborating with our copywriters, we developed and maintained a comprehensive Company Glossary to ensure consistent content usage and establish a living reference document accessible across teams.
My Learning Takeaways
It’s an iterative process
These solutions weren’t final. As the team started using the templates, we tested them in various scenarios, gathered feedback, and kept refining. What I’ve shared here represents just the first step: identifying the problems, raising awareness, and taking action to unify our design approach. Iteration continues as we adapt to evolving needs.
These solutions weren’t final. As the team started using the templates, we tested them in various scenarios, gathered feedback, and kept refining. What I’ve shared here represents just the first step: identifying the problems, raising awareness, and taking action to unify our design approach. Iteration continues as we adapt to evolving needs.
Every design detail can impact user experience
I learned how even the smallest design choices can impact user experience. Designing elements from scratch gave me deep insights into the complexity of design systems. For example, a simple toggle required multiple iterations and discussions on different use cases. Details like color states, icon placement, and switch direction significantly affect how users understand and interact with a product.
I learned how even the smallest design choices can impact user experience. Designing elements from scratch gave me deep insights into the complexity of design systems. For example, a simple toggle required multiple iterations and discussions on different use cases. Details like color states, icon placement, and switch direction significantly affect how users understand and interact with a product.
Templates and systems simplify problem-solving
By recognizing patterns in repeated design tasks, I realized the power of templates and systems. A systematic approach not only solves problems faster and ensures consistency but also frees up time for more creative work, eliminating the need to start from scratch each time.
By recognizing patterns in repeated design tasks, I realized the power of templates and systems. A systematic approach not only solves problems faster and ensures consistency but also frees up time for more creative work, eliminating the need to start from scratch each time.
