Pancake/French Toast/UX

Design Files

• File:French Toast Intro.mov.tar.gz: An intro to French Toast, including an animated demo.
• File:French Toast UX Walkthrough.tar.gz: The master design document for French Toast. Contains wireframes, an animated prototype, design rational and user stories.
• File:French-toast-pinning-and-updates.mov.tar.gz: Further explorations of pins and the updates feed.
• File:French-toast-wireframe-artboard.pdf: a wireframe artboard exploring French Toast's UX concepts.
• File:French-toast-ux-animated-wireframe.tar.gz: An early animated keynote wireframe exploring interaction concepts for French Toast.

Prototypes

See Pancake/Prototyping for rational.

User test sessions:

• Pancake/Prototyping/2012-08 General User Testing

Feature Notes

Notes from feature implementation discussions we've had. These are living, and therefore loose, specs. What we've outlined here are hypothesis on the best way to address user stories. They will probably evolve in response to prototyping.

• Layer Navigation: "I want to understand where in the app I am, and how to navigate within it".
• Search View: "Help me find x. I want the results to be easy to understand".
• Type-ahead Search

Design Approach

Job-to-be-done

Every good app is designed around a core job. This job is the reason a you open the app.

On devices like iPad and iPhone, the importance of the job-to-be-done is critical. Where one app ends and another begins hinges on the job you need to do.

French Toast's job-to-be-done is "help me find x". To make this happen, we're focusing on creating a brilliant search and curation experience.

Design themes

We've designed French Toast around some core user experience principles:

• "Don't do what I say, do what I mean". Use search and intelligent interpretation to help users arrive at what they mean. Instead of presenting the user with error-prone tasks like typing in a URL, why not give them helpful hints with type-ahead search?
• Search is about exploring. Exploring is fun on touch devices. Topical search pages become dashboards for your query, presenting different types of widgets, relevant to the type of search you're doing. Search terms are intelligently interpreted to present information that is related, even if the information is not a text match. Search tabs allow the user to view results for their query through different lenses.
• "Don't make me type". Typing on touch devices is hard. If the user has invested the time to type out a search, we need to make sure they don't have to type it again. A search timeline offers an easy way to hop between searches. Pinning makes it easy to curate the things you do find, and share them with others.
• Privacy is tied to identity. Privacy isn't a switch switch you toggle. When I say privacy, I mean how do others see me? Privacy means making it obvious what is associated with your identity. Some things I want to keep to myself, other things I want to share with the world. Tell the world I think something is cool, that endorsement changes the way people see me. Everything is anonymous (private) unless you broadcast that you like it (pinning).
• Cross-pollination. Social features in Pancake are about finding new and interesting things on the web by following People and Boards (curated topics).

First-run and self-teaching UX

Good UX is self-teaching. It introduces you to concepts in the app one-by-one, building on previous knowledge. Doing this without sitting the user down for a tutorial is kind of an art form, and it's crucial to get it right.

The first time you launch the app, it should present you with one concept and that concept should fit the job-to-be-done: "search". As you use the app, further concepts unfold. Here is our initial first-run path:

1. Search (nothing else is really on the screen)
2. Search dashboard loads, search tabs on the left.
3. Click on a result, viewer launches.
4. Home (search appears in timeline)

At this point, we've familiarized the user with the 3 levels of Pancake.