Before / After Summary Snapshot:
UI Redesign of Google ‘twoSTOp’ Cases Consult Contact Manager

Paul Smith <paulsmith@google.com>
Date: 03-15-2013

twoSTOp - fixing a messy 'frankenstein' UI

Problems: The consultant that selects a new case from the tickets list is sent here to review existing Case info in a gmail-style thread.  Actions include accepting / rerouting consults, replying,  marking as resolved, etc.  Some info from the imported Cases UI is useful, however, a great deal of visual noise impedes the user experience; much of the data seen currently in the iframe is irrelevant and distracting.  Another major issue is that the main workflow focus, the message thread, is only given a tiny percentage of real estate and pushed way below the fold. Most of these problems are a result of hasty engineering to force-fit the existing 'Cases' UI via iframe into a cobbled together overlay UI of disorganized controls to fit every edge case.

Solution: The redesign was based on surveys and user interviews to determine primary user flows and controls. The imported iframe UI was eliminated and the new interface only includes primary actions in typical order per use case flow. Primary message thread is moved up and maximized, and all relevant related info is available in side bar, above the fold. CSAT scores improved from 2.2 (before) to 4.4 (after) and TOT in user testing averaged 70% faster*.

BEFORE: twoSTOp ‘cases’ consult view 09-01-12:

Notes:

AFTER: Updated UI Redesign Mock - Consult view - 11-08-12:

Notes:


*(see usability study notes)