Case Study

Adapting the Small to Smaller

In September 2024, GoPro launched two products aimed at distinct user experiences: the flagship GoPro Hero 13 and a more compact model, the GoPro Hero. The GoPro Hero 13 introduced an updated UI optimized for its standard 2.27-inch screen, bringing refined controls, high visibility, and quick access to the most-used features, solidifying it as the go-to choice for professionals and enthusiasts. Alongside it, the smaller GoPro Hero—with a screen roughly two-thirds the size of the Hero 13—offered a more portable option for users seeking a streamlined, ultra-compact action camera. This case study explores the design challenges and solutions involved in adapting the Hero 13’s UI to the Hero’s smaller screen, especially with the added complexity of accommodating localization for a global user base.

Background

Flagship Product: GoPro Hero 13

Purpose: A high-performance action camera designed to deliver top-quality video and photo capture across various extreme conditions, featuring a 2.27-inch screen that enables detailed previews and comprehensive controls.
User Base: Adventure enthusiasts, content creators, and professional videographers.
UI Design System:
- Color Palette: A primary palette with high-contrast colors, including black, white, and blue, used strategically for buttons and indicators.
- Typography: Bold, sans-serif typefaces in clear, legible sizes, specifically tuned for quick readability.
- Layout and Controls: Optimized for a 2.27-inch screen with easy-to-tap controls, intuitive iconography, and a simplified menu structure.
- Interactions: Tap and swipe gestures dominate the interface, providing fast access to recording, playback, and settings.

New Product: GoPro Hero

Purpose: A smaller, simplified version of the Hero 13 designed for enhanced portability, featuring a screen approximately two-thirds the size of the Hero 13’s.
Target Audience: Users who prioritize portability without needing all the advanced settings, such as travelers and casual videographers.
UI Design Challenges on a Smaller Screen:
- Screen Size Constraints: Ensuring clarity and usability on a reduced screen size without compromising GoPro’s recognizable interface.
- Localization Needs: Adapting to various languages and layouts, including those requiring larger text or different character structures, like Chinese and Arabi c.
Brand Consistency: Ensuring a cohesive user experience across both the Hero 13 and the Hero, despite their different form factors.

Challenges

Maintaining Readability and Accessibility: Adapting text and icons for clear visibility on the smaller screen of the Hero.
Retaining Essential Features on a Condensed Interface: Ensuring the core functions are easily accessible despite reduced space.
Localization Across Multiple Languages: Ensuring the interface adapts seamlessly for longer words (e.g., German), and scripts requiring more vertical space (e.g., Japanese).
Ensuring Brand Cohesion Across Models: Keeping the Hero’s UI consistent with the Hero 13’s familiar look and functionality.

Approach & Execution

1. Visual Adaptations for Smaller Screen

Typography Adjustments: Selected a condensed sans-serif font variant that maintains GoPro’s distinctive style while fitting more characters per line. Font sizes were slightly reduced to balance readability with screen constraints.
Icon and Button Resizing: Reduced icon and button sizes by about 15%, retaining essential touch targets but optimizing layout. Adjusted padding to prevent crowding and ensure that buttons and icons are still tappable on the smaller screen.
High Contrast for Enhanced Visibility: Increased the contrast ratio slightly for improved readability on the smaller screen, especially in bright or outdoor conditions.

2. Dynamic Layout for Localization

Flexible Grid System: Built an adaptive grid system that scales based on language length and screen size, ensuring key labels fit appropriately even in longer text languages like German.
Expandable Text Containers: Added expandable containers for languages requiring more space, allowing these elements to resize dynamically while keeping the design visually balanced.
Universal Icon Usage: Where possible, replaced language-dependent text with universal icons to simplify localization efforts and create a visually consistent experience across different languages.

3. Simplified Navigation for Small-Screen Usability

Single-Menu Structure: Reorganized menu options into a single, scrollable structure, placing core features like recording, playback, and essential settings at the top.
Streamlined Gestures: Adjusted swipe and tap gestures for more intuitive navigation on the smaller screen. Added quick-swipe shortcuts for frequently accessed features like switching camera modes or adjusting resolution.
Feedback and Visual Cues: Maintained subtle animations and added haptic feedback to reinforce user actions, ensuring that users get confirmation without relying solely on the visual interface.

Outcome

Consistency Across Models

With these adjustments, GoPro successfully maintained a cohesive UI across both the Hero 13 and Hero models. The smaller Hero retained the recognizable GoPro look and feel, creating a seamless experience for users familiar with the Hero 13’s interface.

Improved Localization Compatibility

The adaptive layout and expandable text elements ensured a consistent experience for users in all supported languages, regardless of character length or orientation. Testing with varied languages confirmed that the design system accommodated longer text without impacting usability.

Scalability for Future Devices

The modular approach to typography, icons, and layout created a scalable framework that can be extended to additional GoPro models or new form factors, ensuring that GoPro’s design system is ready for future iterations.

Key Takeaways

Optimize for Smaller Screens Without Compromising Key Features: Reducing font and icon sizes while retaining essential touch targets helps ensure functionality and readability on compact displays.
Create an Adaptive Localization Strategy: Building in flexibility for different languages, including expanding containers and universal icons, enhances accessibility and user experience in diverse regions.
Balance Brand Consistency and Functionality: Maintaining core visual elements while adapting to screen size creates a unified experience across products, reinforcing brand identity.

Conclusion

By adapting its Hero 13 UI for the smaller GoPro Hero, GoPro delivered a cohesive, user-friendly interface across both models, balancing compact design with essential features. This approach not only supports a consistent brand experience but also lays the groundwork for future product scalability and localization across GoPro’s expanding lineup.