Case study: Figma for iPad
Unmet needs
Figma is a cloud-based design tool that works on any operating system that runs a web browser. It is the only design tool of its type that does this, and in shops that use hardware running different operating systems, everyone can still share, open, and edit Figma files. Next to the browser-based version, Figma offers a desktop application that is slightly faster and has better memory usage. The desktop application is well-liked among designers because the interface is cleaner and distraction-free without the browser UI. On the other hand, this flexibility stops when it comes to the mobile platform. It does not have a proper all-kind of input optimized Mobile Application. Although with the introduction of the Apple Pencil a lot of designers started to use the mobile platform for rapid design. Therefore there is a high demand to develop a mobile-first version for this design tool.
Objectives
I decided I had to solve this problem and give a possible solution for a truly on-the-go Figma, where a user can finally untether from the destop setup by throwing away the keyboard and mouse inputs and switch these for stylus and touch.
Therefore my objective was to enable users to take advantage of the Apple Pencil while designing in Figma without any distractions on an iPad.
My Design Process
I decided to follow IDEO’s Human-Centered Design and Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.
User Research
Research Goals
- Learn as much as possible about our potential user
Who would actually use this product? What are their pain-point, need, wants and goals? - Understand the current solutions and the competitive landscape
What products and methods exist today for interface design on mobile platform? Who are the direct or indirect competitors? What works well, and what could be improved in the current landscape?
Asking the right questions
Most of my data collection came from surveying designers via Google Forms. I posted the survey in Reddit and Facebook groups and shared it with friends asking for feedback. I tried to keep the questions open-ended except when collecting basic demographic info.
Respones breakdown
- 18 people in the workforce
- 44.4% Product Designer, 50% UX Designer, 5.6% Web Designer
- 55.6% Large Enterprise Employee
- 22.2% Small Enterprise Employee
- 5.6% Medium-sized Enterprise Employee
- 16.6% Freelancer
Key Qualitative Insights
Despite the relatively small sample size, I was able to extract some insights that would later influence my design decisions. My insight can break into four categories:
- Problem with the Screen size
- Designing with precision
- Missing Application
- Questioning the reason
User persona
Based on the scope of the project I decided to use proto-persona.
Unlike the standard persona, proto-personas are based on the assumptions of the stakeholders, and further checked against actual data.
They are a collection of heuristics, market research, and intuition presenting an opportunity to articulate the target audience, their needs, and behaviors.
I created a ptoto-persona of a potential iPad Figma user based on online research and my understanding of people who I knew that used Figma. Although this persona was created with assumptions it was something that I came back to throughout my project to guide my design decisions and priorities.
Competitive Analysis
I did a competitive analysis among direct competitors. In the Figurative case, which is literally a Figma mobile implementation I dag deeper and collected the User Feedbacks’ from the Apple Store.
Constraints
The main application requirement is that enables the capability of the Apple Pencil. The 1st generation Apple Pencil support is available on the following 9 iPad models:
- 7,9” display (iPad mini (5th generation))
- 9,7” display (iPad (6th generation), 9,7” iPad Pro)
- 10,2” display (iPad (7th and 8th generation))
- 10,5” display (iPad Air (3rd generation), 10,5” iPad Pro)
- 12,9” display (12,9” iPad Pro (1st and 2nd generation) )
Ordered via display sizes, there are 5 different sizes available. Because of the short amount of time of the case study, I will be focusing on the 10,5” size.
Meet Figma for iPad
A fully-featured intuitive Editor
All of the four toolbars are collapsable and expandable. After redesigning the Editor HUD the new application offers 56% more canvas space. The small screensize was one of the painpoints discovered in the research phase.
The other major painpoint was the problem to design with precision on the mobil platform. To offer a solution for that, the application gestures allow you to move around your canvas, pan, zoom, undo or redo an action.
Move around| Holding two fingers on the screen and dragging will allow you to pan around the canvas of your document without moving any elements by accident.
Zoom In/Out | To zoom into the canvas, use two fingers to pinch outwards. To zoom out of the canvas, use two fingers to pinch inwards.
Undo | To Undo your last action, use two fingers to tap on the canvas.
You can also Undo your last action by tapping the back arrow button in the Action Bar at the bottom left of the interface.
Redo | To Redo your last action, use three fingers to tap on the canvas.
You can also Redo your last action by tapping the forward arrow button in the Action Bar at the bottom left of the interface.
To help the user desing with precision and keep the action flows consistent for all of the object manipulating actions the user needs to use an apple pencil.
The you can see the ranges of the offered actions and tools below.
One more thing which can tackle the unwanted pixel dragging. The introduction of the precision tool.
Precision Tool|To activate it, simply tap on it with the Apple Pencil or with one finger. Then, you can use the control wheel for moving the selected object with one pixel. If you tap and hold the desired direction, the nudge tool is activated.
What’s next?
It was a fun case study to work on and offer a solution to an on-the-go designer like myself. A question may arise what comes after this case study? I would like to raise the attention in Figma side that there is a high-demand for an flexible tool especially after covid times, when everyone returns to the office. I believe if this case study reach enough people, there will be an editor capable tool for this mobil platform.
And to all the people who were involved in this project as a user tester: thank you.
