Abstract UI Design System

Art direction, Content strategy, Design, Guidelines, Illustration, UX

Google

2019

Abstract UI Design System

New guidelines for depicting product assets

Client: Google, Google Ads scaled support team

Project date: 2019

Industry: Technology

Services provided: Content strategy and curation, Project management, UX UI, Art direction, Creative leader

Project Overview:

Developed and implemented a new style guideline, Abstract UI, to address the lack of consistency and simplicity in UI design within the help center.

Project Objective:

Create a unified framework and style foundation for depicting product screens, enhancing user comprehension and improving the overall help center experience.

Abstract UI_ Style Guide Exploration (go_abstract-ui) (2)-4

C&KE MM _ Multimedia Strategy Playbook (go_ACS-MM-strategy) (2)-3

C&KE MM _ Multimedia Strategy Playbook (go_ACS-MM-strategy) (2)-2

Challenge

Current challenges in creating and maintaining UI product screenshots are hindering efficiency, consistency, and scalability.

The production of literal UI screenshots is a time-consuming and costly process, exacerbated by the rapid pace of product innovation and the complexities of localization. This reliance on static images limits design flexibility and contributes to inconsistent visual representation across Google products, negatively impacting the user experience.

Task

Develop a scalable, adaptable, and consistent abstract UI system.

Create a design system for simplified, non-literal representations of Google’s user interfaces. This system, coined as Abstract UI, will prioritize brand consistency, reduce production costs, and enhance user experience by providing flexibility in adapting to product changes and localization requirements.

Action

Led the creation of a task force dedicated to exploring UI abstraction and developing a universal style guide for all Google product UI abstraction.

This task force consisted of representatives from various design teams across Google.

Key Actions:

Research and exploration: Conducted user research and reviewed existing UI abstraction practices across different Google products.
Style guide development: Collaboratively drafted a comprehensive style guide defining core principles, best practices, and design assets for consistently representing abstract UI elements across Google products.
Collaboration and alignment: Presented the proposed framework and style guide to key stakeholders, including the Reach UX team and the Abstract UI team from Google’s Carbon Design System. This ensured alignment and cross-functionality within Google’s design ecosystem.

Results

The implementation of the abstract UI framework and style guide resulted in a significantly improved help center experience. By standardizing the visual representation of UI elements, we achieved enhanced clarity, usability, and consistency throughout the platform. Positive feedback from both internal and external stakeholders validated the success of the project in meeting user needs and business objectives.

Results:

Positive feedback from design teams and stakeholders.
Increased consistency in abstract UI representation across Google Ads products.
Streamlined design process and reduced production costs for future iterations of abstract UI elements.