Figma Redesign
By Yifei Zhang For Cogs 127 @UCSD
The Team,
The Team,
The Team.
Special thanks to my teammates Nathan Rinker’s insight of user flow and Eric Ko’s graphic design. Also thanks to my TA Lily Hu’s feedback and help throughout the quarter. Finally thanks to Professor Phillip Guo and all of Cogs 127 for the support and valuable lessons. I focused on User Testing , Screen Design and Prototype.

The Task

Making expert tools accessible to a broader audience. As COGS and CSE students we’re used to struggling when using new software tools and we want to help others learn these tools in an easier manner than we did. As Figma was recently acquired by Adobe, now is the time for major changes to be made to make the program better.

Research Methods

We want to find the tasks that new users struggle with the most, the type of resources that users rely on, and what experienced users wish they had known when they were just starting out. By doing this we hope to find ways that we can improve the app to make it more user friendly. To accomplish this we are performing a mixed method approach of direct observations and interviews. The direct observation method will be helpful as we can observe new users to Figma and what they struggle with when first starting out. To do this we plan on observing new users as they explore Figma independently and attempt to create a basic design of a prompt we give them. While our focus is on making the app better for new users, we also want to interview people experienced with Figma.
The questions:
User Interview
Figma users gave an overall pleasant feedback about the app, but they did mention several choke point that is making their workflow not as efficient. For example the color picker and font-family selector were difficult to use and does not show up in format the users expected. Furthermore, we had desires from users that they would like to see some of the more advanced Figma tools like components, plugins, and styles to be recommended to users earlier.

User Personas

Design Process

Competitive Audit
By looking at other graphic tools we got a better understanding of the industry standards of the on boarding process, and got a lot of inspiration on how we can implement the process.
User Flow
Form our user interview and competitive audit, we've learned that the on-bparding process is not enough to support more advanced user to become an expert so we decided to have two different user flows that can better support all of the users.
Pre-set tutorial track
Help functions with more user input
Prototyping
We started with the pen on paper prototypes, allowing us to go though many ideas quickly and evaluate each options' strength and weaknesses.
Then, we made lo-fi prototypes of the ideas with the most potential in Figma to test and see how these ideas can be implemented. This also allowed us to do some initial user testing to get a feel of what users might expect. We have decided to test two unique routes, a pop-up and a screen overlay concept.
User Testing Result
After our lo-fi testing phase, we also made our decision to not pursuit the overlay feature from user-testing feedback. Many of our test subjects stated that the over-lay is too limited in its functionality and is only useful for first time users. Based on these feedback we decided to only pursuit the pop-up route and added a "help" section that can be displayed on screen permanently as an aid.

Final Product

Based on our feedback from our user research, we found that users greatly preferred our first design that focused on more reactive tutorials. In this design, we had pop-up tutorials that appear when a user hovers over a tool or feature in Figma. These tutorials will showcase the basic functionality of the feature in a gif format as well as provide links to relevant documentation and/or video guides.
Other Improvements
Help Tool
We aded a help tool that will diagnose user issues based on either a text entry or by querying an element in Figma. The former can be done by a simple search function while the latter would produce results by point and clicking on an element in Figma.
Font Selector
We changedthe font family selector to preview the font before it is selected to make it easier for the user to identify what font works best for them. This is something that we got directly from user testing that users have a had time finding the font they want in Figma since very few people can associate the font name with the actual typography.
Figma File
Light Mode
Dark Mode
Made by Yifei Zhang at UCSanDiego
March 2023
All rights reserved