Building the platformOS Design System with Figma - Part 1: The UX process
Tags: ux, figma, process, designsystems
Published: 2020-08-10 12:28:52

In this series, we show you how we use [Figma](https://www.figma.com) - the end to end design platform for teams - for our UX, UI, and developer processes when building the platformOS Design System. 

##In this three-part series
__Part 1 The UX process__
The __strategic reasons for building a Design System__ and how it overlaps with our vision for the platformOS Partner Portal. 
Learn about the reasons for using Figma for our Design workflow.
We introduce the __UX processes__ and how Figma brings together the information architecture (IA), screen flows, wireframing, prototyping, and usability testing in one place. 

__Part 2 The UI process__
__Why__ we chose Figma to create our Design System. We discuss Figma’s Team Libraries, the __collaboration__ between designers, teams, and the client, and we walk you through our __UI processes__ using this tool. 

__Part 3 The developer process__
We describe developer handoff via Figma and the __implementation of the Design System__.

##Why build a Design System?
You have probably heard and read about Design Systems as a best practice to follow for a while now.  We dived deep into this method early on to explore if it’s the right technique for us to use in our upcoming projects.

First, we identified the main benefits of building a Design System:
- __Increased efficiency:__ 
By building reusable components you don’t need to create similar components from scratch every time. Components become part of a system of items where each item serves a different purpose.

- __Better consistent:__
When you build a component you use a set of principles and rules that makes the whole system consistent.

- __Better communication:__
Creating a unified Design System will speed up the design process while also helping to build bridges amongst team members. As [Inès Serizer](https://uxdesign.cc/what-the-heck-is-a-design-system-c89a8ea73b0d) states, UXers have to serve all of the users. Not just those who are buying the product, but also the team within the organization. 

- __Easier asset and code management:__
Time invested in creating and maintaining the system pays off in the form of a clean codebase and easy to manage design assets. When a team decides to update certain elements this process makes it fast and easy by its structure. 

- __Common truth:__
The Design System works as a knowledge base that makes it easy to learn,  collaborate, or share. Of course, this also means that the Design System should be easily accessible to all team members.

- __Increased development speed:__
If you follow all the rules it helps the company to build products faster at scale.

[Brad Frost](https://atomicdesign.bradfrost.com/), the author of Atomic Design, summarized the strategic benefits of Design Systems with one great example: _On the way, every organization realizes that bulldozing their entire website and replacing it with a New-And-Shiny website every three to eight years isn’t (and never was) an optimal solution. So you’ll need to find an_ __adaptive system__ _that is_ __efficient__ _and_ __scalable__ _and_ __can evolve with time__.

###Our vision 
Our goal was to redesign all platformOS related sites including the marketing site, the documentation site, our work-in-progress Community site and the platformOS Partner Portal - an online interface where our Partners can create, manage, and configure sites built with platformOS. In the case of the Partner Portal, we ship new features and updates often. It became obvious that in the long run we need a Design System to iteratively improve the experience. It made it possible to better address user feedback and keep up with the ever-shifting web landscape. Our teams could adopt new parts of the system as they became available, which felt less daunting and disruptive. We wanted to make onboarding easier for new team members, too. Besides, this way we could provide a __comprehensive, easy to use resource__ for the platformOS target audience; developers and Web Agencies like you!

##Why do we use Figma?
Our main goal was to find a tool that brings together all UX/UI related tasks in one place efficiently by making it possible to involve all the members of a cross-functional team. 

In the next paragraphs, we introduce how we adapted Figma to each step of our UX design process:
- Workshops
- UX Design and Prototyping
- Testing

###Workshops in the Ideation phase
At the beginning of each project, we need to develop a common understanding between team members/stakeholders/users/etc. to clearly see __what the problems are that we are solving with our product__. After this, we can use several workshop methods to gather more data and clarify the vision. Depending on the type of workshop we are running, there are different goals and different kinds of UX deliverables to produce. So it was important to __select a tool that was flexible enough__ to organize a large amount of information in different ways. Besides other great tools like [Miro](https://miro.com/) and [Mural](https://www.mural.co/), we found that Figma can also work as a workshop tool. It provides [templates](https://www.figma.com/templates/) to speed up the preparation part and the number of templates is continuously growing.

![alt text] (https://blogimages.staging.oregon.platform-os.com/assets/images/blog/figma1/1.png "Figma integrations")

Because we work as a fully __remote team__, we wanted to find a tool that can be used by people with less design experience. Figma provided a collaboration space where users could join one file via a link. Users can also see and observe each other when they are in the same file and edit the objects together in real-time. You don’t need to worry about losing items because you can revert to previous versions at any time.

During this phase, we validated personas and persona needs, then mapped out their journeys, created a content inventory, a sitemap, and planned the task and screen flows.

![alt text] (https://blogimages.staging.oregon.platform-os.com/assets/images/blog/figma1/2.png "Figma user journeys")

###UX Design and the Prototyping phase
In this phase, we created the low and high fidelity wireframe iterations and the prototypes for the testing phase. 

All of these actions are __highly cooperative__ tasks so we’d like to highlight some features related to collaboration. As it’s easy to invite users to Figma you can gather feedback fast in many ways: via comments or shadowing another user in a call and iterating on the plans together.

Being fully remote, our main goal is to __reduce friction__ in our design processes. Help everyone to gather the same knowledge easily and share feedback fast. With a peer review process, we can keep everyone up-to-date and __create a Design System that can scale__ to the project needs. 
As Figma files are easy to share it makes the whole system more __inclusive__ to non- designers. It helps the collaboration between different teams and stakeholders. This cooperation is at the heart of a good Design System and also a key factor for distributed teams. 
It’s useful that we can set roles easily. By default, a viewer can view, comment, share, and copy. If you have a confidential project there is an option to prevent copying in the PRO version. 

Our main goal was to build a __consistent and usable Design System__. Therefore we iterated and tested as much as possible to keep the items simple but still include all the necessary components. With a good component library, it’s possible to keep the delivery process and modifications fast. It also means that after the sketching round we can build high fidelity wireframes. 

__Version control__ is a simple but powerful functionality of Figma. Before using Figma, it was hard to follow file versions between team members. And we had to figure out a sync process to share them and be sure that it's the right version. It was time-consuming. With this web-based tool, it’s easy to follow the file versions as it constantly saves. We only name and add notes to the important stages of the design process. It can help to check a specific stage and compare the difference between the tested versions. We can even revert to that version. Following a version control system like Git in design is a fast and safe option.

Figma also has plenty of [integrations](https://www.figma.com/product-integrations/) with other tools to keep the design process easily in the loop, just like [Jira](https://www.atlassian.com/software/jira), [Zeplin](https://zeplin.io/), [Dropbox](https://www.dropbox.com/), [Slack](https://slack.com/). 

![alt text]
(https://blogimages.staging.oregon.platform-os.com/assets/images/blog/figma1/3.png "Figma versioning")

###Testing phase
In the testing phase, we __create prototypes__ from the UX design plans and test them with our target audience. Figma is perfect for creating basic prototypes that you can easily __integrate into specific testing tools__.

We created __interactive prototypes__ by linking objects to artboards. This process is fast and you can already use it for testing. With [integrations](https://www.figma.com/product-integrations/), you can further specify the details in the prototype like animated transitions, micro-interactions, scroll-based effects, and more. We only use these when it comes to interaction testing so we can identify the best version.

![alt text]
(https://blogimages.staging.oregon.platform-os.com/assets/images/blog/figma1/4.png "Figma prototype")

Usability testing is a smooth process with Figma. We use the prototype link and add it to the preferred tools. We used [lookback.io](https://lookback.io/) for remote moderated usability tests and [playbookUX](https://www.playbookux.com/) for remote unmoderated usability tests. 
In some cases, we even iterate or fix some items between testing rounds. The cloud-based background helps a lot, as it’s always up to date and you don’t need to change anything in the usability test manual.

After the testing rounds, we create __test reports__ of the results. Keeping this report in Figma is beneficial because the old and the new wireframe or design versions can live close to each other. At the same time, you can see the reasons behind the changes. Non-designers like other team members, stakeholders, or a client team also prefer it as they don’t need to keep in mind where to find what — they only check Figma and can see all elements of the design process there. The result is less confusion and easier collaboration.

##Conclusion
By including all the relevant information, you can create a single source of truth for your UX and design processes. The platformOS team found that Figma is a great fit to be this source of truth for our projects. We hope you found these Figma highlights from a UX process point of view helpful. Stay tuned for part 2 of our series, where we explore the design process.