Pancake/French Toast/UX

French Toast

French Toast is our code name for Pancake's next-generation user interface.

Design themes

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.

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

• "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

Another goal for the user experience is that it be self-teaching. 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 and you become familiarized with them. 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.

Design Files

• 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 interactions in French Toast.

Search Page

The goal for search is to make finding and exploring easy. In addition to no-nonsense search-via-tabs, the search overview dashboard aims to be like the front page of a newspaper for your given search term.

We try to identify the following concepts, using them to present information in helpful ways.

• People
  • Flickr/Instagram
  • Twitter, etc
• Places
  • Maps
  • Local suggestions
• Events
  • News headlines/articles

In addition, we have special ways to display:

• Your stuff (boards, pinned places, frequently visited) -- this is always first.
• Stuff friends have pinned
• Web results
• Graph results
• Social network results
• Media (video/images)