UX Design Beyond the Internet: Three Offline Exercises for App Designers

While the term and job title of UX Designer was born recently out of the tech scene, the practice of user experience design has been crucial to product development since the first time someone handed a friend their latest invention and asked: “What would you do with this?”

The layout of a retail store, the design of a cash machine, the ergonomics of your fancy cheese knife; these things are not simply decided by chance and whim or, at any rate, in the search for perfection, they shouldn’t be.

There is always an argument for the great design being art in its ignorance to necessity, but ultimately form follows function in the products we use day to day. And they have been honed and refined during many years of what we would now call UX testing, analysis, and iteration.

When learning user experience it’s crucial to understand all sides, practical, technical and theoretical. It’s vital to realize that if you’re doing your job right what you put on “paper” today may be proven completely ineffective by tomorrow.

You have to accept that your ideas are not always what will work, and what works is what best meets the business goals at hand. To be clear, by business goals we’re not just discussing monetary values, it could be anything that is crucial to the progression and growth of your particular product/company/service, whether that be friends, fans, or an entire eco-system of shoe-buyers.

Offline UX

Today we’ve laid out three UX Design exercises for you to do anywhere, to stay sharp on the street, in a cafe or at home on your couch. These basic tests and practices will help you evaluate products, ideas, and communication giving you an introduction to UX thinking.

Versions of these tasks can be found as part of the CareerFoundry UX & UI Design Program, which offers students a three-month apprenticeship through a complete and up-to-date overview of UX in theory and practice. Check it out at careerfoundry.com.

1. Active Concepts – User Flows Like Waterfalls

Every product has a process of use or “user flow.” A boardgame, a website, a vacuum cleaner; for every product in the world there is

• an introduction – messaging

• onboarding process – learning

• a call to action – use case

Your job as a UX Designer is to make sure this process isn’t just logical and fun, but that you’ve outthought the user in every direction and can keep them on track. There are several paper techniques for building this backbone to a web app or product that you can do anywhere, so let’s get scribbling!

Card sorting is an offline technique for listing, seeing and connecting each and every aspect of a product. In a website’s case this would be the equivalent of every page and the content within it. All you need is a batch of index cards (or slices of paper) and a marker. To learn how it works in practice, particularly in teams, check out this video demonstration by MindScapes TV:

If card sorting is the dots, user flows are the connecting lines that lead your user on a journey through a bombastic experience. From their entry point, introduction, on-boarding, call to action and conversion, it’s crucial for websites to understand exactly how, step by step, their users are supposed to go through the site and how to get users back on track if they’ve deviated.

These techniques can technically be used for any product type. It may not be easy, but having done a card-sort and user flow for a special edition pair of Onitsuka Tiger shoes, I assure you its possible. Let’s assume however that you’re interested in web and app design and keep the focus digital. Pick one of your many crazy startup ideas, or if you’re unsure where to start, start with You, and grab your scribblers.

Your mission should you choose to accept it:

• Using a sketch pad or a stack of index cards, build a website, first based on a decision about the end goal. Title your work with that goal so you never forget it! Example: “Visitor emails me about giving a seminar at their company.”

• Then lay out the pages and content of a website about you (card sorting). Include everything you feel is crucial, in descending order by priority. Try to recognize opportunities to repeat and emphasize the same pieces of content/calls to action across outlying pages.

• Finally, build your user flow. Page by page, how are visitors meant to experience this information about you/your idea and how much information can you assume it will take to convince them to take action?

Congrats! You’ve just designed a web app. If you’re wondering what to do with all these paper bits now, you could always take our approach, which is to build office lamps out of them….

2. UX in Action – Wireframing Like a Boss

Let’s get real for a second: wireframing is the single most important deliverable when designing an application. However, sketching the skeletal framework of a website and putting “wireframing” on your resume doesn’t mean you know what you’re doing. I often try and quell the hype associated with someone who claims to be an experienced “wireframer” as, unless they know how to build and use them beyond an initial assumption, they may not be an effective UX designer at all.

[For a comprehensive definition and insight to wireframing, check out the Wikipedia on webpage wireframing.]

That being said, wireframes are crucial as a directive, deliverable and visual outplay of the theory and learning we do as designers. They are also incredibly fun (for me anyway) to make and one of the best offline UX exercises you can do! When creating wireframes you ignore the style and look of the application entirely, instead focusing on the flow and overall user experience. Regardless of whether or not you have computer access, you should always start wireframing with pen and paper, it is easier, faster, focused and makes you look like a UX badass.

Now ideally, before building any wireframes you will have made a number of very major decisions (and possibly tested a few assumptions) about your app including targeting, messaging, content, information architecture, user flows, framework, etc etc. But let’s assume that you’ve either A) done all that already, or B) just want to have some fun and test your ideas on paper. And while I could write an entire book here just on wireframes, if you’ve never done this before, take a quick peek at this introduction article, and then come back!

A Beginner’s Guide To Wireframing [http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399]

Your mission should you choose to accept it:

• Start simple. Start with something you know. Before designing your own idea try yourself out by trying to rebuild an existing site. Picture Twitter, or your favorite blog in your head and mimic it from memory onto paper.

• Get creative. Either iterating on the example you just made, or running with your own idea, draw the landing and primary pages of a new website. If Twitter was built for Grandmas, what would have to be different?

• Iterate and simplify. First sketches are never perfect. If you’ve already done a user flow for your product/idea, do the wireframes match and enforce the story? Do it again and again and again until you can’t get farther without testing!

3. Audit and Iteration – Watch the birdy!

Every webpage in the world today is built with a purpose, one singular purpose, which is to make you click on something. Think I’m exaggerating? Whether its the bombastic titles, the sexy images, the flashy social icons, or the .gif banner ad, the very second you land on a webpage it’s telling you to take action. Is the page supposed to inform you of something?

Probably, and more power to the author of that page if they’ve succeeded, but that button at the bottom of the article that says “next article” is there for a reason; perfect system or not, a website’s success is based on traffic and traffic doesn’t count for much if it doesn’t stick around.

You wouldn’t be completely wrong to assume that this ideal was built on the backs of late 90s tech giants, but the “perfect” and ever-evolving call to action is actually the product of a much older, much more practiced medium: Publishing.

Grab a magazine. Go on, any magazine, but don’t open it yet! Take a comfy seat with a cuppa, pad and pencil and when you’re ready: steadily, casually, flip through every page cover to cover, never taking more than a second or two between pages.

Ok done? Now the fun part, answer the following questions:

• Which ads do you remember?

• What were they asking you to do?

• What made it memorable?

Got it? Ok, now flip to one of the ads you listed, preferably a ffull-pager and pay attention to yourself!

• What do you see first?

• Where on the page was it?

• What color was it?

• Where did your eye go next?

Regardless of whether or not you were the intended target of this ad, it caught your attention for some reason. Its “watch the birdy” moment drew your eyes to something memorable as you flipped past it. The combination of branding, layout and messaging is something we try to mimic with every web and app design; but the question is, did it really work? Did they put something in place that compelled you to take action?

• Did it ask/compel you to take action?

• Compelled or not, was the next step clear?

• Was the brand obvious or did you have to look for it?

• Was there anything compelling about the ad apart from the pretty picture?

If your answer was “No” to any of the last bullet points, then the designers of this ad failed. They’ve lost a huge opportunity to leverage something recognizable into something actionable and therefore have also failed to give you, the reader, any sort of value apart from maybe a nice picture of a boat, or dreams of shiny watches.

So now your mission, should you choose to accept it, is to redesign this ad.

• Pick three personas (Eg: yourself, the hipster at the cafe bar and the punk on the street)

• Define a motivation for each persona to be involved with the product/brand in the ad

• Sketch a version of the ad compelled to draw the eye to what’s important and compel the reader of the ad to follow through

Now, this may sound like a lofty exercise, but the point is not to try and design the ad based on “what sells” but to try and understand “what compels action”. In UX we take content and messaging into consideration as much as layout, so what has to be where? What elements could be added/replaced to get your targets active, and how would the voice change in speaking to them?

• You – “Take a picture of this ad hung on your wall, and we’ll send free stuff!”

• The Hipster – “Like us on Facebook to see how our watches are built… in slow motion”

• The Punk – “Hate this ad? Call us and we’ll send you a watch to smash”

In the mission to get them one step beyond the ad and involved with the brand, to take action, to become traffic that sticks around, how do you lead their eyes to what’s important and compel them to follow through?

Three Steps Closer to a Great User Experience

The three exercises above are a great way to get your hands dirty and your brain into the User Experience mind set. Like many positions in the tech field, you’ll find that UX thinking is applicable to all angles and sides of a business and, paired with its marketing counterpart Customer Experience Design, digital products are learning that making people happy is the quickest path to bombastic success.

At CareerFoundry we take User Experience very seriously, having built a three month training program focused solely on the topic. As well as it being a major theme in the office as we work to develop and improve the UX of our own platform every day.

Thanks for reading!

CareerFoundry is…

…the first globally accessible job-ready training program for User Experience design. Enrolled students are paired with an experienced UX Design mentor who reviews, coaches and meets with the students regularly to accelerate the learning curve. Students leave the program with a tested and iterated portfolio piece, real world knowledge to seek positions or work freelance, and a network of other students to connect and collaborate with.