In the market for more than 10 years, providing Payment solutions, Idea Maker is the main creator of the Apcap Platform. The end user of the app is the customer, they get to the application to gather information about the products, and also make purchases on the app.
Problems to solve
I made a few observations when I started here, and I’m pointing out here:
Several UI mismatches, display content counterintuitive to the natural semantic.
Buttons sometimes couldn’t be recognized as buttons.
Cards with different appearances on different pages.
Popups(modal) had no pattern.
Don’t seem to have any hard and fast rules about type sizes and weight;
Overall the UI felt bland and uninspiring
Plan
It is a process that I use to target every step of the process of creating a Design system. I worked with the Product Owner to identify the project stakeholders, their roles, and to what extent they would be involved.
I conducted audits of the entire App UI, the brand guidelines, and the company’s main marketing materials.
This gave me an overview of all of the styles, components, and page templates used, as well as the guidelines used by the marketing team to communicate outside of the app
Building the Style Guide
I built the design system in Figma. It was made up of two elements.
Core: Guidelines, Color, Typography, Spacing, Grids, border shadows and forms;
Components: Parameters (android/IOS), Icons, Buttons, Input and Organisms.
I published the design system to the company’s Figma team account, which was applied and used on design projects in the future. I also spent time onboarding the Style guide. We worked together to make sure the documentation was sufficient.
Atomic design
I started here to develop the components, to be used on the screens, initially with the buttons, we used the tokens, which we created earlier to make it completely clear to the developer how to use the tokens to build the buttons. also, separating the component atoms to form the organisms as shown in the button and example card below.
With the components created and finished, we could apply them to the entire prototype. As you can see, I purposely applied a different color to the prototype, to illustrate, that through atomic design, we can make large changes throughout the application with a small movement, which brings more agility to the entire design process.
