UX challenge— How to practice wireframes

Creating wireframes in the usual designing process is all about emphasising on overall functionality and information architecture to get and apply feedback quickly. Ideally, we use them to test it towards users and then learn how to improve user’s experience. And then iterate our actual product leveraging those learnings! 🔁

Well today, I’m not doing that. My intention is to improve my UX skills, and in order to do that I will create wireframes from an existing app. The goal is to re-create the layout of the existing app without focusing on visual elements! A great way to tackle wireframes for first timers. 😉

I decided to try the exercise with an App I use on a daily basis: Maspter. This app helps you keep track, categorise and share all your favourite places.

This app is particularly interesting for some UI practice because it has a wide variety of UI elements and a lot of informational components.

Selecting a flow to practice

For this exercise, I decided to focus on one task on the app: consulting your friends’ maps and checking out their added places.

Here are the 5 screenshots for this particular flow:

User flow — Checking out your friends’ addresses on Mapster in 5 screenshots

Recreating the user flow on Figma

After reviewing which elements I wanted to keep in my wireframes, I created 5 different screens on Figma. I tried to keep it simple yet keeping important elements such as sections’ names in My Maps.

Here is the wireframes of the user flow for checking out friend’s added places, divided into 5 different steps. I had fun creating from scratch a few icons but I also use wireframing kits found in Figma Community. ✍️

User flow: prototyping wireframes on Figma

Here is the final interactive prototype on Figma. 🙌

Hotspots spots will show on click. Click on the figma preview and then click on Z to change the scale.

I’m ready to practice more by turning wireframes into high fidelity designs in next time 🚀

Thank you, and stay tuned for next case study!