I led the creation and implementation of a design system for Shepherd Money, streamlining design and development workflows for our product.
Product
Shepherd Money Design System
Skills
UI Design, Stakeholder Management, Branding
My role
UX Designer
Team
3-people UX Team, 5-people Development Team
Tool
Figma
Key metrics
Accelerate speed to market and reduce development time by 50%.
Enhance team efficiency and improve collaboration across cross-functional teams.
Context
❓Problem
An inconsistent design deliver workflow led to inefficient development progress and inconsistent design style.
📍Project Goal
Build a scalable design system to standardize components, streamline branding, and enhance design-development workflows.
🪨 Challenge
Balancing legacy components with a new design style required careful integration to preserve functionality while ensuring flexibility for future iterations.
Before design system implementation
After design system implementation
Research-informed selection of typography and color palette to reflect brand values.
I explored various design systems and branding resources to define a color palette and typography that embodied our brand’s warmth, friendliness, and professionalism. After careful evaluation, I selected the "Poppins" font for its modern yet approachable feel and established a base palette of nine distinct colors.
Iteration Process
Functional colors
Each color is purposefully chosen to create visual harmony across components and contexts.
Typography
Typography establishes a clear hierarchy, supporting both readability and brand identity.
Components
Standardized components bring uniformity and reliability to the user experience. Each element is designed to be scalable, adaptable, and easy to implement across products.
Spacing and design handover
Defined spacing rules create a balanced, structured layout that enhances user comprehension. Streamlined handover guidelines enable developers to implement designs with precision and consistency.
Design documentation
Documentation is always included on the same page as the component this was to explain any use cases that were created. This consisted of:
A clear explanation for what this element is and how it is typically used.
Picture examples so that it was clear what we were talking about
Rules of when to use the component and how to use the component.
Keep it simple yet scalable
As the sole designer, I built the system with future scalability in mind. Following atomic design principles, I used nested components and variables to simplify variants. It's an ongoing process to refine reusable components and identify edge-case elements.
Final Design after design system implemented
Before design system implementation
After design system implementation
Reflection
The Importance of a Comprehensive Design System
One crucial lesson from the project was the significance of having a well-defined and comprehensive design system in place before embarking on new design projects. It ensures consistent design across the entire app and facilitates seamless collaboration with other teams.
Enhanced Communication and Collaboration with Engineers
By taking the time to finalize the design guidelines and ensuring that engineers understood and could easily reference them, I created a smoother working relationship. This not only improved the development process but also enhanced the overall quality of the project.
Next project
