Learn the Logic
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.
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.
If you’re working closely with a fast development team, maybe you can skip prototypes and go to code directly from the wireframes.
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 & 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.
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.
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.
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.
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.
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.
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.
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.