Roll up your sleeves

Discovery and Strategy only account for 20% of the process, the bulk of your time will be spent prototyping, testing and refining designs.

Learn the Logic

Mock It Up

Mockups, also called wireframes or low fidelity designs, are a big time saver for any project. They allow you to hash out the details of the page layout and interaction design before moving into high fidelity designs and development. Balsamiq Mockups is one of the preferred wireframing tools since it is easy to learn and allows for rapid wireframe creation.

Walk Before You Run

If you are new to UI design, take a look at one of the many pattern books available. You’ll also need to get a basic understanding of interaction design and the UI framework or library your developers will be using. If you rely on standard controls, established patterns, and stay in the context of the scenario, you are more likely to design a usable product.

Expert tip: Avoid the ‘hipster designer disorder’. It’s characterized by an intense need to create novel designs just to be different. Typically leads to unintuitive interfaces with astronomical implementation costs and low adoption.

Adding Interactions

Prototyping is used to communicate the intent of a design both clearly and effectively. Prototypes help you to flesh out design ideas, test assumptions, and gather real-time feedback from users.

Aza Raskin shares some tips here on How To Prototype and Influence People. For specific instructions on describing interaction in Mockups, check out this article.

If you’re working closely with a fast development team, maybe you can skip prototypes and go to code directly from the wireframes.

Testing Tools

Face to face testing is nice but don’t despair if your users aren’t local. There are some great remote testing tools available, depending on your need. Here are few popular tools: UserTesting.com,OpenHallway, and UserLytics.

Learn & Iterate

The field of UX is adopting both Agile and Lean Startup principles, including getting feedback early and often to avoid spending time going down the wrong path. The early phases of Discovery and Strategy should set the right course, but it takes a concerted effort to stay on track.

The Centerline

Don’t let the notion of “perfect” stand in the way of sharing your mockups. Start with internal reviews to make sure the designs are meeting the business objectives, then validate with your users.

Expert Tip: Test with your users once a week. It doesn’t need to be many users, 5 or even 3 a week if you test regularly. Read more.

If you haven’t already, now is a good time to start working closely with the development team; they can steer the design away from a technically infeasible or prohibitively expensive solution. And pull in your content strategist and creative team as well, you can quickly bring them up to speed on the project objectives and strategic direction with a walk through the personas, storyboards, and prototypes.

Handoff?

There is no handoff to an unwitting development team, or a tricky political situation to get sign off from the higher ups. By pulling in your stakeholders early and focusing the team on the right outcomes, you already have alignment. By collaborating with key contributors early on, there will be less dissension during the development and release process.

Launch

Now the real fun begines, collecting customer feedback, evaluating the analytics, maybe even some A/B testing. For better or worse, the quest for the best UX is never done. But you can leverage your new skills and tools to continue to refine your product to better meet your objectives.

See Examples

Getting Digital

We used Balsamiq Mockups to create our wireframes. First we laid out all the screens similar to our winning paper prototype, then we added in specific UI controls.

There aren’t many resources available yet on tablet design patterns, so we drew from other sources like web application patterns, and kiosk design best practices. At the core, we were simply designing a transactional tool for browsing and ordering, so most of the UI relies on common shopping paradigms.

Zen Mockups
Zen Prototype
Lucky Robot Launch

Prototype & Test

We created an interactive mockup. This is a script based prototype: customers were asked to order a drink, then appetizer, followed later by an entree, then pay with a credit card. Try out the prototype in myBalsamiq.

Sticking to our original guerrilla research approach, we tested the designs on existing customers as they waited for lunch. The results were positive for the simple ordering flow, but the design for Build Your Own Bowl (pick a protein, pick veggies, pick a sauce, and a starch) was cumbersome. The 4 step process illustrated in the paper based menus didn’t translate well digitally.

Going back to the drawing board, we came up with a casino style spinner for building a bowl. We worked with the development team to prototype this with HTML5. Test, revise, code, repeat… then launch.

Finale

Adam launched his new restaurant, Lucky Robot, in October 2012, 6 months after the initial UX work. The iPad menu app is core to the fun and funky customer experience, and Adam’s original objectives have been met: no more lines, customers order more, and it offers a unique twist to the traditional dining experience.

Test Your Knowledge

You Scored:

Ranking:

Access UX Design Resources

Books

Design Basics

Patterns & Best Practices

Articles

About Wireframes

Ditch Traditional Wireframes

By Sergio Nouvel Read it…

Sketching

Sketchboards Discover Faster Better UX Solutions

By Brandon Schauer Read it…

UI Design Patterns

Build Your Perfect Interface with UI Design Patterns

By Ivaylo Gerchev Read it…

Design Patterns for the Web

By Jake Rocheleau Read it…

Ultimate guide to table UI patterns

By Janko Jovanovic View it…

Design Patterns: When Breaking the Rules is Ok

By Rian van der Merwe Readit…

Touch Gesture Reference Guide

By Luke Wroblewski Get it…

Complex Navigation Patterns for Responsive Design

By Brad Frost Read it…

Designing Data Visualizations

By Noah Iliinsky Watch it…

Prototyping

Rapid Iterative Prototyping

By Eitan Glinert of Firehose Games View it…

Testing

Quick And Dirty Remote User Testing

By Nate Bolt Read it…

Tablet remote usability testing at Mozilla

By Diane Loviglio Read it…

Optimize Your UX Through A/B Testing

By Matt Berglund Read it…

People

You did it! You’re on your way.

If you made it through and answered the quizzes correctly, your apprenticeship in the field of user experience design is just starting. Dig deeper in your learning using the Resources.

If you have any questions, email us at uxapprentice@balsamiq.com. We’re here to help you on the way to becoming awesome at UX Design.