Wandr-E UI Design Journey;
Building a Design System
Work Timeline: November 2021 - December 2023
Key Areas:
UI Design
Wireframing
Design Concept
UI Kit
Design System
Prototyping
Wandr-E is a remittance service based in Singapore, they provides fund transfer to banks and other financial institutions. Their main product features are send money overseas via bank transfer, wallet top-up, and bill payments, with a list of countries covered in Asia, United Kingdom, Australia, Europe, and New Zealand.
When I first joined as a UI/UX designer, this project was just starting in the wireframe development phase. Theme and basic color palette have been selected. So I continued creating the wireframe until all the flow sections were finished.
The Challange
Starting a new project from scratch with a team of two designers causes confusion because we don’t have any guidelines to ensure consistency in the design. Therefore, the first thing I did was to propose design guidelines, which would later be developed into a design system. The design guide I made contains branding (colours, typography, logotype), spacing guidelines, layout grid, and icon pack.
Build Design System
After creating the design guidelines and working on home screen ideation in parallel, I began setting up the design system. I started by organizing the color system, typography, and UI kit components (such as the top and bottom bars, buttons, and cards). Then, I proceeded to standardize icon sizes to ensure consistency across all sections.
The benefits I get from creating the design system, even as part of a two-person team, are:
If there are updates or new features, I can redesign and manage them at scale through the design system.
I can quickly create design ideations by using components and elements from the UI kit.
It reduces misunderstandings regarding design implementation, especially in the context of remote work.
It makes it easier for engineers to implement design sizes, colors, and layouts.
Nailul Imtihany
2024