MenuClose
Abstract UI
Abstract UI
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.
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.
