Wonolo Design System

Introduction

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.

With limited resources and a tight deadline of two weeks, I embarked on the challenge of creating a cohesive design system to unify the user experience.

Identifying The Problem

Wonolo's customer portal suffers from fragmentation and inconsistency across mobile and desktop interfaces, hindering user productivity and satisfaction.

With features added piecemeal over time, the portal lacks a cohesive design system, resulting in a confusing and disjointed user experience.

The absence of standardized UI elements and typography further exacerbates usability challenges, necessitating immediate attention to streamline the interface and enhance user engagement.

Design System

Overview of the Wonolo Design System

Research & Strategy

Drawing from my experience with previous design systems, such as Salesforce's Lightning UI and American Express' business portal, I began by conducting a comprehensive audit of the existing portal.

This involved categorizing and organizing the myriad elements scattered throughout the interface. Additionally, I researched competitor systems and industry best practices to inform our design decisions and validate our approach.

Recognizing the importance of typography, CTA design, and accessibility, I focused on establishing a solid foundation for the design system. Through iterative exploration and internal testing, I refined typography styles and color palettes, ensuring compliance with WCAG 2.0 standards.

Design systems are not a new process for me. I worked on several before, including Salesforce's Lightning UI and the system for American Express' business portal.
ch I then tested internally. I also made sure to test the colors and typography for WCAG 2.0 compliance.

Leveraging the principles of Atomic Design, I structured the Design Library to facilitate consistency and scalability.

Design & Implementation

With typography and core UI elements in place, I proceeded to define and standardize other key components such as buttons, dropdowns, and text inputs.

Collaborating closely with the front-end engineering team, I ensured seamless integration of the design system into the development process.

Modular design principles facilitated agile development, enabling us to create user stories for each component and maintain an up-to-date design repository.

Despite the absence of a dedicated research team, I solicited feedback through internal reviews and consultations with a select group of clients.

Their qualitative input helped refine our designs and validate the usability improvements. Both users and internal teams welcomed the revamped interface, citing its clarity and intuitiveness compared to the previous iterations.

Working closely with the front-end engineering team fostered a smooth and collaborative process. By involving them in design discussions and decision-making, we ensured alignment between design and development efforts.

Utilizing tools such as Confluence and Zeplin facilitated transparent communication and streamlined the dissemination of design updates and implementation details.

Outcomes & Future Enhancements

The redesigned interface received positive acclaim from stakeholders, marking a significant improvement in user experience.

Moving forward, we aim to enhance the portal further with micro-interactions and animations, elevating the overall user engagement and satisfaction.

Conclusion

While challenging, the project to revamp Wonolo's mobile and desktop interfaces proved immensely rewarding.

By establishing a cohesive design system within a tight timeframe, we successfully addressed longstanding usability issues and laid the foundation for future enhancements.

Moreover, the collaborative nature of the project facilitated team cohesion and set a precedent for future design and development endeavors.