InVision Design System Manager (DSM)


A conceptual redesign of Invision’s Design System Manager (DSM) to make it easier for designers and developers to collaborate on designs through style guides.

See Prototype

Role:  UI and UX Design
Duration: 1 month

Background

32% of designers who use/contribute to a design system use InVision's DSM. After learning more about designers’ workflows - I discovered that design ops aim to make the design system the source of truth, have it be more transparent and less of a documentation tool.

Solution

A complete redesign of the InVision Design System Manager (DSM) so that it is easier to create a library, and people can comment and see past versions.

For the project, I conducted interviews and secondary research to learn more about the challenges and goals of various members in a product team. I also learned about the challenges and goals designers had when it came to creating or managing a design system.

What I found

  • 52% of all survey respondents mentioned adoption difficulties as one of the main reasons why their design system failed. The engineering and product team did not use the design system, or did not find it valuable.
  • One interview participant mentioned transparency as one of the key goals for him.
  • ⅗ participants mentioned having difficulties explaining designs and having to hand-hold developers so they understood the why behind design decisions.
  • They also mentioned designs not coming out the way they expected because of changes in spacing, padding, etc.
  • ⅖ designers used Figma and also mentioned how they also like having the components directly integrated with the design/prototyping tool.

What I did

  • Added in a commenting and versioning feature so that there is a clear visibility into which component someone should use, and the ability for someone to see a past history of all comments.
  • Designed an integration for Figma, Adobe XD, and Invision Studio so that the DSM can be used easily across teams with different prototyping/wireframing tools.
  • Automatically made a documentation section for design ops to fill in.
  • Ensured that the design of each component can be linked to a live component (based off of app) or inspected so developers can easily find the code needed for the design.

Final Output

I created high-fidelity prototypes that let users:

1: Go through a walkthrough on InVision's Website

2: Create a new design library for InVision and add live components (with Figma)

3: Accessing the components and library (with InVision Studio)

Full Design Process

Research

Some research was done initially to learn about the workflows and goals/challenges of designers, developers, and design ops. I used what I learned about the goals/challenges of design ops, and how product teams collaborate on designs to redesign and add more features that would benefit multiple roles.

I interviewed 5 participants (designers, developers, design ops) who work in product teams of various sizes. I ultimately learned about the goals and  challenges each of them face, and how they work today.

Through secondary research, I also discovered a survey that asked why respondents used the tools they did, why they created design systems, and the challenges they had.

Persona & Empathy Map

After chatting with 5 people in product teams, I created personas for the 3 main roles that I can see using InVision DSM the most.

See Design Ops Charlie, Designer Libby and Developer Jamie. In a product team, the designer aims to have features and designs be built in a way they envisioned, and developers want to understand the designs given so they can build something technically feasible and matches what the designer wanted. They both have challenges when it comes to the developer understanding the prototypes given.

The design ops person aims to make sure that the design system solves their problems. There is an opportunity to design around the goals of the design ops person, that solves the problems of a design team.

There needs to be one source of truth between code and design, and the design system should be easy to use, transparent, and merges components thoughtfully. Ultimately InVision DSM should make it easy for a product team to manage and maintain consistency across development and design.

Design

Design Goals

There is opportunity to redesign InVIsion DSM so that it’s easier to onboard and use the product, with features that show transparency and clarity across different versions of design.

User & Feature Flow

Using what I learned from research, I created a user flow for the 3 main roles, and how they would use Design System Manager as someone who is looking for a component, or as someone who is actually creating/updating a design library.

Sketches

For the first iteration of InVision DSM, I sketched out what the flow for main sections of platform would look like.

5: Storybook live component syncing to Design System Manager

* I assumed that syncing a live component via Storybook would be the same thing as syncing from a design tool. However, I realized that live components are generally linked to a design component that is already created, so syncing via Storybook is done after syncing from a design system first.

Testing & Evaluative Research

Testing & Research Goals

I created & tested the high-fidelity prototype to to see if there were any friction points and areas of confusion that might prevent a user from either creating a design system or using the DSM.

The users were asked to pretend they were:
1) Creating a library and adding components using DSM on Figma
2) Adding a component and navigating to the comments and versions section of the DSM

Top Findings

After conducting 5 sessions with people, there were some big areas of friction that I have addressed below.

Getting Started

A sample library with instructions was shown when a participant wanted to access their library. ⅘ participants found this to be confusing, and was not expecting to see this. They found it difficult to create a new library when they saw the sample library and wasn’t sure what to do next.

I decided to redesign the workflow so it’s easier for someone to create a library and be able to access the sample library as a secondary action.

Before

After

Live Components

Live components (which are interactive coded components from the app) can be synced from a component development tool called Storybook. Participants were confused to what live components were - so a section was added in to explain.

Accessing Components

For a user to access a component for a project in InVision studio, they would have to go into the component library and manually add it to project.

However, ⅖ participants mentioned that they would expect to already see the components from the library synced in their project since both the DSM and Studio are owned by InVision. A change was made to the flow of adding components to be more intuitive.

Before

After

Comments

⅘ participants had trouble accessing the comments section for a component in the library because they missed the comments icon. The layout of a library component was changed so it’s easier to see the comments section.

⅖ participants also mentioned wanting to see new comments - so I designed a way for someone to see if there were any new comments on a component.

Versioning

There was a section for each component called ‘Versions’ where users could compare the current version with a previous one. ⅖ participants did not know what ‘Versions’ could be since version history was shown on the left-hand side.

1 participant also mentioned being able to clearly see the current and past versions when comparing them.

‘Versions’ was renamed to ‘Compare’ and a new design was created after some iterations.

Reflection & Challenges

The conceptual creation of the InVision DSM was challenging for a few reasons.

The number of people I’ve talked to who actually used a design system in the past was limited. If I had more time, I would have engaged more in the design community to learn more from those who have used design systems or InVision DSM in the past.

I did not have full enterprise access to InVision. This meant not being able to fully see how some features work today - including the live components feature. Luckily, InVision had a great help section with lots of gifs of what different features looked like.

Finally, thinking through B2B software is a lot more complicated than a website or consumer app. There are lots of differences in workflows between people that you would have to consider. Due to the limited timeframe for this project, there were many small details in how one workflow would affect later workflows. This is something that I had no designed due to the sake of time. In the future, I’d like to revisit this project from a new perspective and think small things through in more detail.

Other Projects

Retrofit Travel

Retrofit Travel is an e-commerce business that wants to redesign their website. The website was redesigned to focus on the wants of the traveller who does research online for high quality products.
Read More

ChompChompNow

ChompChompNow is a mobile app that was designed to help people find restaurants and decide where to eat at with their friends.
Read More

Kaus

Kaus is a conceptual insurance company with a responsive e-commerce website that allows people to get a quote and buy insurance online.
Read More
2019 - Catherine Gui