Prototyping Quizzie, a Vocab App

Apr 22

Figma may be the current industry standard UI design tool, but its prototyping capabilities leave something to be desired. The more complex your prototype in Figma, the easier it is to accidentally break.

I wanted to learn how to use a dedicated prototyping tool. That’s why I took Bitesize UX’s UI Prototyping & Animation course with Joe Formica this past March.

Joe showed us how to use Proto.io, which I ended up really enjoying! While Proto.io is not as popular as ProtoPie or Axure, I found it to be a robust tool that’s easy to pick up.

In the video below, watch as I run through my final prototype for Quizzie (a vocab studying app.) Then, I’ll share some of the challenges and lessons I learned while building it out.

Why learn advanced prototyping?

UX/UI designers (and their designs) need to be strong communicators. More than ever, the user interfaces we see all around us rely on animated micro-interactions to convey important information.

Micro-interactions can:

Hints at affordances in the UI (a.k.a. things the user can do, like open a menu)
Direct the user’s gaze towards an important area or action
Help manage user expectations (using a spinning icon to let them know a page is loading)
Show a user’s progress through an experience
Confirm user actions

With advanced prototyping skills, you can actually animate your micro-interactions, allowing you to accurately show what the final product experience might look like. It’s great for user testing (“are users interpreting this animation the way we expect?”) and communicating design intent to stakeholders and teammates.

Mapping Interactions

Thanks to the Bitesize UX course, I learned how to think about interactions as a series of triggers, actions, and callbacks. In the interaction map I created below, I mapped out the user’s actions (triggers), which set off a chain reaction of feedback (actions) followed by any secondary actions (callbacks.)

Although you can design interactions without this kind of artifact, it’s a great reference to fall back on when (not if) you run into problems during the animation process.

Animating (Non-Spooky) Skeletons

Joe challenged us to animate a skeleton UI loading screen. For inspiration, I found this skeleton loading screen by Jieun Kim on Dribbble.

The animation is elegant and deceptively simple. If you look closely, you’ll see a shimmer effect go across the whole screen twice, before individual UI elements load in on top of their skeleton stand-ins.

It’s a great way to manage user expectations. Users get a rough idea of what information is about to be shown to them, and they can watch as it goes from loading to loaded.

Inspecting Jieun Kim’s GIF animation frame by frame in Photoshop.

I saved a GIF of Jieun’s work and brought it into Photoshop. I used the Timeline panel to review each frame individually, which helped me determine what keyframes I might use for my skeleton animation.

I’m not ashamed to admit it took between 2-4 hours of experimentation before I finally got an animation I was happy with (yes, I totally fist-pumped for joy!) The solution was painfully simple. Can you figure out what I did?

I don’t want to spoil future course-takers with the how of my solution. But I will say that struggling to achieve my vision helped me get comfortable with Proto.io pretty quickly. So don’t be afraid to try out a challenging idea! Making mistakes and figuring out how to fix them will help you learn faster.

Making Cards Flip

For my app’s design, I wanted to create flashcards that would flip when tapped.

Joe warned me (encouragingly) that this would be tricky. Proto.io has a built-in animation for “flipping” from one screen to another, but nothing for flipping individual UI elements.

I was determined to conjure up a solution.

Luckily, I had a familiar app to draw inspiration from: Quizlet.

I’ve been using Quizlet to create an epic set of 100+ flash cards to study Celia Hodent’s The Gamer’s Brain (which I plan to share publicly when they’re finished—stay tuned!)

I opened Quizlet on my phone and recorded my screen as I went hunting for inspo. I was pleasantly surprised to spot not just one, but TWO great examples of card flipping animations!

I took my screen recordings and popped them into Premiere Pro to study the animations frame-by-frame. I realized I should be able to animate this card flip in AfterEffects, which I could export as a Lottie file and import into Proto.io.

After watching a relevant tutorial, I built my card flips. Then I downloaded the Bodymovin plugin for AE to export them as JSON files, and used a free web-based JSON preview tool to double check what they looked like.

Unfortunately, the card flip didn’t work in Proto.io… at first.

I was able to trigger the first flip of the card, but not the second one.

I tried a bunch of things that failed, until it occurred to me to make a separate “playground” screen in Proto.io just to troubleshoot ideas. Having this playground screen helped me focus on debugging just this one feature, without being distracted by the rest of the prototype (or living in fear of breaking the whole thing.)

I ended up implementing a funky workaround: two separate buttons on one flashcard, one for flipping forward and one for flipping back. Not perfect, but it’s a card, and it flips, so it’s acceptable.

Making A Smooth Introduction

Having achieved a card flip animation, I wanted to get granular with my animation skills. What better way than making a smooth loading screen?

For that, I got inspired by Quizlet’s mobile loading screen, which features a nice gradient transition from light to dark.

Mapping out how I would animate & prototype a loading screen

Bringing the loading screen to life in Proto.io

In the video below, I recorded and slowed down the animation process. Here’s what you’ll see:

First, the “script” or chain of interactions, from the initial triggering actions to the resulting callbacks
Next, you’ll see the animation timeline view as it plays from opening to loaded to load out
Finally, you’ll see how it all comes together at full speed!

The Final Prototype for Quizzie

If you didn’t catch it at the start of the blog, here’s how the final prototype ended up! While there’s many things I could add on or polish, I’m just happy to have learned so much in such a quick period of time through Joe’s course.

Final thoughts on Proto.io

While I assume that Proto.io is not as robust as Axure, ProtoPie, or Invision (rest in peace, king), it’s still pretty awesome to see how versatile this tool is.

I would love to see the Proto.io team implement the kind of element placement and pixel-perfect spacing guidance that Figma offers (like holding ALT to check pixel distances), so you can have finer control when building screens.

It would also be nice to see the screen state transitions timeline become more user friendly. It’d want to see where exactly the playhead is “aiming” at on the timeline (with a vertical line that goes down, like you’d see in Premiere Pro or After Effects.) It would also be nice if elements in the timeline were a little “sticky” as you moved them around, so that matching up animations would be easier. (Proto.io team, I’m ready to help you or test that out!)

Shoutout to these designers:

Their Figma community contributions helped with this project:

@Geen for their Trophy illustration tutorial (their work is so cute!)
@erenkocak for the loading UI elements (their animations are sooo smooth)

Have thoughts on my prototype? Questions on Proto.io? Feel free to reach out on Linkedin! 🧠

Irene Geller https://irene-geller.com