Phase 3: Design

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.

Mock it up

Wireframes, also called mockups 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 Wireframes 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. Learn more about specific instructions on describing interaction in Wireframes.

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.

---

Learn and 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 wireframes. 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 begins, 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.

Getting digital

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

At the time of the project, there weren't many resources available 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.

Prototype and 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 Balsamiq Cloud.

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, 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.

---

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 with more Resources.

If you have any questions, send us your feedback below. We’re here to help you on the way to becoming awesome at UX Design.