Loading...

Dell Mobile Design System

a Visual Language for Mobile
  • Role: Visual Design Lead, UX Support
  • Released: September 2016
  • Client: Dell
  • Note: Animations by Eric Summa

Challenge

Define a visual language for Dell's new mobile design initiative: Mobile Clarity. Deliver flexible, repeatable patterns to the Dell Enterprise Design Group using modern tools, including Adobe symbols and InVision prototypes.

Solution

Mobile patterns were greenlit to push boundaries and break established rules because of the unique platform. We took the lead on creating an animation library, as the desktop software and web platforms rarely added such perceived "superfluities." Adobe Symbols were crafted for all common features, such as mastheads and alerts.

Define Patterns

The first step was to create a visual language for a mobile program in-need. We found our hero in Dell Open Manage Mobile (OMM). Interaction and visual patterns were created and documented, from Login screens to basic layouts and form functionality. Patterns for in-app education were formed and refined before being introduced into the system.








Symbol Design Library

To transition OMM patterns to Mobile Clarity, the content was first genericized. Then Adobe Symbols were created for all common features, including mastheads, tables, simple card layouts, and even alerts. Animation patterns, such as page transitions and toast notifications, were documented in InVision.

Conversational UI

Looking forward, we dreamed of an even friendlier UI. A shortcut to satisfying the immediate needs of the user. A platform that could provide requested information in moments, without searching through cumbersome navigation. The typical mobile user is troubleshooting in the field, and saving time on task is a top priority. With this in mind, we focused efforts on delivery requested information in as few texts and prompts as possible.