Phase 2: strategy

See the forest for the trees. You want a great user experience? Put the detailed feature discussions on hold, and design for the big picture.

UX, not UI

There is a great quote about UI vs UX from Marc Hedlund, the founder of Wesabe. After Wesabe folded, he wrote an article Why Wesabe Lost to Mint, where he mused that “while I was focused on trying to make the usability of editing data as easy and functional as it could be; Mint was focused on making it so you never had to do that at all. Their approach completely kicked our approach’s ass.”

Finding the kick ass approach

Time to reconvene with your team for an interactive strategy session. Use your prioritized personas and customer journey map to determine which problems to tackle first.

Go broad and brainstorm possible solutions to your customer’s pain points. Don’t rule anything out as technically infeasible or too expensive, but avoid going deep; this session is to generate possible approaches, not create UI designs.

Expert Tip: Try starting sentences with “Wouldn’t it be cool if <insert persona name here> could just…?”

Storyboarding 101

Once you’ve identified some possible solutions, storyboards can offer a quick way to get feedback on which ideas resonate with your users. Artistic skill is not required; one of the most popular comics on the web, xkcd, relies on stick figures for communicating both simple and complex interactions.

Expert Tip: Use storyboards when you want to keep discussions focused on people and their goals, compared to flow diagrams which can be more exhaustive tools for scenario mapping.

See tips for how to craft a story, and how to use Wireframes in your Agile user stories.

Test early and often

Validate these storyboards with your users, they’ll let you know when you’re on the right track.

Expert Tip: Take pens and paper to these session and let participants sketch too, or use a collaborative tool like Balsamiq Wireframes.

---

Conceptual designs

If your storyboards were a success, it is time to move forward. Now that you have the right mental model identified, you can start exploring possible conceptual models for the interface.

What’s the difference between a mental model and a conceptual model? The Brain Lady, Susan Weinschenk, explains it in the article The Secret to Designing an Intuitive UX.

Draw from experience

Take a look around at other products who have the same mental model, what design patterns and flows are they using? Make sure to look outside your industry for inspiration.

Expert Tip: Use a tool like Evernote to build your own design library that you can turn to for inspiration.

Next, pull out the sketchpad again. If you are working as a team, break into groups and try Zaki Warfel’s 6-8-5 system. If you are by yourself, find a partner to help you for an hour or so. Draw 6 to 8 concepts in 5 minutes, then pitch and critique. At the end, narrow it down to 2-3 concepts for testing.

Prototype and test

You can stay low fidelity with paper prototypes, or use a tool like Balsamiq Wireframes to create a digital version. The conceptual designs should focus on flow, not on specific UI controls. You can use the design scenario from your winning storyboard as a script for testing out the concepts.

Site map (alpha)

Once you get a solid concept designed, you can start the site map. This is another dirty deliverable, “not because it is imprecise or lacks details, but because it can change”, Chris Farnum at IA Summit 2011.

This map will help prioritize UI design and development efforts since it highlights the screens for the most important flows.

Expert Tip: Use color or placement to indicate which screens fall in the MVP and which do not.

A new model?

We used our research and design principles to guide the strategy session with the stakeholders. We looked at the pain points in the current customer experience and came up with some great ideas: rely on the iPads for ordering, but have hostess and waitstaff for seating and service, use up-selling in the menu to promote multiple courses, a mounted iPad for fast To-Go orders.

Then we drafted storyboards to reflect the new experience for our highest priority scenarios.

See it in action

We sketched up a half dozen different ideas for a simple ordering flow. Our inspirations came from retail apps (shopping cart/ tray), content galleries (photo based browsing) and games (quick transactions).

Our first review was with the stakeholders, followed by user validation. We set the stage with the common scenario, then showed customers various concepts to see which “clicked”. You can see the paper prototype in the video above.

Fast feedback

The slide-in menu was a clear winner, the location and interaction made it easy to find and navigate. And the shopping cart metaphor was spot on, although we would need to spend some time in the Design phase to refine the conceptual model (the shopping “carp”, a fish instead of a basket, was not well received).