My O! Design System

Refinement of the existing design system for a multi-platform FinTech SuperApp

My role

Research & analysis, components' design & documentation, color tokens & illustration pack creation

Team

8 UX/UI designers, iOS/Android/Web developers

Product

My O! + Bank

About app

Problem

The product had grown rapidly, creating a fragmented experience and inconsistent visual language across platforms (iOS, Android, and WebView). This led to higher cognitive load for designers and engineers, duplicated implementation effort, and slower feature releases.

Non-tokenized color system caused inconsistency and inefficiency
Unstructured and outdated components led to bugs and confusion among teams
Mismatch between native and custom UI elements created usability issues

Goal

The core goal was to evolve the existing design system into a scalable, intuitive framework that supports both designers and engineers, reduces ambiguity in component usage, and enables faster delivery of new features.

Success metrics

Since this initiative was focused on internal system optimization, we defined success through operational and collaboration metrics rather than direct revenue impact. We aimed to:

Reduce UI inconsistencies across platforms
Shorten design-to-development handoff cycles
Minimise bugs related to UI
Decrease feature delivery time
Optimise onboarding time for new designers

Challenges

The variety of platforms (iOS, Android, and WebView). It required systematic approach and involvement of different teams.
Approval of many stakeholders. It influenced the speed of production.

Research & Analysis

To understand core pain points and inform our strategy, all the designers conducted structured research combining quantitative feedback, competor analysis, and team workshops:

Collected user and team feedback on colors, text sizes, and usability to uncover real pain points
Benchmarked design systems from big tech to identify patterns and best practices
Prioritized ideas based on impact and effort to focus on high-value changes
Aligned with developers to ensure feasibility and implementation clarity

My impact

I was responsible for owning the design of 25+ components (buttons, text fields, complex cells, in-apps, etc.). I ensured each component was flexible, and compatible across platforms using auto-layout and responsive logic. Moreover, I wrote and maintained guidelines and documentation for collaborative usage.

I also created the color tokens' system that helps to switch the different modes quickly and preserves consistency among all files and screens.

What about the cat?

While reviewing legacy assets, I discovered an unused cat illustration that had potential as a unifying design element. I pitched this idea to the team as a way to create visual cohesion and add personality to the product.

This mascot not only boosted visual consistency, but also improved user recognition and team morale, becoming a delightful and distinctive brand feature.

Results

Updated and unified components, reducing ambiguity and design drift
Revised typography tailored to Android & iOS, improving readability
Documented comprehensive guidelines to streamline cross-team collaboration and onboard new team members faster
Created 30+ illustrations of the mascot that increased brand personality and created a consistent visual language
Post-launch feedback showed faster design-to-development handoff and UI bugs reduction

Full production is still in process. In hindsight, I would introduce structured tracking of system adoption metrics (such as component usage rate and UI-related QA bugs) earlier in the process to quantify long-term impact more precisely.