Reimagining Arcade Design System
May 2020
Background
Arcade is a design language & foundation of itemku.com, Indonesia's largest marketplace for virtual goods for gaming, entertainment, and hobbyists by Bukalapak group.
Started in mid-2020 without a well-structured component library, pattern, and one single design source truth. I’m with the team starting to build and scale a design system called Arcade. My specific role in this project began with restructuring the design foundations such as typography, color, tone voice, iconography, and illustration, which I worked closely with the creative design team on.
Framework
I believe that framework can help us in laying out ideas and design decisions in a structured way. So to build & scale the design system, I make a framework with 3 steps or variables.
Starting with the foundation, which will serve as the system's core. Then to the device component, and finally to the local component. Local components are designed to fit components that have workshop status or are only utilized for one specific product.
Design Foundation
Iconography
Previously, we didn't have our own set of icons; instead, we depended on free source icons, and some of the icons we had were out to date. This can lead to inconsistencies in how we use icons across our products.
Therefore, I worked in collaboration with the creative design team to define icon construction specs, a group of icons, and style preferences.
Component Library
Some components of my contribution. All components are responsive and built with an atomic design approach.
Standardised Component
I facilitate a small workshop for the team about the atomic design approach. In addition to equalizing perceptions & best practices, this is useful so that the quality of the blocks can be efficient and scalable in the future.
Now, itemku has its own design system, which allows us to scale our product while maintaining our own design language. Not just that, we keep improving and maintaining so that our design system can keep empowering our ecosystem.
Great Achievements Never Stand Alone
These all wouldn’t be possible without the great works of
UI Designer
Abed, Ruly, Nira
UI Engineer
Fariz, Abbi, Ciara
Illustrator
Yudith, Vachry
and many others which I couldn't name one by one.
