Cover Image for Android Auto

Android Auto

Responsive Layouts Redlines and OEM Developer Guidelines


What we did
  • Redlines for List and Grid layouts at four breakpoints (S/M/L/XL)
  • Figma prototype with themes, sizes and templates
  • OEM Developer Guidelines
Industry
  • Automotive
  • Technology

Context

Huge helps the Android Auto team at Google to translate different specifications into development ready handoff Figma files, with redlines for different screensizes and OEM manufacturers. Part of my role as Lead UX Designer for Android Auto (in the Consumer UX team at Huge) was improving the way not only Huge handed off this files to the Google team, but making sure these specs were as easy as possible to understand and implement for different OEM developers outside of the Google and Huge teams.

Objectives

  • Improving the design and hand off process
  • Improving the ease of use and usability of specs
  • Evolving the Design System library in Figma to support breakpoints and light, dark and wireframe themes
  • Delivering a Figma prototype with variants / options for Layout, Size, and Theme to improve the OEM developers experience reading the specs

Improving the design and hand off process

From debriefing and requirements intake and aligning on the scope of deliverables for each cycle to proposing new ideas for delivering specs files and components back to Google, and make it easier to read, navigate and implement for OEM developers, different parts of the process were improved in the time I worked at Android Auto.

Android Auto Redlines Redlines

Evolving the Design System library

Before I joined the Android Auto team at Huge, Camilo Mahecha had already started working on a Figma library with components and templates. The Google team approached us to deliver an updated set of specs for the List and Grid templates with breakpoints for four different widths and three heights and with Wireframes and Dark and themes support. It was clear the best path forward was to update the specs of the exisitng library, and expand it with new variants that would support the new requirements.

Android Auto List List template

Delivering a Figma prototype for OEM developers

To make it easier for OEM developers (outside of the Google and Huge team) to review and implement the new specs and documentation, we proposed and delivered an interactive Figma prototype that allowed anyone to quickly change templates, sizes and themes, using the Figma library and variants we created earlier.

Grid template Grid template


Case studies