Wewire MVP Design System
Background
Wewire Africa offers innovative global payment solutions for businesses, enabling efficient and secure cross-border transactions. The platform facilitates multi-currency wallets, virtual dollar cards for expense management, and OTC trades for high-value transactions. Serving over 1,500 businesses and handling over $800 million in transaction volume, Wewire Africa supports a broad range of clients including SMEs, tech companies, family offices, and high net-worth individuals, making it easier to expand into new markets and seize international opportunities.
The Goal
The objective was to meticulously craft a streamlined and user-friendly design system. This system was envisioned to not only cater to the immediate requirements of Minimum Viable Product (MVP) design and development but also to possess the inherent flexibility and scalability needed to accommodate future growth and expansion. Through this approach, I aimed to ensure that the foundational design elements and principles would seamlessly evolve alongside the product, maintaining both functionality and aesthetic appeal throughout its lifecycle and beyond.
My General Approach
The objective was to keep the design system as simple as possible while allowing for future growth. The product was three pronged (Customer, Internal and Marketing Website). To achieve this, I decided that i would use the same general base elements for all of them while varying the design style with color to help differentiate the Customer platform form the internal one.
First Steps - Brand and Style assets
I created a file with the primary design system elements to build out the rest of the design system, and I called it the brand and style assets. Its a simple directory with pages that most people would call atoms. It consists of a font system, color system, custom icons/illustrations and the brand logo in different versions to be used across the product.
Final Steps - Components
I created a file to house everything else from buttons to cards, toggles to tables and navigation. These components were then used in the main webapp building projects that were hosted on their own files but pulled from everything else. It was an intricate link from Brand and styles assets > Components > Webapps and Website. Sometimes it would skip a step and go straight from Brand and styles assets > Webapps and Website in cases where you simply need to use a color or type scale.
Outlined below are some of the components I created on the project
Reflection
Reflecting on the project, I'm filled with pride. My aim was to create a scalable design system solution that met initial goals, navigating challenges that taught me the importance of adaptability and future proofing. These experiences enriched my skills and shaped the product into something that resonates with users. I handed over this project to their resident UX designer over a year ago and the product grew, so did the design system.
If i had a chance to redo things, with the knowledge i have acquired I would create another set of building blocks called cells. These cells would contain secondary design system elements like buttons, lists, toggles, chips, inputs etc. These cells would then be the building blocks for bigger components I would then call organisms. Components like tables, modals, headers, footers etc.
