Design Operations initatives at GoBear (part 1)
Product Design Lead
Operations Processes, Design Systems
2019 – 2020

Why Design Operations at GB

GoBear was a financial product aggregator that provided customers with a place to search and compare insurance, credit cards and lending products.
Market: Singapore, Hong Kong, Vietnam, the Philippines, Thailand, Malaysia and Indonesia.

Specialization and scale

When I joined the company, the team grew to 11 peeps and started our transition from a service model with the design team serving projects in multiple verticals to a squad model. We also had more specializations in our team with UX researchers, product designers and UX engineer. We needed to spend more effort on operations to ensure the team stayed in sync across the board.

Design team org structure

The Product Design team belonged to the larger Product Team and was divided into squads that we called Hives (cause Bear), and organised into 2 business units:

  • Lending
  • Brokerage

Under Brokerage, we were each assigned to a merchandise team or vertical:

  • Travel Insurance
  • Car Insurance
  • Banking
  • Growth

As with all bigger teams and more separated work lanes, challenges popped up with efficiency, consistency, quality and communication. We introduced operations as an additional responsibility that was led by our Product Design Director and me, but shared amongst the team members.

Design Ops by Dave Malouf

Design Ops initiatives

"Design Ops, then, is everything that supports high quality crafts, methods, and processes." – Design Ops Handbook↩︎

I took on the responsibility of leading a few areas of Design Ops with the goal of helping our team do their best work. Borrowing the framework from Dave Malouf, we tackled tools & infrastructure, workflow, governance and people to ensure high quality output and efficient processes. Below are some projects that I worked on together with the team to achieve this goal.

Tools & Infrastructure

  • Transition to Figma
  • Design system refresh


  • File organisation template
  • Design Kit documentation guideline and process

Governance & People

  • Pair design & resources allocation

Transition to Figma


Figma though new had started to become more popular as a design tool around early 2019. As I'd worked mainly with Figma for 1 year prior to joining the team, switching back to Sketch + Abstract + Invision + (sometimes) Zeplin combo had proven challenging. Though I was new, and did not fully grasp or embrace the new team's way of working so for the first months, I approached tooling as something to learn rather than immediately rejected it.

As I hit the 3 month mark of being a part of the team, it became apparent that there was some inefficiency in the way we worked, namely Sketch + Abstract regular disconnect, and the long wait time to sync design work across multiple tools.

With that in mind I proposed to evaluate the way we worked and with the support of our director Jeremy, started with conducting a survey across multiple teams.

Gathering insights

The goal of the survey was to understand tooling usage, how they supported the work of designers and the work between designers, engineers, PMs and researchers; and whether Figma could potentially replace the current tooling suite.

We asked our designers:

  • What tools the design team are using and how they're using them
  • Pain points in communicating and working with other teams
  • Anything missing from the current workflow and process

We asked our partners in product and engineering:

  • What touch points they currently have with design
  • Which design tools they interact with
  • Which feature in these tools they use
  • Other tools they use day-to-day
  • Pain points they have in communicating and working with design
  • Anything missing from the current workflow and process

Workflow & tooling

We found that the design team used multiple tools for different parts of the design process while most of our partners relied on Invision solely to view, comment and inspect the files. Occasionally Sketch was needed for our UX researchers to create persona and for our engineers to export assets.

Design tools touch points of the design team
Design tools touch points of other teams

Pain points

I synthesized the responses from our teams and mapped them into 6 pain points:

  • Not enough design & interaction details
  • Multiple feedback channels
  • Need product design to take initiative in communicating & educating
  • Multiple different tools not working well together
  • Documentation needs to be more holistic
  • Design documents in multiple places
Synthesizing feedback

Problem space

The findings could further be grouped into 2 major themes:

  • Communication process with other teams (how much details, where, how often?)
  • Design tooling and documentation (which tool, how to document localisation/device sizing, share flows along with screens)

Figma like Sketch, is only a tool and it can't help fix a bad communication process or documentation process. However there were certain issues that the tool could definitely aid in improving:

  • Multiple feedback channels
    → Consolidate feedback into one place: comments in Figma for all projects, critics in Figma, feedback on Design Kit in Figma
  • Multiple different tools not working well together
    → Use Figma for all parts of the design process: Figma for sketch, flows, design, prototype, inspect and version control
  • Design documents in different places
    → Consolidate documentation into Figma and embed links into other teams' workspaces: Figma live embed into JIRA/Confluence, embed into Storybook, potential to build an integration to export assets and design tokens to code
  • Pricing
    I also did a price comparison and it proved to save us 50% of our yearly spend on tooling which was an added bonus.

Stress test

It was easy to do a presentation about why the tooling change would benefit the teams. But this change would affect not only everyone but also their everyday work. It was also important to know that everyone was confident if not at least comfortable with the change.

Now that we sparked an interest in Figma, I wanted folks to be able to get a hands-on feel of the software. We hosted a demo/workshop session. This session was structured to go through the core features that we used daily but also address some of the common concerns of new teams switching to Figma.

Stress test plan

We identified missing features in Figma:

  • Version control was still in its early days
  • Component swapping was slightly laggy
  • Couldn't lock child override (more flexible than Sketch but potentially would allow for more detaching of components)
  • Missing some prototyping features like anchor to page

Once the team was familiar and aware of both the pros and cons of a Figma switch. We were confident that we could make an informed decision whether or not to adopt the tool and make the move.

In June 2019, we made the decision to migrate to Figma. 🎉

Positive but also constructive feedback from the demo

Transition plan

A transition and migration plan was drafted and we went through several steps before Figma was adopted as the main design tool.

1. Migrated Sketch Design Kit (the design components of our design system) over to Figma:

We imported the Sketch Design Kit and tweaked it to work in Figma. The first part was done by the design system core contributors to speed up the migration process:

  • global elements (colors, typography, icons, spacing, shadows, elevation)
  • base components (input fields, buttons, navigation and more)

The rest of the components were divided and assigned to the rest of the team members to help them get comfortable with contributing to the Design Kit as well as using Figma.

2. Archived and saved working files from Abstract for future reference

3. Cancelled subscriptions with existing tools, complete projects still on-going on Invision

4. New projects commenced on Figma once the Design Kit was ready on Figma

Our Design Kit after migration

We also informed our partners and started onboarding folks from other teams onto Figma as well as hosted Figma Tips & Tricks sessions regularly to help everyone level up. These sessions were run by our Senior Product Designer, Ivana Todorovsky↩︎.

Guidelines for our partners to join Figma


We followed up on how everything was going after a couple of weeks post migration wrap-up. The responses were positive and it marked an improvement in the way we worked, especially with sharing the design and user flows in one place to communicate with our teams.

More spreadsheet, I mean, feedback from the team after having used Figma for a while

Room for improvements

A couple of months passed before we could run a retro of the Design Kit but upon reviewing the way the Kit had been set up and how the team had been using it, we came across new challenges:

  • Some parts were broken from importing over from the Sketch Design Kit, and since Figma has some fundamental differences from Sketch, the same component structure we used for Sketch no longer made sense in Figma
  • The way Figma worked and how our system was set up was inconvenient when updating component (if a component from File A contained or needed changes made in another component in File B, a designer needed to publish the components in file B before they could continue working on File A)
  • Our Design Kit structure was different from the way the components were structured in code making it difficult for our designers and engineers to navigate as well as use the right components

With that in mind, we kick-started a design system refresh plan.

Design Kit feedback and improvement proposals

Design system refresh plan

With the challenges identified post Figma migration. We decided to work on "phase 2" of continuous improvements to the Design Kit and Design Pantry (our design system in code).

Additional requirements

An additional requirement emerged as we reevaluated our icon set which were designed by multiple people and decided to use the standard Material icons instead for consistency.

The product strategy also shifted which introduced uncertainty that warranted changes to many components in the near horizon.



Sync Design Kit with Design Pantry

✺ Structure
✺ Naming convention


New grouping of components into fewer files

✺ Global styles
✺ Icons & logos
✺ Illustrations
✺ Components
✺ Templates


Redesign components from the ground up with Figma

✺ New icon set from Material design
✺ Rebuilding base components first
✺ Only rebuilding components we regularly used (form fields, buttons, cards) as a major part of the design system may become obsolete with the new product strategy

Automate audit & sync up with engineers

In order to start syncing up the Design Kit in Figma with the Design Pantry in Storybook we needed to audit existing components in both Figma and Storybook.

I worked closely with our UX Engineer to automate this process with a Google script. The script allowed us to fetch all files, pages,component names and descriptions from our Figma Design Kit into a Google sheet.

Google script helped automate the process of auditing Figma Design Kit components

We then checked the Design Kit components against the components existing in Storybook and:

  • Identified action steps for each of them (Redesign, Deprecate, Add)
  • Assigned new Grouping Name to components in the Design Kit and Design Pantry

After a few rounds of feedback with our UX engineer, we had a final "dashboard" with the new structure, name and status of all components to keep track of our refresh project progress.

"Dashboard" to manage our refresh project


The project was on-going at the time we carried out the transition plan. We ran into common issues of small team and shared design system resources (people) where carving out time for the transition needed to fight consumer-facing and higher priority projects.

We did however manage to set up the new structure on our Design Pantry as we updated Storybook to a new version, which enabled a better search experience for both our engineers and designers.

We believed that with the improvements, and with Design Kit closely mirroring our Design Pantry, we'd be able to alleviate barriers to contribution, help the team reduce inefficiency in adopting the design system.

Old vs. new Design Kit structure