Work

Experience

Work

Experience

Start a Project

Aulia Anisa👋🏻

Work

Experience

Start a Project

Best for Less Design System

Best for Less is a bazaar/discount store concept that will redefine Bukalapak Marketplace, focusing on the 1P model with the majority of products sourced from our own 1P stores.

In Best for Less, we wanted to introduce a fresh and more playful design approach, because the target audience is moslty young women. Meanwhile, most of Bukalapak's existing users are mostly male. That’s why we decided to create something new and more engaging with a different design style.

See the design here

Company

Bukalapak

Launched

2024

Tools

Figma

Alignment

I joined the Best for Less project midway, after the team had completed the benchmarking and conceptualization phases. My role focused on refining the design system to ensure consistency and scalability as development progressed.

However during the development process, the engineering team had difficulty identifying the latest styles because there were inconsistencies across different screens.

After understanding their needs, I decided to create a dedicated component library for Best for Less. This helped make the handoff process easier for the engineering team and also supported the designers in building a more scalable and consistent product.

However during the development process, the engineering team had difficulty identifying the latest styles because there were inconsistencies across different screens.

Challanges

I came into the project halfway through and needed to understand everything from the ground up."

Build Token for Design Library

The first step I create the design tokens for the basic visual elements—such as color, typography, and spacing—that ensure consistency across the product and make it easier to scale design decisions.

Here’s what I started with:

Colors: Defined primary, secondary, neutral, and status colors to reflect the fun and youthful tone of the brand.
Typography: Chose font styles, sizes, weights, and line heights that align with the design that we made.
Logo: Set clear rules for logo usage, sizing, and safe space to maintain brand consistency across screens.
Assets: Organized reusable icons, illustrations, and images specific to the Best for Less identity to speed up the design and development process.

By building this foundation, I made it easier for the team to maintain a cohesive visual language and streamline collaboration between design and engineering.

Here’s what I started with:

Colors: Defined primary, secondary, neutral, and status colors to reflect the fun and youthful tone of the brand.
Typography: Chose font styles, sizes, weights, and line heights that align with the design that we made.
Logo: Set clear rules for logo usage, sizing, and safe space to maintain brand consistency across screens.
Assets: Organized reusable icons, illustrations, and images specific to the Best for Less identity to speed up the design and development process.

By building this foundation, I made it easier for the team to maintain a cohesive visual language and streamline collaboration between design and engineering.

See the design here

Create component

After setting up the design tokens, I moved on to building the basic components that kept showing up across different screens. Things like buttons, checkboxes, snackbars, capsules, confirmation dialogs, and etc.

These might seem small, but they play a big role in keeping everything consistent—and they also made it easier for both designers and developers to work faster without reinventing the wheel every time.

example component I create:

Button

I created button components with all the necessary states to make sure they work well in different scenarios. This included default, hover, pressed, disabled, and loading states. I also made sure the buttons were flexible enough to support different text or icon only—so they could be reused easily across the product without needing to redesign them each time.

Checkbox

I also designed the checkbox component, covering all its states—unchecked, checked, disabled, and error. But I didn’t stop at just the visuals. I documented when and why to use a checkbox, including examples of common use cases

Header

Because Best for Less uses a different header style compared to the main Bukalapak app, I created a dedicated header component. This made it easier for the team to identify and manage different header states—such as default, with search, with back button, or with filter options—ensuring consistency and reducing confusion during development.

Conclusion

Overall, this project strengthened my skills in design systems, collaboration with cross-functional teams, and thinking ahead to build for scalability and clarity. I'm excited to keep applying these principles to future design challenges!

Full design here

I'am Aulia

Product Designer from Indonesia

I'am Aulia

Product Designer from Indonesia

I'am Aulia

Product Designer from Indonesia