A Large Mobile Carrier

Portal Site & Mobile Experience

Icon Development

Project Goals:
Create a system to give people information about which content is free and which counts against their data plans.

Functional Requirements:
Create a notification system and associated icon/visual cue for alerting mobile users of free data. Also create the patterns for each use case and a developer site with documentation and access to the APIs and mobile components for overlaying into their applications

1 project owner and lead
2 Visual Designers
2 Interaction Designers
1 Researcher
1 Writer
Client product manager, interaction designer, intern and GM

The project was divided into two main phases—the brand, icon creation and notifications phase and the developer website phase.

We kicked off the project with a series of ethnographic interviews to understand how mobile users used their phones in terms of content consumption and how they kept track of their data plan usage. The research informed a series of personas and use cases which helped define the requirements and needs for the notification patterns and best practices.

The team worked together and workshopped brand concepts for the feature and did team brainstorming and narrowing, as well as moodboard generating. The designers then went off and created icon sketches for a dozen or so concepts generated in the brainstorm. Over the next several weeks we had 100's of iterations, sketches and concepts from 7 other visual designers and illustrators and then did a series of quantitative testing surveys to gauge the understandability and learnability of the resultant narrowed down fields of icons. Eventually we made a recommendation for the final icon and used this in our mock-ups.

The website went through a typical UX process - interaction flows fleshed out for each area, wireframes for each page and then visual exploration. Iterations at each stage involved the client team and the Tangible team both in working on files collaboratively.

Final deliverables included specifications for both interaction and visual design for implementation, a voice and tone guide as well as specific copy elements and a set of icons for continued development and branding research.