Figma Mirror App Redesign — a Product Design Case Study
With a quick search, you can find plenty of books and articles on UX on the Internet. However, as a designer how many times have we thought about our own experience during designing?
Introduction
In 2015, Figma was unveiled as a web-based design tool that empowers designers to have a collaborative and cloud-based design process. It also featured a straightforward tool to help designers create prototypes of their ideas or share them with others.
All we needed was a web browser to start designing, no matter what the OS was. Figma was there to shift the product design paradigm using a web platform. Despite all of the revolutionary and significant features of the web-based Figma (Mac and Windows), a huge limitation, i.e. deficiencies of Figma mobile app, hindered this design platform from meeting the basic requirements of designers in the process of designing for mobile devices and more importantly, the “collaborative design process” was not available in Figma mobile app, which was already one of the most significant competitive advantages of Figma over web and desktop.
Even though Figma mobile app helps you to check your designs by your cell phone at any moment via the internet, the limitations of this application prevent you from using most of the features of the main version of Figma on your phones.
Where did it begin?
All three of us began our work with Sketch software. We carried out many projects using this software and designed numerous prototypes. In 2019, when Farshid and Zinat decided to work full-time on remote projects, they realized they were facing new sorts of requirements in their new role. The constant communication with employers and receiving feedback, the need for consecutive transfers, and speed were the three factors that made Farshid and Zinat switch from Sketch to Figma. Despite its challenges and the change in the design infrastructure, which is quite stressful, the decision to change their design software enabled them to improve their design process. Instead of long meetings with the employer, they could have better and faster communication using Figma’s commenting system: They were able to create a very fast design system without any complications and challenges for each project, and most importantly, they had access to all of their designs from any place and any computer.
Hooman started live streaming on Twitch in 2019 and he wanted to do live and collaborative design shows with his audiences. Sharing the projects with the audiences during streams enabled them to watch the process of design more freely without being limited to the video streams and after the show was finished they could see the results better.
During one of these streams, Hooman proposed to redesign the Figma mobile app. He believed that in spite of the numerous advantages of Figma’s desktop version, its mobile version had some serious deficiencies, and its competitive advantages such as interactive design and team communication were not available in its mobile version. Therefore, he asked his viewers to share the problems they had faced during their work with Figma, in case they were Figma users. During the same stream, Farshid and Zinat suggested collaborating on this project and the story began.
Why were we interested in improving Figma Mirror?
We spend most of our time on Figma during the day. We work with Figma even more than we see our friends and relatives. During these daily uses we realized that despite all of its good features, this software does not meet some of our needs. We could not communicate with customers and other team members in the app environment, review our projects together or share our designs with each other.
We conducted this project to remember that the design experience is as important as the user experience. The more delightful the process of design, the more user-friendly products we can create.
If Figma Mirror was a bathroom, sometimes this bathroom did not have hot water. We believed that in the current situation, this app could be used during our daily routine although it was not a super pleasant experience. We were not trying to replace the general definition of this product with weird ideas such as a button instead of a tap. We just wanted to resolve the problem of hot and cold water.
Having a wrong hypothesis is better than having none!
At the beginning of the project, we asked some of our friends and colleagues for their opinions. Also, we reviewed our current design process and finally based on the gathered insights, we developed a list of hypotheses:
- This app must be independent of its desktop or web version.
- There should be cloud access to all projects.
- The details of the projects must be visible such as their design systems.
- There should be some ways for communicating such as commenting system.
- There should be the possibility of managing or sharing the projects without the need for a computer.
After making the list above, we found out that the current app has many fundamental problems such as dependencies to the desktop version, having limited or no communication-based services, and lacking project management capabilities.
Now we had to find an answer to a very important question:
Who faces these problems?
We already knew that a large number of the Figma users are designers, however, there must be other people with different specialties who use this service. Therefore, just focusing on the designers could not work for us in describing the disparate aspects of the problem.
Thus, by considering our own experience and a glimpse at the ordinary product development processes we found out that we are dealing with three general segments of users including designers, developers, and employers.
Now it was time to understand the behavior of these three segments and their preferences. Thus, we designed a collection of surveys and shared them with each group. After analyzing the results we discovered that:
By designers we mean:
- Designers who work full-time or part-time in a company. These designers might work individually or as a team.
- Freelancers who work simultaneously on one or several projects.
- Designers who develop their own designs.
By developers we mean:
- Developers or teams of developers who work in a company.
- Developers or teams of developers who work as freelancers.
By employers we mean:
- Product or design managers who work in a company.
- Business owners or people who outsource their projects.
- Design or product consultants who help the companies to develop their products.
After providing a precise definition for each segment, we had to look a little farther back and investigate the requirements of each group concerning our problems and hypotheses.
We found out that the designers who work in companies besides working on different projects communicate with different people such as other designers in their team or design or product managers. The freelance designers show the same behavior. During their parallel projects, freelancers had to communicate both with customers and the technical team (either freelancer or intra-organizational).
We also found out that not only designers but also the respective segments had a more floating work schedule during the Covid-19 pandemic. Therefore, they had more freedom in choosing the time and the medium for interaction. This resulted in the creation of a new hypothesis that due to this flexibility the segments preferred portable mediums for interaction such as mobiles and tablets instead of the traditional and computer-based mediums.
The segments showed a behavior that was quite interesting. They exchanged photos and screenshots as a common way of gathering or applying feedbacks and developing their designs. This behavior was more prevalent among the clients.
Then, we filtered our hypotheses based on discoveries from the mentioned segments and tried to find solutions for the identified and confirmed problems.
It was time to help others feel good!
Speed, interactive design, and being accessible have always been the center of focus of Figma company, but did Figma Mirror app include all of these properties as well?
Our studies indicated that the answer to this question is no. Therefore, we needed to find solutions for the users to interact with others faster and more efficiently and can have access to their projects from every possible medium.
After a few ideation sessions and investigating the existing alternatives and especially studying the features of the desktop version of Figma, we tried to make a list of the design opportunities aligned with the needs of the users:
- Figma users should be able to have access to all of their projects without the need for their personal computers.
- They should be able to communicate with the stakeholders of their projects flexibly and at any moment.
- They should be able to manage the progress of their projects and share them with ease.
Following these design opportunities, we started developing our design backlog and developed the features one by one but…
Our challenges became more serious! Lack of access to qualitative and quantitative data on the one hand, and lack of precise knowledge of the competitive market of design tools, on the other hand, made developing backlog and designing features more complicated than it was.
We trusted our hypotheses and listen to our hearts to achieve better results. Then, ideated and made a list of the main features that corresponded to the identified design opportunities:
- Sign Up & Login
- Project Inspection & Management
- Sending & Checking Comments
- Audit log per Project
- Sharing Projects & Details
- Design System & Components Management
The next step was to see which one of Figma alternatives, i.e. Sketch and Adobe XD enjoyed these features and what is the reason behind each one of their features.
After analyzing the mentioned alternatives, we found some interesting features that we decided to consider seriously during our further steps.
For instance, we found out that in Adobe XD, we could instantly see the changes in the app. Or we could access all projects and pages by searching. Even the projects can be stored on mobile in offline mode and are accessible even when you don’t have access to the internet.
On the other hand, we found out that in the mobile version of Sketch, to access the projects your phone should be connected to the source computer using Wi-Fi or USB and the projects are not available via a cloud-based service. On the other hand, an interesting characteristic in Sketch was that it enabled users to check the pages of each project and even navigate among its components and symbols.
Taking into account the results of benchmarks, reassessment of the solutions, and comparing them to the features of other applications we had a better perspective of the respective features in the Figma app.
Now we had to design the details of each of the features and develop them under Epics and Stories for ourselves.
The way the new Figma Mirror will work!
During the process of designing the features of the new app, we tried to have a more idealistic view of the subject, and besides the basic features of this product, we wanted to utilize the benchmarks and our hypotheses. Our comprehensive vision enabled us to carry out the phased development approach procedure and on the basis of the precise results.
Therefore, we visualized the competitive advantages of Figma in general and looked at the new app from a user’s perspective:
As a Figma user, I want to have access to the mobile version of Figma Mirror that is always available, independent from the desktop or web platform, so that I can have a more efficient and effective workflow.
We took this sentence as our initiative and by taking into account our data from the previous steps, made a list of Epics of this app:
- Authentication Process: As a Figma user, I want to be able to Login to this app or sign up so that I can manage my projects or add new projects and interact with others.
- Project Management Process: As a Figma user, I want to see my projects sorted so that I can check their status and manage them.
- Commenting Process: As a Figma user, I want to have access to all comments about a project or open a new thread so that I can make a better decision concerning the project in the fastest way possible and based on the shared opinions.
- Project Monitoring Process: As a Figma user, I want to have access to the history of any activity that occurs within a project so that I can have a better understanding of the process of my projects.
- Project Details Management Process: As a Figma user, I want to be able to have access to the details of the project such as frames and components besides the general aspects of a certain project so that I can be aware of the details of the project.
- Sharing and Access Management Process: As a Figma user, I want to share the whole project or a part of it with the team or outside the team or manage the current access so that I can have a goal-oriented and simpler interaction with them or manage other people present in the project at any moment.
- Mirroring Process: As a Figma user, I want the ability to check my modifications on my projects on my mobile besides desktop and web versions of Figma so that I can be sure that my designs are aligned with the mobile design standards.
User Flow & Information Architecture
Now it was time to define the high-level structure of the new version of Figma on the basis of mentioned Epics. First, we decided to define the position of each feature and its relationship with other parts of the app before designing the wireframes.
We have our own method for designing User Flow and Information Architecture. We wanted to know what type of information we are dealing with while designing the Flows besides understand the general relationship of the features together and the details of each section. Therefore, the User Flow that we draw included the rough information architecture of each section to some extent. It helps us think about possible relationships between different sections and have a better understanding of Micro and Macro Interactions.
Wireframes
Now that we knew the functions and identified the relationship between the sections, we should discover which function and with what layout and structure are going to have interaction with the user.
On the other hand, we found proper answers to the questions of the previous steps and there was no need to design wireframes for all parts of the project. Therefore, we focused on the parts that we have had doubts about their layouts and the relationship between their components.
We started with the authentication process. At first, we thought that our main goal for making decisions must be the number of steps that a user must take, however, after designing this page we concluded that we should also focus on the integrity of the data as well as the number of the steps taken by the user in each page.
By looking back to our previous insights, our presumption was that most of the users of this product will be the designers who already have an account on Figma, which led us to conclude that the Login and Sign up touchpoints should not have equal priorities. There should be a proper visual hierarchy between these two touchpoints, i.e. Login and Sign up so that the user can find his or her preferred authentication method with ease.
We chose the left alternative considering the collection of the above necessities.
Then, we continued with the project management process. Since in this section, users were required to see the projects, sort or filter them based on their own opinion, and most importantly, as the homepage of the app, have access to other sections of the app easily.
We should never forget that the new Figma app must have a layout similar to many other applications, which means that we must consider design standards during our process.
Accordingly, the left design had characteristics that persuaded us to consider it as the basis of the subsequent steps. Characteristics such as standard cell-based layout, accessible sort and filtering methods and bold titles per page can help all user segments, even those who are less tech enthusiast to understand the layouts, the interactions and the navigation methods.
Now it was time to focus on one of the interesting features of this app. The commenting feature is one of the crucial aspects of this project which enables users to see the comments per project easily and interact with them based on their needs.
This process comprises two major parts:
- Checking & Managing Comments
- Inserting New Comments
In the first part of this process, we tried to consider the behavior of the users regarding the comments and their interaction types with this feature. We designed a layout in which the users could see the comments of their teammates and easily manage or respond to them in an integrated space and with the help of different filtering and Micro Interaction methods.
On the other hand, the Desktop version of Figma contains a very important feature as the notifications management system which prevents the comments from becoming Spam or getting lost. Due to the relatively similar users and their behaviors, we duplicated this feature in our new design and called it Notification Setting.
Earlier we discussed an integrated space for the comments, however, why is this new section is required to be available in the mobile version? Is it necessary for the users to see the full threads in this section? Did we have to maintain the function of the comments section in the desktop version of Figma as it was or did we have to put more thought into it?
We designed a variety of alternatives to answer the above questions, we tried to find various layouts for different behaviors of the users, provide better responses, and finally, we came up with two answers:
In the desktop version of the Figma service, the users can have access to the whole project and the comments by changing the Tabs or clicking on the title of each project and there is no separate section for displaying the entire comments. However, in the mobile version, without a separate and integrated section for displaying all comments and filtering based on the projects, the user would have to move several steps forward and backward to check the comments per project.
Based on the behavior of these users [who get or submit comments for various projects frequently], we provided an integrated section for all of the comments, and then, by displaying the projects in this section and the filtering feature according to it, we made the related funnel simpler and shorter.
Then we tried various methods for displaying the comments and threads on this page. We considered methods such as Accordion, Cells, and Tiles. We put aside the Tile method due to not being optimal and it increased the scroll rate. The Accordion method [wireframe on the right] was written off as well since we understood that based on the complex and dynamic nature of each comment, the user needs to concentrate on each comment and read it precisely and answer it. Even though the Accordion method decreased the number of pages of the app, it hindered the user from having control and focusing on each comment.
Accordingly, we chose the wireframe on the left as the final design. Since in this design the users have access to the projects with higher visibility, besides, the manner of displaying each comment was more organized and readable than the other alternatives.
We came to a conclusion regarding the comment management process, therefore, we had to find the optimal layout for the adding process.
First, we checked the desktop version of Figma and then, took a look at similar products such as Zeplin and Avocode. The reason for analyzing these products was that the process of adding comments is one of the core features of these services and understanding their approaches and innovations was a must.
By considering the users’ behaviors and the methods which the mentioned applications are using, finally, we came up with two following alternatives:
In the alternative on the right, the user was able to tap on any area of the Frame [similar to desktop] and leave his or her comment inside a field that opened. Despite its advantages, this alternative had two major problems.
The first problem was that by typing @ to mention other teammates, a new Modal should be opened to suggest the name of a specific teammate, and this lead to a strange and sometimes unpleasant experience.
However, regarding the second problem, in case the comment pins were placed on the margins of the Frame, the behavior of the comment module seemed strange.
Taking into account the above problems, we selected the left alternative as the final solution. In this alternative, each pin only highlights a specific area or an object and the rest of the verbal information has been stuck on the top side of the keyboard.
Final Design
After ensuring the layout and function of the features of the new app, the time had come to design the details of the features using all information and documents we had obtained or produced up to that time.
Before the final design of each one of the features, we needed to define the visual identity and the appearance of the app first. We wanted the final results to have an identity similar to Figma itself and without the extra visual complexities.
Finally, precise examination of the current appearance of Figma Mirror app ensured us of our hypotheses. With relative conformity to the design language of the OS, this app provides a familiar atmosphere and identity by using small elements such as color, typeface, and logo.
Then, we prepared the required infrastructure to design the interface i.e. Design System of the project. At first, we checked the desktop and web versions of Figma to have a better understanding of the design language of Figma. Then, studied the elements and components used in the mobile version of Figma Mirror app. Here we could not find similar samples of most of the components we needed due to the limitation of the pages and the details of the Figma mobile app together with the difference in the structure of the web and mobile design. For instance, we did not know the details of a standard Tab Bar or the exact design language of Cells from Figma’s point of view.
Finally, we had to design the details of the Design System project by integrating the three main sources and a hint of our personal opinions:
- Figma Web and Desktop Design Language
- Figma Mobile App Design Language
- OS Design Language
The important point in this part of the design was that based on our knowledge regarding the extent of this project, we knew that we do not need to have a complete Design System. Emphasizing the design of the necessary elements of this Design System enabled us to save a lot of time during the process of our design.
After the construction of the Design System, it was time to design the main features of the new app:
- Authentication Process
- Project Management Process
- Commenting Process
- Project Monitoring Process
- Project Details Management Process
- Sharing and Access Management Process
- Mirroring Process
Authentication
If the user is not logged in, this section will be displayed for the user right after Splash and Onboarding pages (when opening the app for the first time) and shows the Login and Sign Up touchpoints. We were aware that the largest group of users of this app are designers who already have used the web or desktop versions. Therefore, a great number of users must already have user accounts, and thus, the Login touchpoint was more important than the Signup.
On this page, we designed the Figma Mirror app Login methods similar to the desktop version including Log in With Google Account, Log in with SAML SSO, and finally, log in with Email and Password.
We had two reasons for using the Primary button for login with Email and Password. First, the nature and function of this method was different from other Login and Sign Up methods. Second, we guessed that like other companies, Figma also prefers to differentiate this method for the purposes such as Email Marketing.
In the internal pages of this process, the flow and probable errors of Login and Sign Up, plus the process of Forget My Password were designed.
Project Management
After the Login or Sign Up flows, we considered a page for project management. On this page, the user can have easier access to their projects through different Sorting and Filtering methods. The user can also search them based on the project name or people involved in a specific project and see its name, cover, time of the last change, and the number of unread comments.
Furthermore, bearing in mind the touchpoints such as the Tab Bar on the bottom side of the page, the user can have access to every section of the app.
After designing the structure of this page, we moved to the details such as Micro Interactions and especially swipe right or left per Cell. On the one hand, we knew that we were designing this app for tech-savvy users and they can learn the Micro Interactions easily and on the other hand, we wanted to use this characteristic properly and more efficiently. Like Telegram, we could provide the user with several options after swiping, or use a two-step swipe like Spark. However, finally, based on our different user groups, we decided to create a balance between the possible complexity and its ease of use.
To find the best options for swipe left or right, at first, we listed all options such as delete project, leave a new comment, archive the project, etc. and finally, we came up with two final options:
We assumed that most of the users of this app had a large number of projects in their account and they could have easier access to the important ones by pining them. Besides, we assumed that sharing the link of the project can be a quite useful feature for those users who interact with numerous teammates or clients.
At this step, the decision was made to assign Swipe left to Pin or Unpin the project, and Swipe right to store the link of the project on the Clipboard and share it afterward.
In the desktop or web version of Figma, there is a feature that reminds users that Figma is under maintenance and will be unavailable for a while. We did not forget this feature and designed the related screens to notify the time and the reasons.
Commenting
In the comment tab, the user can see all comments and can swipe to Pin or Unpin the important comments, last but not least can mark the desired comments as Read or Unread without opening them.
On this screen, Sorting and Filtering are designed a little differently. Besides the common methods for this section, we designed a unique Filtering method to let users filter the comments based on a specific project. In this Filtering method, the user can see only the comments pertinent to a specific project and interact with them without the need for opening the whole project.
Besides, in this section, a feature was provided similar to the web and desktop versions of Figma for notification management, to help users receive only the important or desired notifications.
Finally, we added a small but new feature to this section. Based on our own experience from using Figma, we felt the need for a button or action to mark all of the comments as Read. Now the user can Long Press the Comment tab at the bottom side of the page and mark all of them as Read.
The users are able to see the details of each thread through two methods. The first, opening each comment in the list of comments, and the second, opening each project and switching to Comment Mode inside each Frame.
In the first method, the user can read each Thread and Resolve it, Pin or Delete any comment, and if needed, answer the comments. Just like the web and desktop versions of Figma, the user can also type @ and mention the people involved in the project.
Also, a small feature is provided in this section to enable the user to see the people involved in the project and find and mention them easier.
However, in the second method of commenting, similar to the web or desktop version of Figma, the user can open any Frame of the project and switch to Comment Mode and see the Threads per Frame. The user can tap on any Thread and is able to read the Thread or write a new one with ease.
It is good to mention that by double-tapping the screen, the user can have access to a button that allows him or her to switch between Comment Mode and View Mode.
Project Monitoring
This section includes a list of all activities of the user or other people involved in the project. Here, the user is able to see the changes made in different projects, have a list of new comments, and manage new project invitations.
This section lets users have access to all of the Logs and as the name suggests, the main focus of this section is on monitoring the changes rather than imposing new changes.
Project Details Management
During the design of this section, we checked similar apps, especially Sketch many times. We have always been fascinated with the interesting way that Sketch presents various Artboards. When designing the new Figma Mirror, we tried to develop our ideas based on what we saw on Sketch mobile app and facilitated the navigation methods between Frames, especially on big projects.
As already stated, after opening each Frame, the user can double-tap on the screen, have access to the Zoom Level of each Frame, or switch to Comment Mode. A new and cool point in this section of the app is the feature of sharing each Frame individually which can be done by the following three methods:
- Sharing through Link
- Sharing through Screen Shots
- Saving each Frame as PNG
The reason behind this feature was the various user segments that will be working with this app. Segments that might want to have access to a specific Frame of a project or those who do not have the app installed on their phones but need to check a specific Frame as an image.
Sharing and Access Management
The sharing and access management section in the new version of Figma Mirror is designed quite similar to its web and desktop versions. We believed that almost all aspects of this section in the web or desktop versions are applicable and can be duplicated in the mobile version. Therefore, there was no need to invent the wheel again.
This section which is available through opening each project and tapping on the sharing button comprised three main elements:
- High-level access management
- Management of existing people or Inviting new people
- Project link access management
In the Access setting section, the user is able to define the access level of the existing people or invite new people to the project. Finally, in the Link Setting section, the user can create the link for sharing the project, delete it or store it on the Clipboard. It should be noted that, by creating the link of a project for the first time, this link will be stored on Clipboard automatically.
Mirroring
Finally, the last section of this app is the Mirroring process. A familiar feature that its limitations made us start this project in the first place!
The functionality of this section of the new app is exactly the same as the current version of the Figma Mirror. Same as before, by selecting a Frame on the web or desktop app, the user can see that Frame on their mobile screen and interact with it if needed. Besides, just like the project details page, the user can double-tap on the screen and have access to the Tab bar and other options such as Zoom Level and sharing.
The Outcomes of This Redesign
For us, the outcomes of this conceptual redesign can be seen from two aspects. First, doing this project as a team during our free time, helped us to spend more time with each other again after a long time. Considering that Farshid, Zinat, and Hooman live in different countries, the team communications were happened using Skype or Figma commenting system. Sometimes, we designed or ideated a specific part of the project together and sometimes, we just turned our cameras on to replicate work in the same place.
We also think that this design helps improve the user experience of the Figma Mirror app in general and on the other hand, it can improve metrics such as CSAT, SUS, and NPS. But we should not forget that due to the great differences between the current version with our redesigned version, the metrics defined for this project must be updated. After the development of the new version, it is better to measure the metrics such as Time on page، Session duration, and Pageviews.
Finally, a necessary point, which was one of our main objectives for doing this project, was to redesign this app hoping that the acquisition rate is increased and also the current users (such as designers) use it more frequently. By imposing these changes on the redesigned version of Figma Mirror, we hope that more people such as business owners, developers, consultants, and most importantly, designers install this app and use it to finally, increase the metrics such as DAU, MAU on the one hand, and the number of installs on the other hand.
Thanks for reading!
You can check out the animated presentation on Behance or read the Farsi version of this case study on Virgool.
Stay connected with us:
Hooman Hatefi — Director of Design at Snapp (Linkedin, Dribbble, Twitter, Instagram)
Zinat Farahani — Product Designer at License.Rocks and Socialteq (Linkedin, Dribbble, Instagram)
Farshid Darvishi — Product Designer at License.Rocks and Socialteq (Linkedin, Dribbble, Instagram)
