FinTech
Mobile app
My O! Design System
My O! Design System
My O! Design System
Design system refinement for My O! + Bank SuperApp
Design system refinement for My O! + Bank SuperApp
Idea
Idea
To revise and enhance the existing Design System, make it more convenient for both designers and developers through deep research and analysis.
To revise and enhance the existing Design System, make it more convenient for both designers and developers through deep research and analysis.
Challenges
Challenges
The app ecosystem grew up, so the components renovation was needed. Color system wasn't token based, thus, it was hard to use. The illustrations in the app were bitty with not a hint of consistency. The biggest chalenge was to find a balance between native and custom components and make them suitable for our needs and convenient in use. It was crucial because our app supports iOS and Android platfroms, but also includes some Hybrid services (WebView).
The app ecosystem grew up, so the components renovation was needed. Color system wasn't token based, thus, it was hard to use. The illustrations in the app were bitty with not a hint of consistency. The biggest chalenge was to find a balance between native and custom components and make them suitable for our needs and convenient in use. It was crucial because our app supports iOS and Android platfroms, but also includes some Hybrid services (WebView).
Research & Analysis
Research & Analysis
Together with other UX/UI designers we:
Listed all the flaws and disadvantages of the existing Design System that we and business want to improve
Collected users' feedback on colors, text sizes and some components
Analysed and explored the huge amount of various design systems of big tech companies
Gathered all our ideas and thoughts, listed and prioritized them
Discussed renovations and changes we want to make with the developers
Together with other UX/UI designers we:
Listed all the flaws and disadvantages of the existing Design System that we and business want to improve
Collected users' feedback on colors, text sizes and some components
Analysed and explored the huge amount of various design systems of big tech companies
Gathered all our ideas and thoughts, listed and prioritized them
Discussed renovations and changes we want to make with the developers
My role
My role
I was responsible for cells, complex cells, textfields, buttons, InApps, etc. (at least 16 components). I made them flexible with auto layouts taking into account different systems and states. Moreover, I wrote detailed documentation of their usage and logic.
I also created the color tokens' system that helps to switch the different modes quickly and preserves consistency among all files and screens.
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 illustrations?
What about illustrations?
I found a draft image of the cat in old Figma files and thought: "That's it!" At that very moment I realised that this cat could become a mascot of the app. I pitched this idea and, as a result, created 30+ illustrations of the cat. Now it's everyone's favorite mascot and a distinctive feature of the app.
I found a draft image of the cat in old Figma files and thought: "That's it!" At that very moment I realised that this cat could become a mascot of the app. I pitched this idea and, as a result, created 30+ illustrations of the cat. Now it's everyone's favorite mascot and a distinctive feature of the app.
Results
Results
Updated the components, made them flexible and easy to use.
Revised typography for both Android and iOS to respond business needs and users' feedback
Summarised all the components' logic in comprehensive guidelines and documentation for smooth team work
Made up the app's mascot and created 30+ illustrations of it.
Updated the components, made them flexible and easy to use.
Revised typography for both Android and iOS to respond business needs and users' feedback
Summarised all the components' logic in comprehensive guidelines and documentation for smooth team work
Made up the app's mascot and created 30+ illustrations of it.