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.

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

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.

Impact

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

How we tackled the issue

Component Guideline Documentation

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

‼️ Challenge: Because designers were working independently on their respective projects, aligning on the appropriate usage of components across various scenarios became challenging. Consequently, we observed similar experiences being presented using different components, potentially leading to user confusion within their journey.

✨ Process: Following numerous design meetings, 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.

Design System Governance

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

‼️ Challenge: Identifying numerous redundant components scattered across individual local projects prompted us to consolidate them into a unified, holistic component.

✨ Process: In a series of design meetings, we deliberated on critical aspects surrounding redundancy:

Methods to prevent recurrence
Suggestions for identifying new components within existing projects
Current action items

Following extensive discussions, the design team reached a consensus on mitigating redundancy by adhering to the outlined design governance process. Subsequently, I initiated the creation of templates to facilitate easy reference for the design team.

🌈 Result: While initiating a new process posed challenges, our collective effort in problem-solving didn't translate entirely into practice initially, given the agile nature of design in the startup realm. Reflecting on this, I pondered whether the governance process might have been too weighty for our small team of three designers. For future endeavors, I aim to explore and benchmark how other (similar size) design teams tackle similar challenges to refine our approach.

Design Tokens

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

‼️ Challenge: While using the 3rd party UI Kit 'Tailwind,' designers had a surplus of available colors and text styles, particularly within the 'grey' spectrum for text design, leading to incohesiveness and accessibility issues across the platform.

✨ Process: 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.

✴︎ Takeaway ✴︎

Building something from 0 can sometimes be easier than rectifying 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. It is crucial to comprehend the unique design styles of each team member while aligning them with our future operational objectives.

Fortunately, I had the privilege of working with exceptional designers in my team who generously shared their insights. Through their valuable inputs and collaborative efforts, we ultimately succeeded in creating an effective design system, with tokens being introduced as the next step in our journey.