
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
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
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.
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
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.