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.
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:
Under Brokerage, we were each assigned to a merchandise team or vertical:
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, 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.
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.
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:
We asked our partners in product and engineering:
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.
I synthesized the responses from our teams and mapped them into 6 pain points:
The findings could further be grouped into 2 major themes:
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:
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.
We identified missing features in Figma:
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. 🎉
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:
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
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↩︎.
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.
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:
With that in mind, we kick-started a 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).
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
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.
We then checked the Design Kit components against the components existing in Storybook and:
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.
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.
