Tiqmo - Digital Wallet

Project Name

App & Design System

Year

2023

Domain

Fintech

Device

Mobile App

Brief

Tiqmo is a digital wallet that provides customers with payment solutions that fit their financial lifestyle needs.

Worked with a leading Saudi Arabia fintech company to create a consistent design system by working closely with design lead and developers to turn designs into reusable products using Figma as the primary design tool.

The Problem

Every time we started a new module or started a new phase of the project we were creating projects from scratch. This would mean setting up a new components library each time.

This meant we were designing the same components over and over again with the style changing each time to suit functionality.

We needed to recreate old components and gather all old use cases and create use cases for each component.

The Benefits

Everything you need to see—like components, patterns, and styles—is in one place.

Updates to the same project can be easily redesigned and managed on a larger scale using the design system.

Design resources can spend less time adjusting how things look and more time tackling complex issues and finding solutions. This keeps the project and designs both visually and functionally consistent.

You can quickly recreate designs by using ready-made components and elements.

Less need to start from scratch means fewer inconsistencies and less wasted time.

Miscommunications are minimized, cutting down on wasted design or development time.

The Approach

I began by using an existing style guide for the system, which saved time. My task was to add any new changes or elements to the system and connect them to the existing style guide. Additionally, I had to consider designing the same system for both light and dark modes, as well as in two different languages: English and Arabic.

The style guide consist of:

Use in-page annotations to document and organize each component within the library.

This includes guidelines for branding, such as colors, typography for both web and mobile platforms, and logos.

Provide spacing guidelines to ensure consistency in the layout.

Layout grids help maintain structure and alignment throughout the design.

Llibrary includes an icon pack for easy access to commonly used icons.

Offer guidelines for border radius to maintain consistency in the appearance of elements.

Created a components list based on the common components used within the projects and any new components that are needed in future. Creating this library did take significant time and resources.

The component library consists of:

Component Name

State Changes

Note Making

Breakpoints

Each component has different versions, and each version is named appropriately. This makes it easy to understand how the component changes and what options are available to customize it to your needs when publishing.

Onboarding Journey

I used the design system to create the onboarding journey for Tiqmo. While I designed the dark version, another team member adapted in light version.

Challenges & Learnings

Being the sole designer responsible for the design system, which I hadn't worked on before in my design career, allowed me to gain valuable insights into its creation and functionality.

The most challenging part was working on two different languages (English and Arabic) and two view modes (Light and Dark) simultaneously, especially since Arabic was new to me.

I got to learn about how components, variants, local variables and style works in thought the design system.

Let's Craft Together!

shubham.maurya94@outlook.in

Shubham Maurya