GoPro is the world's leading activity image capture company.
GoPro produces the HD HERO® line of high-definition wearable and gear-mountable cameras and accessories, making it easy for people to capture and share their lives' most exciting moments in high definition. GoPro's products are sold through specialty retailers in more than 50 countries.
UX Design for The GoPro HERO+LCD Camera
The GoPro HERO+LCD is latest entry-level camera in GoPro’s product line. It is intended to be the replacement of the extremely successful GoPro HERO camera, the number one selling video camera on Amazon. It includes wireless connectivity, a rear LCD screen, and the ability to edit video directly on the camera.
CRM’s previous success designing the UX for the GoPro HERO made us the logical choice for the HERO+LCD. Acting as an extension to GoPro’s internal UX team, CRM worked closely with GoPro’s product, engineering, and QA teams to release the HERO+LCD on time and on budget.
With the release of the HERO+LCD, GoPro introduced the ability to trim video directly on the camera—just one of the examples of advanced functionality previously unavailable on any of GoPro’s cameras. Leading the design effort, CRM created an experience that not only was intuitive and engaging to end users, but a UI the development team could actually build. It was quite the achievement, given the hardware limitations of the entry-level camera.
Designing UI in the GoPro Ecosystem
GoPro has historically done a good job of providing a common user interface across their different cameras, in a given release. The most interesting aspect of this project was that we needed to enable existing HERO 4 functionality using completely different interaction metaphors. All the GoPro cameras needed to look and feel like they came from the same family, even if the features and interaction metaphors were different.
Second, we needed to design the experience for completely new sets of functionality that would be initially released on the HERO+LCD, and later on the HERO 4 cameras. The solutions for these later exercises had to be specific to the HERO+LCD, but also needed to positively take advantage of the more advanced interaction metaphor of swipe on the HERO 4 cameras.
The Same, But Different - Swipe vs. Tap
Swipe is heavily used as an interaction metaphor on the HERO 4 cameras. The primary UI design challenge for the HERO+LCD was that the camera’s processor wasn’t powerful enough to support swipe gestures. We needed to come up with creative solutions for supporting the functionality of the HERO 4’s completed with swipe, only using taps. We needed to access mode, navigate media galleries, scrub videos, and numerous other sets of functionality. Our solutions to these various tasks were clean, simple, and unobtrusive. They were also completely in line with the look and feel of the HERO 4 cameras, making it easy to move back and forth between cameras.
“Finding an agency that has that ideal balance of creativity, flexibility, experience and reliability is increasingly difficult in Silicon Valley. Compass Rose Media has always delivered the highest level of quality experience design to GoPro, while proving to be flexible and adaptable so we can keep our competitive advantage.”
Chris Green | Director of UX | GoPro
Smaller Cameras, More Capability
Enabling GoPro users to share their favorite moments from videos, right from their cameras, was a tall order. Videos captured with GoPro cameras can be very large. The only practical way to share video is to trim it to a length that can be uploaded first, and then share that trimmed clip. GoPro has never supported advanced functionality like video editing directly on cameras before. The HERO+LCD was going to be the first. Our solution had to offer various clip lengths, a way to navigate to the section of video a user wanted to share, the ability to preview what the video clip would be, and the ability to save the new clip. This all had to happen on a screen a fraction the size of a smartphone’s screen. We also needed to address entry points to the functionality, i.e., where videos would live in the camera’s gallery, and where users would end up after the clip had been saved.
Another huge obstacle we needed to overcome was the HERO+LCD's limited graphic handling capabilities. The visual language for the HERO 4 line of cameras heavily leverages transparency to define space and groupings, and enable visual elements to be overlaid without adversely affecting a user’s content. The HERO+LCD could only handle one transparency in a given Z-axis for any pixel on the screen. The process we went through to design and implement the timeline for the clipping screen was extensive. The end result is beautifully transparent to the end-user. The final interface is clean, intuitive, and very functional, making for an end-user experience that is both satisfying and simplistic.