Learning User Experience Design Series: Prototyping

Part 3 of this series dives deeper into the prototyping phase of the user experience design process. In this phase, you begin to bring your educated guesses to life. You also work towards solving your users' problems by combining user interfaces with some sort of interaction.

Prerequisite

If you are new to designing for human interaction you have to take a step back before any real design work begins and assess the real problems at hand. Putting yourself in the shoes of your users’ is a great way to empathize with their pain points. Getting real feedback from them before developing any prototype is beneficial as you can narrow in on the finer details of the experience from the start.

The previous part of this series examines how a design strategy is crucial toward developing a legitimate user experience. It is definitely a prerequisite to this part of our series so I recommend you read it.

Conceptualizing Methods

Before any real concepts are created you need to target your users and identify what it is that needs to be solved.

There are a number of methods, some you already know of, that are useful in rounding up the data needed to help tailor fit your specific solution(s).

Brainstorming sessions

Since grade school, I think we all have utilized a brainstorming session. The session is geared towards rapid idea generation where no idea is a bad one. Some ideas can be broad while others cut right to the point.

Some different brainstorming methods include:

Outlines/Lists - Go ole’ fashioned lists are great for getting ideas published.
Venn Diagrams - Weigh out the pros and cons or similarities between two things.
Word Maps - If you’re trying to solve a problem in relation to branding or come up with a new alias, word maps often point you in a good direction.
Whiteboard sessions - In a team setting draw out your ideas. This can be words, drawings, or a combination of both for a team to see collectively.
Post-it Notes - Tack an idea on the wall with post-it notes. Different colors can represent different meanings.

Storyboarding

Storyboarding as the name describes tells a story of an experience. Most storyboards are graphical and include a comic strip-like scenario as they are usually used for film or videos. The purpose of using storyboards for user experience design is to demonstrate how a user gets from point A to point B. Think of it as a timeline effect.

Using this method allows you to visualize each step a user must take in order to follow the path to their goal or solution.

Mood boards

Mood boards are like a melting pot of ideas and inspiration. Collectively a mood board represents the tone of experience. A variety of methods allow you to establish a feeling a user can develop when navigating an experience.

If done properly, the end goal is to give the user a sense of accomplishment. If done well, the end goal leaves the user with a sense of accomplishment as well as a smile on their face.

If you can tie in some whimsical elements like characters, mascots, or even clever content you can leave a lasting impression on your users. An example of this is an application like Wufoo.

Their overall tone is playful and stress-free. Their form builder takes the stress out of pesky forms on websites. They make it fun to use their application and pay attention to the finer details which as a user myself, I can appreciate.

Flowcharts

Flow charts represent the life cycle of experience from a user’s perspective. Depending on the privileges set towards a user the flow can almost always vary.

For example, if you are an administrative user you might have more options and functionality available to you rather than if you are just a basic user. Being a basic user means you will have fewer options and functionality available. This paradigm is commonly found in the SaaS market where there are free and pro-rated plans available for a cost.

Flow charts outline pretty much every step a user can decide to take along their journey. These are similar to storyboards but they also outline directions a user may never take but still consider along their way. Psychology plays an important role here as you can visualize the way the mind travels inside a user’s experience.

The build stage

After developing a sound design strategy and doing a bit of prep work using the methods mentioned prior you can begin building prototypes to test your theories(or educated guesses & hypothesis). This stage involves creating quick prototypes of which can be tested by putting in front of users.

A prototype can be anything from a sketch to fully coded concepts. The idea is simply to test a theory or your hypothesis if you are familiar with the scientific method. I mentioned a lot more of this in the first part of this series.

Execute quickly

Time is always of the essence and with that, most prototypes are quick to make and even quicker to toss out. You should never get too attached to an idea as your users’ may instantly prove your theory wrong during a quick test. Don’t worry, I’ll talk about validation(testing) in an upcoming part of the series. It is in that phase where the focus is put towards testing your prototypes with real users.

Spending too much time on a single prototype can result in wasted man-hours or even worse lack of progress on fixing the actual problem at hand. As a result, you may ultimately pay the price and lose user engagement. The trick is to constantly enhance the experience by keeping your user base happy and aware of any change in place.

Different types of prototypes

How you prototype your ideas can vary from project to project. If you are prototyping for a tangible product you may need something fairly close to the final product itself whereas if your product is a software-based platform, you may get away with some basic wireframes or even paper-mockups. Below is a list of ideas you can try in for your next prototyping phase.

Paper and Pen - quickest way to get your ideas across
Wire-framing - you can use paper, pen, or an software to get the job done.
Sketch/Illustrator Vector Mockups (basically more enhanced wireframes - non high fidelity)
Web-based prototyping apps - Marvel, balsamiq and Invision
Native app based prototypes - OmniGraffle, Axure, Pixate, AppCooker, and Origami Studio
HTML, CSS, and JavaScript - takes a tad longer but more realistic.

Disadvantages of prototyping

While most of the time prototyping will get you one step closer to solving a user experience problem, there does come a time where prototyping makes matters worse. This often means a lack of communication among team members, user confusion on an appointed solution or even attachment to appointed solutions by an internal team member(s).

User confusion - Typically, a proposed solution to a problem will hopefully allow the user to connect the dots themselves. Unfortunately, if the problem is complex, some users by getting confused by what the prototype is trying to solve or even point out more problems with the new prototype that never existed before.

Along your user experience design journey be sure to validate often. We’ve all gone through that phase where you are working on something for so long you need a new set of eyes and perspective on it to validate what you are doing is worthwhile.

You can validate with a colleague, a user(if they are willing) or even a stranger if it helps. Offer incentives if you need a lot of responses. People tend to want to help if it benefits them in the long run.

Attachment to prototypes - simply put, don’t get attached to anyone's solution. You are only limiting yourself and whatever problem you are trying to solve by getting attached. Your users’ will thank you for keeping an open mind.

What works for you may not work for your users’

Remember, your users' aren’t you. They may know more than you or they may know less. It is best to expect the unexpected.

Designers and developers tend to pay attention to their own needs first when being presented with a challenge. Problems are often solved with little validation from anyone else. Some software you use daily is likely evidence of this. You know…the kind that makes you want to rip your hair out. Luckily, more and more businesses are paying more attention to user experience design.

As someone who designs these experiences, do your best to limit personal judgment while creating any prototypes or even higher fidelity designs. Having practiced it over and over, you will without a doubt have more working knowledge of good user experience design. Try to remember to not be biased and always test early and often.

Prototyping Today

All new products and services go through a conceptual phase. This is the part of the process that is crucial in working out any issues in what is being offered. Users shouldn’t have to grow with you, but rather be offered the best-known solution to experience. This is after all, what they are paying for when buying products and services on the modern-day market. It takes more work to get from point A to point B but you can rest assured knowing you went through numerous prototypes and validation to arrive at the best solution.