Creating wireframes and low-fidelity prototypes in Figma for the Google UX course
It’s time to start pushing pixels!
This article is part of an ongoing personal journal, where I talk about my experience taking Google’s UX Professional Certificate on Coursera. This article covers topics discussed in Week 3 of Course 3: Build Wireframes and Low-Fidelity Prototypes
I just finished Course 3, and before I move on I wanted to do a quick write up of my process for creating wireframes & a prototype in Figma.
This is the part of the course that I have been really looking forward to! I love designing, so the hands-on stuff is my jam. I have used Sketch and Adobe XD before, but I haven’t used Figma. I had heard nothing but good things about the program, and I was not disappointed.
Figma has a nice, intuitive interface with plenty of helpful videos to get you started on using the tools.
During Course 3, we did some basic information architecture and low-fi wireframes for the app project we’ve been developing. (Mine is a seed catalog shopping app.) The next steps were to use our low-fi wireframes to create more finished digital wireframes and then use Figma’s prototyping tools to create at least one complete user flow within the app.
Here’s a look at my wireframe sketches vs my digital wireframes:
As you can see, the designs became a lot more refined when I started mapping them out digitally. The home page stayed basically the same. But as I was designing the others, I came across areas that needed to be reworked, either to add more content or to simplify.
For instance, the video player became even more simple. My vision for the in-app video player is a very bare-bones, no frills interface. I want it to have only the necessary tools to watch a video, save it for later, adjust the audio, and turn captions on and off.
I chose to keep it in portrait mode after a lot of thought. Although it’s common to have a landscape option for video content, I think that adding that option will be overly complicated and unnecessary for the video content my app will use.
The purpose of the video content is to provide short, informative videos about each plant product. This is so users who have a hard time reading screen text or concentrating while reading will be able to quickly and easily learn about a seed they want to purchase. With the content success of apps like Tiktok, Snapchat and IG Reels, it didn’t make sense to me to offer a landscape option that would make users have to rotate the screen. The same logic applies for the stripped-down controls — for a short, portrait video, I don’t think users will need full screen, playback speed, and other video controls. I will of course test this assumption in user testing.
On the other hand, the single product page needed a lot more information than I mapped out in my sketched wireframe. As a non-gardener, I didn’t account for the vast array of details that are commonly listed on plants and seeds. After doing some more research on various websites that sell plants, I realized the average plant buyer needs to know these additional details to make an informed purchase.
Now, each product page has a short blurb about the plant, as well as at-a-glance information about the zone, temperature requirements, months you can grow it indoors or outdoors, whether or not it can be potted, how tall it grows, the color of the flowers and leaves, and if it has a fragrance, among other things. It was a challenge adding that many things in! I made use of cards with short headings and small oval “button” callouts. I am also considering adding a suite of icons to indicate things like how much sun it needs, if it attracts bees or butterflies, and other information that would be useful as a pictorial.
One thing that I totally missed in my sketch for the product page was the PRICE, and quantity adjustments for adding to cart! D’oh! I made sure to design those above the fold in my digital wireframes.
And lastly, I made sure to add the star reviews right at the top. All of my test users indicated that having reviews was a main feature that they would require before purchasing seeds.
After I had designed out the main screens and some of the user flows to search & filter products, I started creating my prototype.
I love making prototypes — it’s a fun logic problem game.
After connecting a lot of elements, the prototype can start to look pretty messy! I also need to rearrange my screens a little. I am still building them out, so I have not decided exactly how I want to organize them.
I like that Figma offers a prototype in another window that refreshes as you update your connections. It’s very useful to test a flow as you’re working on it — you can add a connection quickly or build out another screen if you discover that you’ve missed something critical.
Since this is a project for a class and not a client, I will pause here on building my prototype. I have designed all the main screen layouts, and we are moving on in the class. So I will finish the remaining screens while I’m working on the full fidelity designs.
If you’d like to check out the prototype as it’s built so far, follow this link!
Seed Catalog App Prototype
I’m always open to feedback or suggestions if you catch something!
I’ll be starting Course 4: Conduct UX Research and Test Early Concepts next week!
Cheers, Rachel
