Hop into figma, and let’s get started

My experience using figma on a project for the first time

I am a sports enthusiast. If it’s a yoga session in the morning, visiting my favorite gym, or working out in the park, I like to mix it up. That’s why I use the Urban Sports Club service, which offers, for a monthly payment, access to a variety of sports courses and facilities. Depending on my day, motivation level, and the weather, I use the App to book the perfect workout. The App is free and easy to access. Base on location, time, and type of sport, it provides an overview of the available sport offers. Only a view clicks to book and cancel classes, save your favorites, and share workouts with your friends.

Problem Statment

But the App doesn’t allow you to create and save filter preferences. That’s why, whenever you close the App, it will forget your filter settings, and you have to re-enter them.

I give myself the task to design a filter saving feature in 4 days, considering the USC design language and using figma.

I hear good things about figma, and I have already designed something with it. Usually, sketch is the tool of my choice, but for my new project, I decided to use figma from creating the wireframes to prototyping.

As my favorite yoga teacher likes to say: “hop into something comfy, and let’s get started.”

Design Process

As per usual, I start scribbling drawings on paper, checking the existing App design and functionalities. I think of the user flow and try it myself many times to identify the feature’s best location before creating a paper prototype.

I want the feature to save the user time, be simple, and make it an individual experience.

Feature requirements:

• no limitation on the number of individual filters
• individual naming of filters
• easy to access
• a simple 1-click activation button

Tipp: Before jumping too quickly into designing, make sure to spend enough time on the paper prototype. Think of all the necessary screens and transitions to complete the task, for example, where a keyboard is needed or a confirmation page should appear.

Ideally, have users test the prototype, or test it yourself if you don’t have any users on hand. Testing is very, if not the most critical step in identifying weaknesses, eliminating misunderstandings, and ensuring the user can complete the task. Jumping too soon into designing the wireframes can leave you with question marks and extra work later. Besides, paper prototypes are easy to change and a cheap way of designing and testing first ideas.

Once the paper prototype is final, I identify the different design elements that will repeat on more than one screen. Later those elements can be designed as components to ensure consistency and save time when updating.

Now that I am happy with the outcome, I am ready to work in figma. As I want to integrate the feature into an existing App, I start by researching colors, fonts, layouts. For that, I am using some helpful browser plug-ins such as Fonts Ninja and Colorzilla.

Figma works similar to sketch. Most keyboard shortcuts are the same and feel, therefore, pretty natural to use. I soon discover that the shortcuts explanation is under “help & resources” — black button/white question mark right lower on the screen. It works like a game, highlighting what shortcuts you used already and which ones you haven’t. Great idea!

I miss that figma doesn’t create a separate symbol/ component page. Compared to sketch, I have to remind myself to identify the (mother)components right away and move them to a different corner or extra page, not to get lost later. Also, the scaling of items is “K” on the keyboard — it took me a while to get used to it.

I wanted to use figma because with “smart animation,” they managed to integrate a powerful prototype tool. So far, I have been working with Invision to create the clickable prototypes and principle for animations. But importing and exporting screens between different programs cost extra time and often cause issues due to naming inconsistencies.

All hi-fi screens set, and in the next step, I’m creating the links between them to make the prototype clickable. As I sorted them all first, it’s easy and takes me no time.

Tipp: For sketch and figma, “mirror” is available, an app to download to your smartphone and synchronize with your work file. Now you can click your prototype on your smartphone.

Updating the App with this additional feature makes a huge difference to the user. It speeds up the search and booking process enormously and eliminates the frustration over re-doing the same task. The customer can now customize the service according to the needs.

Conclusion

Small design exercises to not get out of practice.

Adding this feature makes a huge difference to the user. It speeds up the search and booking process enormously and eliminates the frustration over re-doing the same task. The customer can now customize the service according to the personal and individual needs.

Further, it increases engagement to the users from a business point of view, gives great insides, and the opportunity to create better personal offers.

Figma is a fantastic tool to create quick and powerful prototypes for testing and presentation, plus you can collaborate with your team.

Thanks for reading the article. I hope you liked it and leave me a clap or comment. Also, check out my website www.karolinmatthiae.com and follow me on Instagram @karolin.ux for more.