FlowGenie
FlowGenie
FlowGenie is a Figma plugin that helps designers streamline their workflow. It enables users to generate screens, modify elements, build styles, and collaborate through a shared team space.
Client
Digital Agency DTT
Duration
20 weeks (2024)
Tools
Figma
Design Challenge
How can we advise and inspire designers during their design process in Figma, enabling interfaces and flows to be created more creatively and efficiently?
Designers use UI elements from previous projects to meet tight deadlines. This approach limits creative exploration, creates inefficiencies, and makes it challenging to keep up with modern design trends. This sparked the idea to create a digital product that helps designers work more creatively and efficiently.
User Research
To build empathy with the designers and developers, I conducted user interviews and held a focus group.
Goals
What are the issues surrounding the use of Figma design systems?
What are the issues with the current process of handing off designs?
How does the design handoff process work?
Where do designers need the most assistance during their design process?
Where do designers typically look for inspiration?
Insights
These are the key insights from user research.
Customizability
Designers felt restricted by the use of component libraries.
To utilize components for specific projects, designers often had to detach instances, which added extra manual steps and inconsistencies.
Inspiration
Designers expressed a strong need for more efficient ways to gather inspiration, particularly in the early stages of the design process.
Designers prefer having a wide variety of inspiration sources rather than a single component to use across multiple projects.
Tooling
Developers need to switch between Overflow and Figma. Overflow is used for viewing interactions and flow, while Figma is needed to access design specifications such as spacing, colors, and typography.
Developers find it inconvenient to constantly switch between Figma and Overflow.
Feedback
The current feedback loop, which occurred across Slack and Overflow, was seen as inefficient.
Designers and developers agreed that an integrated feedback solution within Figma could significantly improve the design process.
Manage Workflow
Designers want to better organize and manage their workflow in Figma. Currently, they manually add labels to keep track of what’s completed. This process could be automated to improve efficiency.
Empathy map
I created empathy maps and user journeys to visualize the user and context.
Ideation
I defined "How Might We" questions to reframe the challenges and explore new possibilities for solutions.
How Might We?
How might we create consistency, without limiting creative flexibility?
How might we inspire and advise designers during their design process?
How might we make it easier for developers to transfer the designs to code?
How might we improve the current feedback loop between designers and developers?
How might we help designers manage and organize their workflow?
Concept Choice
A plugin allows direct integration into the designer's workflow, leveraging their familiarity with Figma while providing a centralized solution to the key challenges.
User Flow
I created a user flow to ensure that the low-fidelity sketches are aligned with the user experience goals.
Lo-Fi Sketches
With low-fidelity sketches, the structure and functionalities of the plugin could easily be tested in usability tests.
Usability testing
The goal of usability testing was to identify usability issues and to refine functionalities of the plugin.
Key Takeaways
The team library should get more attention. Both visually on the home page and functionally throughout the plugin.
The information architecture of the team library can be improved for easier navigation and usability.
Designers want to be able to save designs.
Designers would like the option to retain some generated colors while still having the flexibility to generate new ones.
Key Iterations
Add clear call-to-actions for the team library.
Make the team library more of a focal point on the homepage.
Show more people/ users throughout the design.
Add more micro animations to enhance interactivity.
The designs are categorised and can be sorted.
Usability improvements for the AI functionalities, such as the option to lock certain colors.
Prototype
Send me an email at daanolff2000@gmail.com to get access to the full prototype.