A Figma plugin to help switch multiple fonts in three steps
Story worth talking about
With a goal to create a mobile-friendly auto insurance site for Admiral Insurance, we overcame location restrictions by collaborating with UX teams in Spain, Italy, and France. Despite tight deadlines and holiday delays, we delivered a high-fidelity wireframe prototype, demonstrating adaptability and teamwork.
Timeline
1 week and 3 days
Panel Size
Ashish Sharma
UX Designer + Developer
Design Colleagues
Product Testing
Research Approach
Brainstorming Ideas
Persona & User Journey
Competitor Analysis
Heuristics Analysis
[Approach 1]
We were initially using a plugin called Font Replacer, and Easy Font Swap which didn't fully meet our needs. To better understand the landscape, I conducted a competitor analysis, focusing on features, interface designs, documentation, and unique selling points.
[Approach 2]
I leveraged feedback from the comment sections of these plugins to identify what users needed, which informed the creation of a new solution. This data helped shape a well-defined persona. Additionally, after conducting 3 user interviews with my team, the path forward became clearer, leading to the development of a detailed user journey.
Design Approach
MoSCoW Prioritization
UI WorkFlow & Release
Usability Testing
UI Documentation
[Approach 1]
Facing a creative block, I initially mirrored the frame structure of Font Replacer to get started. Using MoSCoW prioritization and after 9 iterations, I was able to refine the process,ensuring that accessability and replace fonts in three simple steps.
[Approach 2]
Drawing from The Sprint Book, I learned the importance of testing early to avoid delays. With that in mind, I created a prototype and conducted usability testing with three of my teammates to gather immediate feedback.
The feedback resulted in Release 4.1, which improved visual cues for font selection, visual identification for missing fonts, and status updates on the progress bar when font switching was delayed.
Challenges & learnings (1)
Challenges & learnings (2)
[Problem 1]
"How can we solve for the cases of the font's that don't have a matching style or offer a limited style variation? This should help in reduced number of cases 404 screens."
A font suggestion system was developed to recommend closest alternatives (e.g., Roman for Regular or Bold for Semibold), tagged as "Pro Suggestions" to differentiate from exact matches. This helped in expanding the search list items.
[Problem 2]
"As the plugin users are growing, how can we find out the geographical impact the plugin has made, even though figma doesn't directly allows to track usage."
To track plugin usage, a sign in link was introduced for pro suggestions which helped in knowing geographical location of users.
[Problem 3]
What placement is better for a sign-in method that it is visible since the plugin loads also how can we integrate it with pro suggestions and earn money in a future case?
The sign in link is kept on the first fold of plugin making it visible throughout the process but separate from the main task, it is designed as tertiary button ensuring users user doesn't think of it as a primary button and it functions as a status if user signed in or not.
Key Takeaways
Reflection on the outcomes
New challenges continue to arise, but identifying them is key. For instance, the current issue is:
Users are facing a problem with "text-style" becoming detached when changing the font. To understand the issue better, I've sent a survey to actual users via email. Once I receive satisfactory feedback, I will start working on the solution.