Post Image

Website Prototyping: The Hands-on Guide

by
Ben Gremillion
Ben Gremillion

When designing for users, you need to know their end goals and actions along the way. The two are called content and user flows, respectively, and together they form the heart of any great website.

But how do we go from an information outline to interactive design? In this post, we’ll discuss how to turn a set of content into a prototype, rapidly.

Assembling a content inventory

What are we designing? Many designers start from the outside and work their way in, crafting the containers and framework before examining the information that users spend more time with.

When you start designing from the inside out, you design with the user in mind. What they need to see immediately will gain prominence over what you want them to notice second. Navigation bars deserve less attention than the call to action, for example.

As importantly, a content-first approach is also naturally a mobile-first approach. Mobile devices have more limitations, screen size and bandwidth to name a few, and so designing within these parameters force you to prioritize content ruthlessly.

A content inventory is an organized list, spreadsheet, or equivalent document containing all the elements relevant to the end user. A good inventory acts like a hierarchy of information divided into sections.

Content inventory

Your completed content inventory lays out all the possibilities for your user flows.

Planning the core flow with informed decisions

A complex project like a banking website will require many flows, such as:

  • Changing a password
  • Viewing investment options
  • Reviewing 401k
  • Ordering checks
  • Opening a new account, or closing an old one
  • Transferring funds to or from a different bank
  • Paying the credit card balance

Each flow requires a user to weave through multiple content pages. For the sake of this tutorial, we’ll focus just on the credit card payment process, one of the most crucial flows. When you prototype, focus first on the riskiest or most fundamental user flows.

Let’s write it out this user flow:

  • The user lands on the homepage.
  • The user completes their login information and redirects to their dashboard.
  • The user clicks into their credit card balance.
  • The user chooses an account from which to pay the balance. Then submits the request and confirms their balance is paid off.

That sounds like a lot of steps, but there are only three decisions involved: deciding whether or not to pay, choosing an account from which to do so, and choosing to confirm the transaction. Each step must be clear and effortless in our prototype.

Building the prototype

In this case, we’ll build a user flow that lets people pay off their credit card balance at a fictional bank.

Given real content, our goal is to build a mid-fi. Unlike lo-fi designs, which act like boxy wireframes, or hi-fis, which show branding in place, mid-fis demonstrate the flow of decisions users take to accomplish a task. If you’re limited on iterations, mid-fi prototypes are the perfect choice since you don’t waste time on visual design but still provide enough detail for user testing.
In a mid-fi prototype, you’ll want to show:

  • Correct layout of UI elements (navigation, primary content, etc.)
  • Basic colors
  • Basic interactions (no advanced animations or states yet)
  • Correct typography
  • Images in the correct dimensions

Here’s how we’d make it work for our bank website. You can start with Photoshop or Sketch and import into your prototyping tool or just start in the tool.

Login

Logging in is easy: a simple form on the bank’s home page lets users securely enter their account. But we don’t neglect this obligatory step because it’s the user’s first interaction with the bank and its brand. Everything from the color scheme to the microcopy must fit with the friendly-yet-professional tone.

Bank login screen

Account overview

Upon entering their username and password, they see a dashboard that includes their account information. The purpose of this screen is to give the person an overview of their accounts. There are no ads, no upsells, and secondary information is pushed to one side. It’s all about their money.

To help them decide if it’s time to pay, we’ll include their credit card balance on this screen.

Bank dashboard

Payment process

According to the user flow, we know that the person’s next move is to choose to pay the card balance. That’s an easy click — and presents a second decision. At this point, he or she must choose the account to withdraw money from.

Bank pay balance

Decisions take time and cognitive power, so we should make choosing an account dead simple. Each account is listed with as little information as necessary (the account name and balance).

Next the person reaches their third decision: whether or not to commit the transaction. At this point all they need to know is what the transaction’s about. That means we can eliminate the previous decision’s options.

A new screen, or even a simple modal window, will present the information they need to make that decision. Specifically, the account name, the amount to pay, and the approve and disapprove buttons.

Bank confirmation

Success! Clicking the right button confirms that the balance is now cleared.

Getting close to reality makes it work

Notice that each screen in this design uses both realistic colors, typography, and layout — in addition to real microcopy. It’s not fully polished, but enough to start testing.

At this point, we just need to add some basic interactions so people can click through the screens. Once that’s finished, it’s time to collect feedback, iterate as needed, and then test with our users.

Bank process

To complete your prototype, just repeat all the above steps with each user flow.

Conclusion

People visit an interactive website to accomplish a task, not use a widget or admire its graphics. That makes the flow along real content as important as developing a prototype’s UI.

Content-centric design helps find their way along that path. If you’d like to try what you learned in this guide, go ahead and start your free trial in UXPin.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you