As part of a summer internship at Google headquarters in Mountain View, I redesigned the interaction flow and UX look and feel for a core component of Google+ Hangouts, the group video chat service used around the world.

In addition to my UX design work at Google, I spent half my time doing UX research, designing and conducting usability studies both of Hangouts and numerous other Google Plus features, with my study results directly informing product design decisions.

The Workflow

I use a variation of Gina Trapani’s system described here:
http://lifehacker.com/182318/empty-your-inbox-with-the-trusted-trio
http://lifehacker.com/347335/empty-your-inbox-with-gmail-and-the-trusted-trio

The gist of the system is to treat the inbox as a processing area, a temporary holding tank of items that are yet to be addressed/categorized. I use different colored stars to classify what kind of action an email requires (only star things that require action), then I archive it (or delete it if I don’t think I’ll ever need to refer to it again). I don’t use a lot of labels, but apply those before archiving if you wish.

Then I work off of my starred email lists, using Gmail’s Multiple Inboxes feature so that it shows my different starred items in panels in my main view.

Once you read something in your inbox, force yourself to make a decision about how to handle it right away and then either archive it or delete it. Don’t keep read messages in the inbox.

You either:

1. Reply right away if it can be done in under 2 min, then archive it.
2. Star it if it requires action on your part (must follow-up later, etc.), and archive it.
3. Delete it if you don’t need to refer to it again.

Then when you actually go through your starred items, you remove or change the stars as appropriate. You can of course also apply whatever labels/folders you want, but this system is about workflow, rather than filing. The point is to prevent emails from getting lost in the stream. Once your inbox goes past a single page, it’s very unlikely that you’ll ever follow-up on those older emails.

Gmail Implementation

Here’s the setup in Gmail that makes this workflow work:

Superstars

I use multiple colored stars for classification, a.k.a. “Superstars”. Turn these on in the general Gmail settings area. You can drag and drop the stars on the settings page to re-order them or to enable/disable different colors. On these, start out with the minimum you think you need. Most systems like this tend to over-classify things, then you end up spending all your time classifying things and never actually doing things.

Here are the ones I use, and the meanings I ascribe:

Default yellow star = Needs action on my part
Red exclamation = Needs urgent/immediate action
Blue I = Informational / interesting to read at some point, but does not require action
Orange arrows = Waiting on someone else to follow up – I’ve sent something and am expecting a reply.

Multiple Inboxes

Next I have my inbox view divided up into multiple panes, with the actual inbox (unread, unprocessed items) at the top, then urgent, then action required, then waiting, then drafts. In the snapshot above, there is one unread message in my inbox at the top (from LinkedIn), then a bunch that have been archived and flagged that require action.

To set up the inbox view, enable Multiple Inboxes from the Labs tab. You’ll then get a new Multiple Inboxes tab in your Gmail settings that I have set up like this:

Those weird search queries are shorthand for the different stars. You can test them out in the regular gmail search box to make sure it’s searching for the thing you expect. Here’s a full list of the search terms for the different stars:
http://googlesystem.blogspot.com/2008/07/gmail-superstars.html

Mine are here for easy copy/paste:
l:^ss_cr = Red exclamation
is:starred -l:^ss_cr -l:^ss_co -l:^ss_cb = Yellow star (there is no yellow star shorthand that I could get to work, so this is all starred, minus the other color stars i’m using)
l:^ss_co = Orange arrows
is:drafts = Drafts

Getting Started

To get started, you have to spend a little time going through your inbox, starring, archiving, and deleting everything one by one. Keyboard shortcuts can make this process faster:

j or k for next/previous message, s to star (multiple times to cycle through the different stars), x to select, and e to archive.

Once you process the first few pages of your inbox, you’ll probably be getting into outdated territory, where it doesn’t matter so much any more whether you follow up to those older messages. At that point, select all to get everything still in the inbox, take a deep breath, and archive it all. If you can get past the feeling that stuff isn’t in sight anymore, you’ll be amazed by how good it feels to 1) have achieved inbox zero and 2) have a system in place so that emails don’t get lost in the stream.

Like this system? Have suggestions for improvements? Share in the comments.

Automatic Shortcuts for Common Transactions

The Wells Fargo system automatically learns the transactions you most commonly perform and adds associated shortcut buttons to speed up those tasks. It knows, for example, that I typically take out $100 from my checking account, I skip the paper receipt and instead have a confirmation emailed to my Gmail account.

As a result, I now have a button on the login screen that lets me choose this transaction straight away. This means with a total of five button presses (four for the pin, plus one to choose the transaction), I can get my cash from the proper account, get my card back, and get my emailed receipt, all easily in less than thirty seconds. I don’t even have to press OK to accept my PIN!

Touch Screen Input, Color Display

Instead of the old-style ATM, with columns of blank hardware buttons at the edges of a recessed monochrome screen, the Wells Fargo ATMs also have nice bright color touch screens, with centrally-located buttons that are obviously labeled and easy to press.  As a tall person, I often had trouble seeing which hardware button on ATMs lined up with which choice on the screen because of my viewing angle, and there were almost always more buttons than available options. Instead of having separate labels and buttons, or separate OK/Cancel buttons, the Wells Fargo ATM buttons are themselves labeled.  It’s a much easier to read, and a much more natural mapping — you press what you want to select.

“Envelope Free” Check Deposits

Another feature that I particularly enjoy is the process for depositing checks.  Previously, I was wary of using an ATM for deposits, and to deposit multiple checks was particularly cumbersome.  Everything had to go into a sealed envelope and it was difficult to remember the total amount being deposited. The new system has you feed in a stack of checks without an envelope. It scans the checks, orients them right-side up, displays the amounts it thinks they are for, and displays images of the actual checks for you to confirm the totals.

If you touch a check to see more detail, it shows a larger image of the check, zoomed in to the amount area. From this view, you can drag around the little magnifying frame to zoom in on different parts of the check to see more detail.

Clear Transaction Ending

A final area where I commonly see people fumble at ATMs is in knowing when the transaction has ended.  Often ATMs dispense money, then take too long to print a receipt. Focused on the cash in hand, the user walks away forgetting their card in the machine, as the machine then prompts “Would you like another transaction?” to whoever happens to walk up next. The Wells Fargo ATM prompts the user to remove his/her card as the final step in the transaction before dispensing cash. A “Processing Transaction” message gives good feedback to indicate when the user should continue waiting.

Kudos

A little Googling tells me that design agencies Pentagram and Ammunition Group both had a hand in the Wells Fargo redesign.  Well done, I say!

I am currently designing a mobile app to help parents track child developmental milestones, both for health reasons and for posterity.  The app will guide parents through what to expect at each stage of development from birth to age five and will also serve as a central collection point for notes, pictures, and videos that can in turn be published into a physical baby book.

In order to ensure that the design meets the needs of its intended users, I conducted parent and pediatrician interviews and developed detailed personas typifying the most common potential user groups.  In addition, my design team and I surveyed current and future parents via an online questionnaire, explored the competition in the marketplace, and summarized our findings with workflow diagrams, task analyses, and user characteristic studies in an extensive requirements summary report.

Download the full requirements report (pdf)

Since last Fall I have been working closely with CARE International on a project aimed at helping small holder farmers in Zambia and Bangladesh get easier access to agricultural inputs (seed, feed, fertilizer, medicine).  I designed a system using text messaging inputs to help CARE staff monitor and evaluate the performance of small Agro shops to determine which shops need additional training and support to best service local farmers.

Technology infrastructure is quite limited in these locations (generally no computers and limited power), but shop owners all have sms-capable cellphones.  As a result, the system receives sales and client data from shop owners through structured text messages, and walks the sender through any message formatting errors in an automated, iterative fashion.

In addition, the system replaces a large number of unwieldy spreadsheets with an Android app, used by CARE field staff during site visits to help evaluate shop performance.

Finally, the data collected via SMS and Android is presented through a custom website for rapid data analysis and visualization by field staff, program managers, and donors.

Though the system was originally designed for use in Zambia, CARE sees broad potential for its adoption in similar projects.  I am scheduled to travel to Bangladesh to deploy the system later this Spring.

While I am an avid rider of Atlanta’s public transportation system (as evidenced by my MARTA Promo Video), there are many areas where the MARTA system could be improved.  One such area is MARTA’s kiosk ticketing system.  After continually seeing new riders struggle to complete the most basic of transactions through the kiosk, I decided to take on this project as part of a graduate course in Engineering Psychology:  an in depth study and proposed redesign of the MARTA kiosk system.

The existing system presents every possible option on the first screen even though the vast majority of those options don’t apply to most users.  As a result, users quickly get overwhelmed and frustrated, transactions take too long and result in many errors.

The proposed redesign is workflow-based, guiding the user through the most common tasks, hiding irrelevant options, and exposing additional useful schedule, weather, and local event information at a glance.

Older adults are the fastest growing population in the U.S., but are often over-looked in technology design. Online communication tool Skype seems to have particular appeal for older adults who want to stay in touch with family and friends, but often have limited mobility or funds for travel, and limited technical resources for setting up things like software and webcams.

Through a usability and accessibility evaluation of Skype.com for older adults, I gained powerful insights into the motivations of our elderly participants and developed specific recommendations for improvements to the Skype.com website that would better serve the older adult audience.

Components:

• Literature review
• Survey design
• Accessibility analysis
• Focus group (six older adult participants, I moderated the discussion)

Although I haven’t yet jumped on the Words with Friends bandwagon, at one time I was a fairly serious recreational Scrabble player.  In order to experiment with some data visualization techniques, I recently created some visualizations of Scrabble word scores.  My inspiration for this project is Nathan Yao’s excellent book Vizualize This. All data came from sample games from each of 31 rounds of the 2010 National Scrabble Championships.

The first visualization shows all words played by both players in a first round game.  The second shows every Q word played across all 31 rounds.  And the final, larger word cloud represents every word played by both players in all 31 games.  Each word is sized by points scored when played.  Full size versions available on flickr.

Software:

• python (data scraping and formatting)
• Many Eyes (visualization)

While doing research for my MARTA Kiosk Redesign project, I came across a contest for the best video promoting the “Breezecard” system used on Atlanta’s rapid transit system, MARTA.

After an afternoon of filming (with my wife holding the Flip video camera), I spent a couple afternoons editing and producing the final product and then a few weeks promoting my entry through social media platforms.  I won the Atlanta contest, earning a $1500 prize, and placed third nationally behind entries from Miami and Minneapolis.

MARTA video on Youtube

Components:

• Camera: Flip UltraHD
• Software: iMovie, Audacity
• Marketing: Facebook, Twitter, Reddit, email, blog and forum discussions