INFO
Role:
Designer in Charge
Company:
Bareksa
Year:
2022-2023
Professional Work
Design System
SUMMARY
New Design System for New Workflow
The new design system, named Biome, is the design foundation and guideline built for Bareksa’s investment super app. More than just a repository of UI assets, it brings design principles, visual foundation, and standardized components into a unified novel system that built with growth and scalability in mind.
Created to address external and internal challenges, while enabling teams to work faster and effectively. The result is a shared principles and documentation across design, engineering, and marketing team that ensure Bareksa can deliver a cohesive, consistent user experience.
Before-after preview of the key screen after rework with the design system.
BACKGROUND
External Feedbacks and Internal Struggles
As Bareksa continued to grow over the years with the diverse range of investment option and ever-growing customer base, no structured and well-thought design system had been established to support this growth. The existing design workflows and interface became inconsistent and outdated, making it harder to ensure design scalability and cross-team efficiency.
From several past research that has been conducted (includes NPS, Usability Testing, and User Interview), there are insights related to the design system and the existing look and feel:
Beside external concerns, internal teams also voiced some challenges:
The Goal
In response to evolving product complexity, growing user expectations, and critical internal feedback, the need for a scalable and unified design system became indispensable. The initiative, later named Biome Design System was driven primarily by the Product Design team with strong support from Engineering and Marketing Team.
BEFORE MAIN PROCESS
Workshop Across Functions and Levels
At the start of the process, the Product Team organized several workshops. The purpose was to identify the specific problems from each team and stakeholder, and ensure the design system incorporated all inputs and perspectives. The workshops also serve as a way to foster a sense of involvement and ownership across teams. In this phase, I had the opportunity to take an active role by leading and facilitating some of these sessions.
Workshops were held both in-person and online.
In addition to many detailed and technical inputs, one key insight highlighted during the workshops was that the design system should not be limited to design documentation. It also needs to serve as a foundation for the brand as a whole including design principles, tone of voice, and marketing guidelines.
For this case study, the focus will be on the exploration, production, and documentation process that later formed the design repository used by the Product Design and Engineering teams.
Not Just ‘Visual’
The design system, later named Biome, was never intended to be merely a collection of visual assets. Instead, it was designed to become a foundation carrying values that could be applied beyond the design system itself. The Design Principles, created by the Product Team, serve as a guiding framework that informs design decisions on every touchpoint.
Alongside this, we also developed a Tone of Voice guideline to ensure consistency in product language and content, serving not only the Product Team but also the Marketing Team in shaping brand communication.
DESIGN PRINCIPLES
TONE OF VOICES
THE PROCESS
Color Exploration
One of the first steps in the exploration process was to figure out for a brand-new color direction. We curated and reviewed potential new colors before narrowing them down to a few strong choices. From the shortlist, discussions within the team helped us select the final primary color that best represented Bareksa’s identity with fresher look.
Comparison and review of potential options for the primary color.
Within the design system, we also defined: 1. Secondary color to complement the brand visual without overpowering the primary color. 2. Neutral color to accommodate visual accessibility and balance 3. Semantic colors to clearly communicate intention and status. Once the palette was defined, spectrum for every color was established to guide implementation over different use case.
Spectrum of each tone defined by saturation & lightness step.
Choosing the Right Typography
To determine the most suitable typefaces, several font options are explored, tested them within our setting, and mix-and-matching with various pairings.
One of the key consideration was to find the best way to display numerical and/or financial figures, which are essential to Bareksa as a platform in fintech industry. We investigate font characters that would maximize legibility for numbers and at the same time align with our design principles direction.
The example below illustrates the comparisons I made when testing different typefaces to determine which one best supported our goals.
Exploration focus on how to display numerical value.
After the process, we selected Nunito Sans with its rounded character as the primary typeface because it captured the qualities we were aiming for—formal yet approachable—with pseudo-mono numerals that ensured clarity when displaying financial figures (see illustration above). To complement the main typeface, we paired it with Inter for body text and captions, leveraging its neutral and versatile qualities that are highly optimized for digital interfaces. Once the pairing was finalized, we created detailed documentation outlining the specifications for each typography style.
Preview of Typography documentation.
Crafting the Components
In parallel with defining the foundations of the design system, like colors and typography, we began iterating on components to ensure that the elements we selected as a foundation could be applied as intended within Bareksa’s interface.
We explored and tested component by redesigning sample screens from the existing Bareksa app using the new system. This process allowed us to validate whether the new visual direction aligned with our intended vision. It also revealed valuable insights that guided the refinement, making the process inherently iterative.
BEFORE
AFTER
Before after exploration on existing screen.
Documentation Process
After the exploration phase, our team finalized the fabric that would make up the design system. The system was built on a foundation consisting of colors, shadows, and typography, which then served for developing further components. The component creation followed the principles of Atomic Design, Building the system from atoms->molecules->organisms->templates/pages.
FOUNDATION
COMPONENTS
The summary of what is the content of design system.
Once the foundations and components were defined, every element of the design system was documented with detailed specifications. This documentation ensured that designers had clear guidelines to apply components consistently in their workflows, while also serving as a reliable reference for handoff to engineers.
Documentation and developer sheet produced to ensure easy use both for designer and engineer.
Finally, a series of design reviews were conducted to verify that the components and elements produced by the development team met the specifications and standards set within the design system.
OUTPUT
Result & Implementation
With the design system documented and reviewed, the next step was to bring Biome into the actual product experience. The implementation phase was not just about applying a new visual, it was about proving that Biome could serve as a scalable system and adaptable to different product areas, supporting Bareksa’s growth.
Showcase of final Biome's components and selected screen.
Impact After Release
Following the launch of Biome Design System, we continuously observed how the changes were received and tracked their influence on the platform. Early signs of impact appeared through both user research and market performance:
Improved NPS results, with users sharing more positive impressions of the new design.
+25% increase in daily retention, reflecting stronger user trust and ongoing usage.
Positive user feedbacks highlighting that the app now feels fresher, clearer, and more engaging.
At the same time, I acknowledged that unlike product features/campaign that directly influence business outcome. The success of a design system cannot always be measured in metrics numbers.
Self Learning & Evaluation
Building the Biome Design System became one of the most significant projects I have ever been involved in, where I took the full ownership as the designer in charge. Being part of the journey start from initial idea to final delivery gave me valuable lessons, both in design and beyond that. Throughout the process, I learned that:
The process beyond design processes such as discussions and workshops with stakeholders is just as critical as the design exploration itself. Building alignment and shared understanding proved to be a key success factor.
A design system is a project that never truly finishes, and it should be treated that way. It should be regarded as a continuous, evolving process that grows alongside the product and the organization.
Constraints can trigger creativity and new solutions. Limited time and resources challenged us to prioritize effectively, make pragmatic decisions, and still deliver quality output for the project.
