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.

06
Months To
Completion
40
Adopters fFrom
Dev & Design
64%
Reported Increase In Design and Implementation Velocity
100%
Reported Satisfaction With The New System

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

001
Feedback Loops: Create a feedback loop with dev and design to ensure that everyone is providing feedback and getting updates
002
Updates & Refinements: Refine the system, its rules, and other parts as needed; incorporate updates from desingers and dev
003
Continued upscaling: using the previous tools we can also continue to upscale the system to ensure that it's built for scale

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?

001
Design
Template image

"Their strategic insights made Dreamforce looked & worked better."

Jacinda Perez
PM Salesforce
002
Strategy, Design
Template image

"He always brought good ideas and a collaborative spirit."

Samantha Carson
Designer Manager, Densu
003
Strategy, Design, Research
Template image

"He was a dream to work with, i miss him!"

Jessica Hampton
Content & Branding, Wonolo
004
Branding
Template image

"Jon always provided us professional work."

Marcus Johnson
Fullstack Dev, Densu