How do I iterate information-intensive SAAS design in Figma efficiently (& keep the file clean)
I am working as a solo UiUx designer at a fast-growing start-up in Denmark. Our team is building a high complexity system for municipalities to better manage waste volume, waste collection efficiency, and citizens’ requests. At the same time, our mission is to keep the system intuitive and efficient.
The challenges
I have encountered one of the major challenges like many other designers around the world have experienced — ITERATING DESIGN ALL THE TIME! This is inevitable while the company is still at the stage of making MVP (Minimal Viable Product)to reach product fit.
It can sometimes get super messy and frustrating when all the frames with different versions, variants, page layouts, just laying around in the file. Especially when you work with high information tensive projects. Here is what my daily work looks like:
Very often, we will get feedback from clients, new perspectives from the sales team and technical issues from developers and the designer will have to react rapidly. How can a designer do the magic within less time possible to showcase and validate the design direction?
How did I do it
1. Build a page with small sections
Starting with dividing the page into different sections really helped me a lot. As soon as I know what information and functionality it needs on the page, I will see them as an independent section when I am actually designing the page.
Take the Youtube homepage, for example, I will divide the page into (1) Navigation bar (2) Search bar (3) Filter (4) Video Feeds. Doing this, not only give me a better overview of what component I might need from the core design library* or if I need to build something new.
Note: What I am referring to core design library is like a parent file where it includes all of the components, fonts, and colors that are published as a library. All the children’s files can share their components in Figma.
2. Make interactive local component for complex sections
A core design library is a must for fast development. However, making local interactive components can speed up the process a lot when iterating.
If I make the search bar on the Youtube homepage an interactive component, I can easily showcase how it should look like when the user clicks on the search icon, how will it look like if the layout is different, and apply it to the page right away.
In short, I will be able to easily add up / modify the possible layout and interaction within the component instead of copying the whole page again and again. Or if I want to change out the whole section, I can just drag in another component.
Most importantly, with the help of the local interactive component, I can sometimes use only 3 frames to showcase all the basic functionality and do very fast iteration on the component which applies to the entire file.
3. Frame all the local section components with auto layout
This magic function in Figma is the easiest way for a designer to play around with the layout and insert/remove things without any concerns.
Pros & Cons
1. Talk visually in the feedback section
Getting good quality feedback is crucial to getting in the good direction in the shortest time. With the ability to do fast prototyping, it can provide the team better understanding of how the product function and look, therefore, the stakeholders can provide a better quality of feedback.
2. Take less time to make changes — Everything is connected
From my own experience, making a local interactive component can really speed up the iteration. Sometimes I expect some changes to be done in 30 min but it actually takes 5 min.
3. Easier to communicate with Developers
Showing all the variants for each small section will help frontend developers not miss any possible state. It is also easier for frontends if the designer has already done the division of the page and component for them.
4. It can get to so so so many components
This is an obvious downside but I see this as no problem. I always try my best to name the variants in a component in a good system so I don’t get lost. (To be honest, I sometimes still mess up. But it is always easier to manage one component than managing 10 pages, right?)
Wrapping up
Figma is a very flexible prototyping and conceptualizing tool for the designer to create a digital product — which means there is no right and wrong way to build a prototype and each company should find its own way to utilize the tool.
