SafeDial Mobile UI
| Deliverables | Wireframes, mockups, styled Android UI, styled iOS UI |
|---|---|
| Activities | Information design, software development |
| Technologies | Apple iOS, Android |
| Developers |
Peter Featherstone (Aegis Mobility) – Android development Eva Pradhan (Aegis Mobility) – iOS development Suryadi Wen (Aegis Mobility) – iOS and Android development |
SafeDial is a feature of FleetSafer, Aegis Mobility’s flagship distracted-driving combating mobile client.
While driving motion is detected, FleetSafer displays a persistent curtain screen that blocks access to the mobile device. SafeDial refers to the function of the buttons (tiles) displayed on the curtain screen for dialing approved numbers and launching allowed apps, such as Navigation, while driving.
Design 1 (2011)
The SafeDial feature was implemented in 2014. At that time I reworked this original proposal into Design 2.
Tap or click an image to view a larger version with caption. Use the arrows to advance.
Exploring layouts for the buttons on the curtain screen. Settled on placing the buttons in a middle section with header and footer.
Interaction design showing how authorized number and app buttons can be added.
Formalization of the layout and the mechanism for adding authorized number and app buttons.
Mockup of the curtain screen with SafeDial buttons.
Design 2 (2014)
For Design 2 we needed to support the display of image avatars and app icons, increasing the real estate each tile requires.
In addition, I wanted to reduce the number of options presented on the screen at any one time. In Design 1 there could be as many as 11 buttons on a screen that is intended to reduce interaction with a mobile device.
I reasoned that if there were four tiles, they could be arranged in a square. This would preserve the layout regardless of orientation, reducing the need to study the screen while driving.
Responsive layout for portrait orientation. In the text I explain the purpose of each screen area and anticipate readers’ concerns.
Wireframes in portrait and landscape orientation.
Mockup showing the result of pressing the passenger button.
Swiping Mechanism (2014)
The design goal was to provide for quick dial and app launch via the curtain screen, while minimizing cognitive load on the driver. The design had to support ‘one-touch’ access to 0 to 4 contacts and 0 to 4 apps.
