Creating An Ecosystem
Wonolo Design System
Project Overview
Client: Wonolo
Duration: Ongoing
Team: Product Manager, Engineers, Data Analysts, Customer Success Advocates, and myself
Objective: Improve the job posting, reviews, and feedback system by creating a unified design system that incorporates guidelines, libraries, and other asset to create a single source of truth.
The Challenge
Upon joining Wonolo, my initial task was to address the disjointed and fragmented nature of the customer portal, which served as a pivotal platform for clients to source and manage workers.
Over time, the portal had evolved in a piecemeal fashion, resulting in a chaotic user experience across both mobile and desktop interfaces.
The Approach & Plan
Creating the design system begins with thorough research and discovery. Conduct a UI audit to identify inconsistencies and gather stakeholder requirements.
Define core elements like color palettes, typography, spacing, and grid systems, and establish icons and imagery guidelines.
Develop a robust component library with reusable UI elements, complete with documentation and code snippets.
Implement design tokens for color, typography, and spacing in both design tools and code for a seamless workflow.
Establish design principles and guidelines to ensure accessibility and responsiveness. Integrate the design system into tools like Figma or Sketch and frameworks like React or Angular.
Create comprehensive documentation and a dedicated repository for easy access.
Set up processes for collaboration and governance, allowing team contributions and maintenance.Conduct usability testing and gather feedback to refine the system.
Launch the design system with training and support for adoption. Regularly maintain and update the system based on feedback and new requirements, ensuring it remains relevant and effective.
Following these steps creates a design system that enhances consistency and efficiency, evolving with your products and team needs for a superior user experience.
Definition & Design
We started out by defining the core elements of your design system. Establish a color palette that reflects the brand's identity, choose typography that ensures readability and style, and set up spacing and grid systems to maintain visual harmony. The basic guidelines.
Additionally, I created a set of icons and imagery guidelines to ensure visual coherence across all touch points.
Next, we developed a robust component library. This library includes reusable UI components like buttons, forms, and cards, complete with detailed documentation on their usage and code snippets.
This significantly streamlined the design and development process, fostering consistency and efficiency.
Design tokens come into play at this stage, where we define tokens for color, typography, spacing, and other design elements.
Implement these tokens in both the design libraries and code to create a seamless bridge between design and development.
Completion
Dev & Design
Conclusion & Next Steps
When everything was in place, it was time to launch the design system and drive adoption.
We socialized and then rolled it out to the internal teams. A critical part of the process here was providing the necessary training and support to ensure everyone is on the same page.
Finally, maintenance and iteration are ongoing processes.
Regular update and refinements to the design system based on continuous feedback and new requirements.
We will continue to monitor its usage and stay open to enhancements, ensuring the system remains relevant and effective.
Future plan
Let's see how I
can help you
I was able to help Wonolo
I built a fully functional Design System and Library, that is flexible and scalable. What can I do for you?
"Their strategic insights made Dreamforce looked & worked better."
"He always brought good ideas and a collaborative spirit."
"He was a dream to work with, i miss him!"
"Jon always provided us professional work."
