Design Ops

When I joined the Shippabo team, there were no designers on board. Alongside another fellow designer, we collaborated to establish design operations and build sustainable practices in order to amplify design’s value and impact at scale.

Context

Shippabo design team has been using 3rd party UI Kit ‘Tailwind’ to revamp our legacy platform. However, as we build our new platform, there has been multiple misaligned styling with the tailwind & Shippabo made components.

Additionally, due to the fast design cycle before the launch, designers couldn’t maintain to update the design system components and end up making redundant components with similar styles.

My Role

Design System Manager - Design system & Token research, Reconstruct design components with proper layouts, Leading collaborative meetings with the engineers, Create design guidelines, Finalize design system governance process

Timeline & Status

Jan 2022 - Nov 2022

Impact

We enhanced the overall design operation by creating guidelines and iterating operation process. As a result, we saw great improvement in collaboration efficiency.

Design Process

How it started

Define Problem

Investigate on the current experience

It all started with a simple observation: as our team expanded, we faced challenges ensuring our designs smoothly transitioned to development. When there were just two of us, staying in sync was manageable, but as a third designer joined, it became clear that we needed a more structured approach to keep our work cohesive.

In a candid chat with my design manager, I highlighted the need for a more defined design process. Their support paved the way for me to take ownership of our design systems, aiming to streamline our workflow and create a smoother design-to-development journey.

I took the initiative to explore our designers' workflows, aiming to identify areas where we could collectively enhance our approach. To gather insights, I crafted a brief survey to delve into the processes of each designer, including my own.

These are the insights of the survey:

Rearticulate

Starting point

After the survey, I was able to share the result with the team and we all came to conclusion that these are the 3 problems we wanted to focus:

  1. Lack of visibility around existing components and experiences leads to misalignment in designing a holistic user experience in each projects.

  2. Unestabilished atomic colors and text styles leading to inncoheisve UI design and making the experience inaccessible.

  3. Unestablished design system operation process leads to the creation of repetitive design components, which in turn contributes to a disorganized design system.

Solution 1

Using a live guideline document as the definitive source of truth.

Following numerous design meetings and guideline research, we opted to establish guidelines for core components influencing the platform's global user experience. Subsequently, we constantly communicated and updated rules and variants impacting these components.

Result: By utilizing these structured guidelines as a foundation, we attained a harmonized user experience throughout the platform. Our designers consistently updated the guideline whenever new variants or experiences emerged, expanding the component's use cases.

Solution 2

Utilizing design tokens to streamline the design across diverse elements by centralizing key design attributes.

Recognizing this issue, I took it upon myself as a passion project to investigate and streamline the color palette and text styles. Collaborating with a principal engineer, we audited the existing platform's colors and text styles, grouping and simplifying them for better accessibility.

Leveraging Figma's 'Variables' feature, I constructed a variable system, ensuring ongoing communication with the design team to incorporate their insights. After a two-week change management phase, we successfully transitioned to the simplified palette and text styles, phasing out the previous style system.

As part of this initiative and with available time, I volunteered to adapt the changes to existing components.

Result: During the final design meeting, I presented the changes, demonstrating how to efficiently utilize these variables for streamlined design. The design team embraced the new token system, enabling more efficient workflows, while engineers appreciated the simplified attributes, resulting in a successful and appreciated transformation.

Solution 3

Throughout a series of design meetings, we delved into critical topics concerning redundancy:

  • Ways to proactively prevent repetitions

  • Strategies to spot new components within our ongoing projects

  • Ongoing action items

After thorough discussions, our design team unanimously agreed to tackle redundancy by strictly adhering to our defined design governance process. Consequently, I took the initiative to develop templates, simplifying reference points for our design team.

Using a checklist to align the process and standardize to push consistent design quality.

Implementing a new process came with its challenges. Our problem-solving efforts didn't seamlessly integrate initially due to the dynamic nature of design within our startup environment. This led me to question whether our governance process might have been too robust for our small team of three designers. Moving forward, my goal became to research and benchmark how similar-sized design teams address comparable challenges, refining our approach for future projects.

Measuring Success

Not the end but…

Even as our design system and operational processes evolve, I opted to gauge our team's success through quantitative feedback

Based on the final survey, we witnessed a 23% improvement in overall collaboration efficiency between designers through the creation of streamlined guidelines, optimized components, and scalable atomic design structures.

Takeaway

Building something from 0 can sometimes be easier than fixing an already established system. I came to realize that implementing a new way of operating within a design system requires a significant investment in change management and continuous education. Understanding each team member's unique style while keeping an eye on where we're heading was key.

Fortunately, I had the privilege of working with exceptional designers in my team who generously shared their insights. Working together, listening to each other, we managed to pull off a pretty slick design system! While my time at Shippabo comes to a close, I'm grateful to witness the ongoing evolution of the design system and operations.