Standardizing in-page product announcements
Impact: Standardized visual design for in-page product announcements across all 4 Docker products.Role: I led and designed a new design standard and integrated it into Docker’s design system for cohesive product announcements.
Contribution
Visual Design Design System
Contribution
Visual Design Design System
Contribution
Visual Design Design System
Timeline
August 2023 (1 month)
Timeline
August 2023 (1 month)
Timeline
August 2023 (1 month)
Context
How are announcement differentiated?
At Docker, we use a tiered system for product announcements to effectively deliver information based on its importance:
Tier 1: Major Cross-Product Announcements: For significant updates affecting all Docker products. These promote key features aligning with business goals and receive the widest visibility.
Tier 2: In-Product Feature Promotions: Used to introduce new features within specific products. These targeted announcements appear in relevant product interfaces.
Tier 3: Subtle Feature Indicators: For minor updates or beta features not requiring significant attention. Often represented by small visual cues like beta chips, providing information without disrupting workflow.
Problem
Tier 2 feature announcements are not consistent.
Docker has standardized Tier 1 and Tier 3 product announcements, but not Tier 2 announcements, leading to inconsistent feature rollouts across Docker's four products. Users felt they were engaging with separate tools rather than a cohesive suite. It also created challenges for designers and product managers, resulting in mismatched styles and too many notifications.
Product Goal
My objectives were to:
1. Create a pattern that would work across all 4 Docker products.
2. Draw attention to new features on the page.
3. Align Tier 2 pattern with the style and tone of Tier 1 and Tier 3 announcements.
V1 Explorations
The Breakthrough: Why tooltips worked so well
Initially, I explored various ways to integrate product announcements into existing features across Docker products. I considered different approaches, but most were not effective. However, I found that using tooltips worked well across all products.
V2 Explorations
How do different users interact with tooltips?
Once I identified tooltips as the best method for tier 2 announcements, I documented how different user groups interacted them. This analysis revealed that users valued having control over their experience—some wanted to dismiss announcements quickly, while others preferred to read the details.
Solution
4 Variations
I developed four variations to cover different scenarios Docker might encounter with in-page product announcements. Each variation was tailored to specific use cases, including announcements through an icon, via the side navigation bar, multi-page, and with animations.
In order for this to be in Docker's design system and for for other designers to use, I documented user behavior and design rationale behind each tooltip state.
Reflections
Things I've learnt from this project.
Looking back on my summer at Docker, I've gotta say, it was a wild ride that taught me way more than I expected. Two major takeaways stick out in my mind.
Inspiration truly knows no bounds: By looking beyond the conventional and drawing ideas from diverse sources, I was able to push the boundaries of my design thinking. This approach opened up new possibilities and led to more innovative solutions. It reminded me that as designers, we should never limit ourselves to industry-specific references but instead cast a wide net for inspiration.
Repetition can serve as a strategic function: I gained a deeper appreciation for the nuanced role of repetition in design. Initially, I questioned the need for both an 'X' button and a 'Got it' button to close a tooltip, seeing it as redundant. However, through user research, I discovered that these seemingly repetitive elements actually served distinct user groups. This revelation highlighted that repetition, when purposeful, can be a powerful tool in creating more inclusive and user-friendly designs.
