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.
Team: Self and design mentor
Role: UI and UX Design
Duration: 1 month
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.
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.
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
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.
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.
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
After conducting 5 sessions with people, there were some big areas of friction that I have addressed below.
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.
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.
⅘ 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.
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.