System Thinking Zero to One

Led the mobile team to create its very first mobile style guide and later a design system app to support the mobile first product revolution of The Knot.

Type of project

Creation of iOS & Android App Pattern Library in support of the mobile first product evolution

Time

Dec 2017 - Jan 2018

My responsibilities

Scope and Planning, Stakeholder Communication, Led a team of 2 iOS designers and 3 Android designers (offshore) to phase 1 project completion under one month. The team did 90% of the actual pattern work. I guided the team effort to design the process and the standard, helped remove the various constraints so the team could get the work done and feel proud of it : -)

Building relationships in advance:

In the company product culture, we actively practiced the 3-leg stool dynamic for each product squad. While each product designer reports to a design manager, their PM partner was in charge of all the project timeline, sprint schedule and the business KPIs. Therefore, the PMs largely influenced the designer’s weekly priorities and how product designers actually spent their time. With an urgent request like such, I figured I would need the support and buy-in from those PMs first.

For the next 2 days, I scheduled multiple short 1:1s with the PL and all the PMs in the zone to KUBA (Know, Understand, Believe, Act) them the mission and manage their expectations. Based on my rough estimate, a 25-30 hour work contribution from each of the product designer in the next 4 weeks would be necessary to get the job done. I asked permission to take designers away from their squad work on Tuesday & Friday afternoons for the next consecutive 4 weeks. Not all PMs were enthusiastic about the pattern work because they hadn’t seen the impact, but they trusted me to give me the benefit of the doubt, hoping I would make it valuable for the mobile app design process.

I quickly drafted an email to outline the strategy, the impact to squad work and expected outcome, sent it off to the entire mobile zone so everyone was in the known. The project was ready to take off the ground.

Serendipitous Ally:

The skepticism from the PMs led me to question of the true impact of this effort - “How might we build a design system to not only make the UI more consistent but improve the development efficiency?” “What can we do differently than the web pattern library process?” It turned out iOS engineers were struggling with the same thing since the rapid expansion of the mobile zone. Several iOS engineers offered to help me on this project and delivered a pattern library app with coded building blocks, it’s something they believe would benefit the entire app development team.

Scope negotiation:

Since the timeline is so aggressive, I intended to aggressively negotiate the scope down. Quality is more important than quantity when it comes to design system thinking, plus all the designers were already pulling overtime since early September. My manager, the VP of Product Design, obviously wanted us to deliver the full spectrum of app patterns, atoms, molecules, organisms, the whole shabang in preparation of the mobile-first re-organization. At the same time, he was also the most empathetic and people-first manager I had ever worked for. With my direct report, Jaclyn’s help to prioritize the various pattern elements, I pitched the interactive pattern app idea to him and proposed a 3-phase approach that limited the scope to mostly atoms and molecules only. My manager praised my effort to protect my team’s morale and set realistic expectations upfront, he signed off on the plan and agreed to help manage the expectations from execs.

Making it easier for the team:

Now that the PMs were on-board, the engineers were supportive, the scope was decreased, it’s time to deliver results. My thought process mostly followed Lewin’s famous Force Field Analysis (I’m a geek when it comes to behavioral psychology :)

Any given behavior or situation is an equilibrium between the driving and the restraining forces. If you want to achieve change in behavior, there is one good way to do it and one bad way to do it. 

The good way to do it is by diminishing the restraining forces, not by increasing the driving forces.

With the framework in mind, I tried to create the most productive environment for the designers to contribute to the pattern work. Blocking time off on their calendar, booking conference rooms to maximize distraction-free time, creating a shared template for pattern documentation, recommending the committee approval process, and lastly keeping track of everyone’s progress to move the needle efficiently.

Designing the workflow:

We started off the work with a spreadsheet listing out all the pattern elements, every pattern element had an estimate T-shirt size to represent its required effort (xs, s, m, l). Each designer then took turns to pick out one specific pattern element they would like to work on. After a few round of volunteering, I assigned the remaining pattern work to the designers based on their bandwidth, expertise and the relevancy of their recent design work.

To manage a multi-step process from end of end, the spreadsheet quickly became inadequate. I brought back my favorite Kanban tool to help keep everybody on track.

What the team accomplished:

Keeping it living and breathing:

Like all the other software products we work on, Design System is a product that requires continuous iteration to stay relevant. These patterns are being updated as the team run into new user cases and design more elegant and scalable solutions. Soon after we presented the phase 1 of mobile app styleguide to the entire product org, we partners with both iOS and Android engineers to develop the pattern app for each platform so the building blocks became reusable shared code patterns for the engineering team. I’m proud of the team hussled together to build the momentum so quickly, and I’m proud to have led this movement to support the continuous expansion and collaborative efficiency of the mobile app development.