Logo Salazarpardo Design & Development

Cover Image for Android Auto

Android Auto

Responsive Design System and OEM Developer Guidelines

UIUXPrototyping


My role
  • Redlines for List and Grid layouts at four breakpoints (S/M/L/XL)
  • Figma prototype with themes, sizes and templates (with supporting design system)
  • OEM Developer Guidelines

Overview

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.

Android Auto Breakpoints Android Auto Breakpoints


Challenges

  • 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

Solution

Android Auto Redlines Redlines

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 List List template

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.


Grid template Grid template

Delivering docs as a 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.