June 4, 2023

Bootstrapping an enterprise design system in a scale-up environment

As part of our enterprise product stream, I designed a design system for consistent interaction and visual language for our product (along with the many other benefits we all know about). Being the only designer on this project, it was challenging to create a design system in parallel with my day to day workload leading the platform's design. As a result, there wasn't much time to put into a structured design operations process, audits, and regular QA and component inventory management. We created and implemented the design system foundations and now with more designers and frontend developers, we are trying to develop it further in a more structured way.

Here are some of the things I learned from my experience:

Audit your resources before auditing the product
During the design system creation process, it is essential to choose an approach that suits the team's available resources and time constraints. This approach can streamline the creation, testing and maintenance processes.

Find your design system frontend developer
Collaborating with a frontend developer during the design process is crucial to optimize components and ensure design quality assurance. This collaboration saves time and helps implement the design system smoothly.

Start having the technology framework discussion early
It is vital to initiate discussions regarding the framework and technology options with the development team from the beginning of the process. This approach ensures that the chosen technology and framework can fully support the design system.

Clinically opt for a small set of components
To maximize efficiency, prioritize clinically essential components at the start of the process. A small set of essential components can be created first to ensure accurate, usable components.

Choose a reference library for components
When creating a design system, defining a reference for pre-existing components and interactions is very helpful and there are several available in the market. Reference framework makes it easy to add new components by modifying existing components and using them as a foundation for custom components.

Write up a short guideline for your team to create component
When a regular design system inventory is not feasible, a minimum of a clear set of guidelines on help different teams update the design system using the a common set of principles asynchronously.

Low effort - high impact of an effective type scale
An effective and visually appealing design system relies heavily on a cohesive and uniform type scale. Spending time to establish a solid typographic foundation can make a huge difference in the overall look and feel of the interface, while also making information easier to read and understand.

Creating a color scheme with a limited palette
By simplifying your color scheme and using a limited palette, you can avoid the inconsistencies that often result from overly complex color scales. Instead of having a huge color shade card at your disposal, consider reserving it for special cases and keeping your design system library focused on a more refined selection of colors.

Demonstrating components with sample screens
One way to help people get started with your design system is to provide a library of sample screens that showcase how components can be used within a broader context, rather than solely focusing on documenting individual components. This can be especially useful if you don't have time to write comprehensive documentation on each and every use case.

May 11, 2023

Breaking down silos among designers

My design group consists of four designers working across different product teams, working on multiple product streams simultaneously. In a scale-up, each product team focused individually on their team goals. In this situation, designers have limited time to communicate and collaborate with each other, which leads to the following challenges for designers.

  • Finding it difficult to connect and discuss their work at a convenient time.
  • A lack of awareness of each other's work, preventing them from leveraging each other's learning.
  • A lack of time resulting in fragmentation in common design operations such as research, product journey, and Figma organization.
  • Insufficient time for designers to provide constructive feedback on each other's work.

These three tactical initiatives helped me establish a continuous cross pollination between my design groups and break these silos. 


#1 Creating one Figma file for all design critiques
The designers place their work into this file when they need help or critiques. Over time, this has become a space where designers often share their work in progress. We've started to see that it has become quite common for them to collaborate closely on the designs in this file. Our design group has moved from struggling to set up time together to reviewing each other's designs on a regular basis. Collaboration is asynchronous, and no immediate response is required if an urgent need is not stated. 


#2 Holding in-person design forums every month or every two months 
I started this with a very low threshold where designers had one day in a month to sit and work in the same space. If possible, they could talk or present something relevant at one time. This initiative was called Nebula. Today, Nebula meets regularly to discuss topics and actions. Now we often say, "We should call this a Nebula.". Now for upcoming Nebulas, we suggest topics and actions. This day is to talk and get things done together as much as possible. We have already made presentations for design events, set up proper Figma organization, created common research templates in Notion, and presented our project and methods within our team during the Nebula days. 


#3 Idea Space: Preserving and exhibiting creative explorations 
Designers often create a lot ideas which never go into implementation. They remain in different files and eventually be forgotten. In the "idea space" (placeholder name :)), designers can add mockups and screenshots without excessive documentation. I'd like to see if we can make this a repository that people in the organization can use to bring back ideas or collaborate with authors. It's a new initiative, and I'm still shaping it. I'll update as I see the results.

September 22, 2022

Reflections on design in engineering-driven teams

Collaboration between design and development is crucial to creating systems that effectively meet users' needs. It requires mutual effort from both teams to create successful products. These are some of my reflections having been a solo designer in an engineering heavy team:


Continuous discussions between designer and developer on feature outcomes
As a designer developer team, it is crucial to discuss the questions about a system's users, not just the technical feasibility of the feature. By using the desired outcome as a compass to guide the discussion, design and engineering can engage in more open and creative exploration of possible solutions, rather than simply seeking to implement designs accurately.

Starting with a simple design system setup
Design infrastructure does not have to be complex; it can start with a basic design system. An uncomplicated design system can still be effective and provide context and support for UX design.

Doing design QA with live links
Set up a internal system for parallel design QA of the feature as we implement is more effective than using stating images in Github towards the end of the process. This approach allows for testing the feature in its entirety rather than just focusing on visual design inconsistencies, which can lead to more informed and effective adjustments to the proposed UX changes.


Building effective collaboration through small and low-risk tasks
Collaboration on small, low-risk, easy tasks provides the team with an opportunity to build a rapport. This has helped me in building trust and confidence in their abilities to work together on multiple occasions.

Conduct interviews with other team members
Involving engineering in user interview sessions has served as a means to build common understanding as well as bring a different perspective on the collected data. By including engineers in user interviews helped in bringing multiple lenses into a conversation and surface valuable insights.