Increasing Designer & Engineer Productivity Across Verticals Through Scaling Passport Tiket Design System

Role

Design system designer

Timeline

Q1 2023 - Q1 2024

Overview

tiket.com is one of Indonesia's leading online travel platforms serving 18M+ users. As part of tiket passport design system team, I contributed on multiple initiative that increase productivity with minimum cost and strengthen foundation across 8+ products and 50+ projects.

WHAT WE DO

How does design system at tiket.com work?

We are a dedicated design and engineering team focused on building core components used across product verticals, so each team can spend more time solving real user and business problems. We do this through two things.

DIRECTION

Increase productivity and strengthen collaboration

Here are two main OKR on 2023-2024 that we try to achieve through multiple initiatives.

INCREASE PRODUCTIVITY

How might we increase development speed, grow core component adoption, and scale the design system to save overall time and effort across teams?

1

Faster handling multiple component development through Kanban board

Following the sprint format like vertical won't increase our development speed. Since we usually only ship single component, we decided move to Kanban format that not constrains with sprint format.

2

Ease handover development process through engineering-approach component documentation

To help engineers understand our design requirements better, we designed our documentation by their language. We specifically defined each elements capabilities and constrains. We also put detailed interaction documentation and prototype to visualize how the component would interact.

3

Push component adoption by consistently sounding updates to vertical designers and engineers

After component development done and doing user acceptance test (UAT) we share the updates through on personal message and channels to ensure it's adopted by verticals.

4

Standardization guidelines to scale design further across verticals

We often come across patterns and frameworks worth replicating across teams. When we do, we document them properly then run feedback and iteration sessions with vertical designers to refine them into shared guidelines.

So when a similar design problem comes up in the future, teams have a reference to work from instead of starting from scratch every time.

5

Reduce miss unexpected implementation on iOS and Android through improving sample app design

Sometimes designers and QA miss edge cases while testing mobile components on sample app that previously wasn't built to handle stress testing properly. Miss edge cases would be another development ticket that would drag down our productivity.

We redesign sample app to each element can be changed to it's variant easily. Eventually it help us to found edge cases more faster and easier while testing mobile components.

STRENGTHEN FOUNDATION

How can we improve collaboration and other foundational things that will help design and engineering scale further going ahead?

6

Support lot more vertical projects faster through improving our collaboration workflow

Over time as more projects came in, the design system started receiving lots of unaligned requests that made collaboration ineffective.

We initiate a retrospective workshop with all vertical designers to capture what could be better on our collaboration process.

The result is there's no clear early stage alignment & development status updates that made some back-and-forth discussion effort.

We take our time to brainstorm some ideas and do trial-and-error on how can we process the needs faster and keep the transparency to vertical designers?

We finally come up with final solution "Collaborative Space" where vertical designers can submit through forms about project context and discussion scope.

Through open public google sheet, design system designer enabled quickly responded to the early captured context and giving the diagnosis while vertical designer can always check the development status updates.

Even after few years since it's implemented, it became our common collaboration standards. No more unclear meeting set, quicker decision made, and full transparency on component development updates.

More vertical projects supported way better and faster.

SHARING ON WHAT WE WORKED ON

Passport tiket design system website

It's not related to OKR but our big dream is to share what we worked on (especially our documentation) to public. After one month of designing and building on Framer tiket.design/system is finally live!

We shared our foundational style guide with some examples of how it's applied across the tiket.com app.

We also displayed our component documentation "tech spec" that took engineering approach of defining each of elements capability, constrain, and how it interact.

Few days after released, it got quite some impressions which made us super happy and excited to put more stuff for next website update!

RESULTS

Throughout the year, we managed to increase overall team productivity and supported many projects while maintain consistency and scaling things further