So after completing course 2 in Google’s Foundations of UX Design certificate program, Start the UX Design Process: Empathize, Define, and Ideate, I’m not ready to start on course number 3, Build Wireframes and Low-Fidelity Prototypes.

It’s been a lot of work so far, and it’s a bit overwhelming when I realize I’m only on course 3 of 7. But, at least I’m making quick progress. I started the first course a month ago and hopefully I can get through the next five just as quickly.

This next course is all about continuing to design a mobile app, which we started in course 2. Students will start with storyboards and drawing basics, then we get to create paper wireframes and digital wireframes using Figma. I haven’t done much with Figma, so it’ll be nice to get more familiar with it in this course.

Build Wireframes and Low-Fidelity Prototypes

This course is broken up into three weeks:

Week 1: Storyboarding and wireframing
Week 2: Creating paper and digital wireframes
Week 3: Building low-fidelity prototypes

Storyboarding and Wireframing

So week 1of Build Wireframes and Low-Fidelity Prototypes starts with a ton of recap from the previous two courses. We cover empathy maps, personas, user stories, user journeys, and problem statements. I didn’t jot down these as notes again; instead I spent the first bit of this course creating sketches for my app (which was decided in course 2 – an antique store’s mobile app).

The next thing students learn about is goal statements (yet another type of statement to understand the user) and user flows. I enjoy learning about user flow. It’s determining a goal for a user to take, then making sure they can achieve that goal easily. Analyzing this is a great way to determine how efficiently someone using your app will be able to achieve their main goal.

Next, we learn about storyboarding. Not the kind that used to plan video though. This type of storyboarding is defined as “a series of panels or frames that visually describe and explore a user’s experience with a product.” Basically, we sketch out the sequence of events of someone deciding to use your app, then accomplishing a goal with it. So it’s kind of like what a storyboard for a commercial for your product would be; which is called a big picture storyboard. This takes your user on more of an emotional journey. There are also close-up storyboards, which are similar to the user interacting with early wireframes.

After storyboarding, students are introduced to wireframes as the last topic to cover in week 1 of  Build Wireframes and Low-Fidelity Prototypes. Although, this week’s project will be to create storyboards, so why isn’t that the last topic in the course? Course 2 did the same thing, and I don’t really understand why the last thing taught in a week isn’t the focus of the project; it just makes way more sense.

Now onto the main assignment for this week; the two storyboards. Want to see what I created with my terrible drawing skills?

Week 1 took me three days, so not too bad. Though it helps that I’m familiar with building concept sketches.

Week 2: Creating Paper and Digital Wireframes

Week 2 of Build Wireframes and Low-Fidelity Prototypes starts with students briefly learning about information architecture before jumping into learning about how to create paper wireframes.

Students are asked to create paper wireframes for their class project (the antique store mobile app) that we will soon turn into digital wireframes. This will be the final project for week 2. Here, students get to create a free student Figma account so we can use it to create the digital prototypes.

Next, we finally get to learn about some classic design principles. Good. Specifically, we cover Gestalt principles like similarity, proximity, and common region. Aaaand that’s it. Just three minor design principles that relate to UX. Then we head onto the assignment of the week, building digital prototypes in Figma.

Unfortunately, for the final project for week 2, the instructions are really unclear. Students are asked to submit digital wireframes based off of our previous paper wireframes (which were iterations on a main page for the mobile app), but they need to show ‘user flow’. It’s unclear if they mean flow within the single page or flow from one page to the next. I kept reading over the instructions until I understood what the requirements were, but it didn’t help.

Eventually I submitted 3 wireframe screens showing the main page, featured products page, and a single product page. That seemed to do the trick.

Week 2 of Build Wireframes and Low-Fidelity Prototypes took me about three days.

Week 3: Building Low-Fidelity Prototypes

The final week of of Build Wireframes and Low-Fidelity Prototypes starts with students learning about low-fidelity prototypes… as the title suggests. Basically, we learn about how to make rough prototypes that are interactive but not visually complete.

For some strange reason, at this stage, we’re taught how to create paper prototypes. This seems odd. If we already have digital wireframes created, why not just add interactivity to them? Why go back and make paper prototypes for an interactive, digital project? The instructor then shows students how to create paper wireframes, cut them out to screen size with scissors, and order them in a way that shows a complete user process.

Students are told that paper prototypes are ideal at this stage because they are inexpensive, you can create rapid iterations, they are low commitment, they encourage honest feedback, and they are easy to collab on. How is any of that true? At this point it would be much faster and easier to build interactivity onto my Figma wireframes, then share them digitally with a team. Also, creating rapid iterations is much faster digitally, if you have the elements in place already. Alternatively, I could print out the wireframes I already have and cut them out… why make brand new paper wireframes to mimic interactivity?

Students are also introduced to the app Marvel, which surprisingly, isn’t about superheroes, but instead about turning paper sketches into working prototypes, digitally. This was much more my speed. Although, I really liked how my Figma wireframes looked, so I just took photos of them onscreen and used Marvel to add interactivity that way. It worked really well.

Fortunately, the next topic covered is how to build low-fidelity prototypes in Figma. This I will do. This will also lead into the final project for this course, which is creating a digital prototype.

After a few more videos about how to create interactions in Figma, I’m pretty excited to get going on creating my prototype. I also discovered the Figma app, where you can view your prototypes on your phone- making your designs feel much more realistic than they are on your computer screen.

Students learn a bit more before the final project; about biases, deceptive patterns, and ethical and equitable design. Then we get to submitting the final project, which is graded with 3 whole points.

Ah, the fails of the peer grading system.

So I had two students review my project about ten minutes after I submitted it. One gave me 100% and the other gave me 0%… with absolutely no feedback as to why that was, other than ‘great effort’. My project clearly met all the main goals, and then some, but I still had to resubmit it in the hopes of getting peer reviews from non-morons.

Is there a way we can have an assignment looked at by an actual instructor if the peer-grading system fails us?

I dumbed down my prototype a bit, removing any extra functionality and resubmitted for full marks. When it was my turn to review student projects, I had one that was just an app homepage without any interactivity, and it was created in Canva. No Figma whatsoever, just a single, Canva-made image. That actually did deserve 0%.

It actually took me awhile to complete week 3, though I was doing it during Christmas. It took me about 6 days, though it absolutely could be done sooner if you have some design background… and you’re not attempting it on a major holiday.

Build Wireframes and Low-Fidelity Prototypes – In Summary

Overall, Build Wireframes and Low-Fidelity Prototypes was a really interesting course; though it’s mainly because I got to learn how to use Figma. It was actually a lot of fun turning a simple flat design into something interactive with very little effort.

The only thing that really annoyed me about this course, outside of the peer-grading system, is that the instructors kept pronouncing accessibility as ‘assesability’. Outside of that, I’ve probably enjoyed this course the most so far, because there was much more focus on the actual, physical design of a product.

Next up is course number four: Conduct UX Research and Test Early Concepts

Are you interested in taking Build Wireframes and Low-Fidelity Prototypes? Have you taken the initial two courses first? Have you taken Build Wireframes and Low-Fidelity Prototypes already? What did you like about it the most? Let me know in the comments below!