TeamSafer UI

GEICO Proposal (2013)

The first visualization of the mobile reporting UI that would become TeamSafer was for a proposal to GEICO. GEICO’s goal was “to have a new safe driving application which helps users to drive more safely using the existing capabilities standard in mobile devices.” The UI-related requirements included:

• Real-time feedback available via app and browser
• Allow users to customize the application by selecting various elements or features to use
• Must support both iOS and Android
• Include creative user engagement features
• Map overlay capabilities – road segment context is a desirable feature

The pressure was on for fully rendered mockups and I intended to deliver them, but it really condensed the design process. My concern was that the layout would start solidifying in people’s minds before we had thought through the interaction design. I focused on the dashboard and in the time available tried to design something that could really work.

Ultimately the thinking behind the GEICO design flowed straight into the plan for the Aegis TeenSafer app I was working on at the same time.

Tap or click an image to view a larger version with caption. Use the arrows to advance.

Exploring data presentation using horizontal bars. The percentages are an attempt to give the current score meaning by comparing it to past performance. Mockup with horizontal bars and percentages. A weakness is that it doesn’t show counts, just percentages. Idea for putting the count in a circle on top of the bar. Scores are additive in this mockup. A perfect score would be 0 with an all-green bar, as shown for Incoming Calls. Spread from the proposal explaining UI features at a high level.