Login Facelift: Designing a First Impression

I’ve come to believe that to be a product designer is to love the process more than the product (despite what the job title may imply). It’s knowing that the solution to a problem is just waiting to be uncovered by the right amount of sketching, tinkering, discussion, and sobbing through the occasional Illustrator crash.

If we skipped all that messy stuff and got straight to the final design, this job would be boring. Reading the last page of a novel is meaningless if you skip all the pages before it.

Case in point: We just released a revamped version of our login screen for Wistians who use multiple accounts.

It’s a seemingly small feature — one that the majority of Wistia customers may never see — but we love the little details. This project represents a cross section of our product design process here, so I thought it would be fun to explore.

Defining the problem

This part is always trickier than it seems. An obvious need, such as “This login screen for Wistians with multiple accounts is kind of lame” does get the ball rolling, but can quickly snowball and zigzag once it’s being worked on.

A multi-account screen, in particular, raises a lot of interesting questions about how and why people might use multiple Wistia accounts.

After falling down a few rabbit holes, we decided that this design should solve two problems:

• The multi-account login screen isn’t very helpful to users who manage multiple accounts, and it looks more like an afterthought than an intentional part of the login flow.
• A variety of support issues arise when users are limited to one Wistia account per email address.

Exploring the possibilities

Narrowing the project requirements makes it a lot easier to start exploring concrete solutions and sketching ideas, like these!

Version #1: Nope.

Version #2: Closer, but not quite.

Version #3: Hmm … 

We settled on this final direction for a few reasons:

• It displays extra information — like permission level, number of videos, and number of projects — that provides important and helpful context without bloating the screen.
• The vertical “slats” are better suited for displaying many accounts than the horizontal “cards,” which use screen-space less efficiently.
• Including user-provided logos in a design like Version #1 is risky. They tend to look beautiful in carefully-curated mockups, but like puppies, they come in all shapes and sizes and like to ruin things, like design layouts.
• In order to solve Need #2, it was important to provide a way for users to create a new account after logging in.

Refining the experience

As an objective designer, I don’t pick favorites. Buuuut between you and me, this part is my favorite.

Time for the rough design to get polished up and prototyped. My current prototyping tools of choice are Invision and Pixate. Invision is great for quickly putting together user flows. By linking together screens with click targets, we can map out the entire login journey.

Pixate shines when it’s time to create the finer interaction and animation details. Admittedly, it was created for prototyping mobile apps and is better suited for mobile work, but if you’re strapped for the time necessary to learn a new, more web-friendly tool, you can improvise a bit.

If you’re curious, here’s my workflow hack: I created a new prototype in Pixate and set the canvas size to 1024x640px. If you’ve used Pixate before, you know that the prototypes are native and can only be viewed on a mobile device. So I used an iPad in landscape mode to view my work in progress, and when I’d gotten the animations just right, plugged the iPad into my Mac and used QuickTime to record the iPad screen while the prototype played.

Then I dropped that video of the full interaction into the project’s Trello card! If you want to take things a step further, you can use a tool like GifBrewery to convert that video into a gif which can be used in your Invision prototype for the full effect. It requires a bit of legwork, but the results will leave you positively gleeful. Promise.

It’s alive!

Another nice thing about Pixate: its prototypes use real timing and easing curves. This information comes in handy when it comes time to sit down with the engineer bringing things to life. Not only can you show that engineer a prototype of the animations, you can also document the exact times and easing curves used.

In the end, we decided to leave out the vertical scroll transition between the login and account screens because it didn’t quite fit with our animation style and slowed down the whole interaction. With a plethora of new prototyping tools like Pixate, it’s easier than ever to get carried away, so I’m lucky to have teammates who advocate for restraint in interaction design.

Thanks to the skills of our very own Neil, this feature now lives in Wistia! If you’re a Wistian managing multiple accounts, hopefully this makes your days just a little bit easier. If you’re not, I hope you enjoyed this peek into our product design process.

Want more than a peek? We’re hiring a product designer to help shape the future Wistia, both product and process.