GoPro-Hero-01xGoPro-Hero-01xGoPro-Hero-01x
GoPro-Logo-White

The world's most versatile camera

A Webby Award-Winning storefront experience for a new product launch and re-platforming

Platforms

Salesforce Commerce Cloud

Deliverables

Wireframes, Prototypes

Expertise

iA, UI / UX Design

Year

2013

GoPro-Action-1x
GoPro-Action-2x

Discovery

D-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-yD-I-S-C-O-V-E-R-y
GoPro approached LYONSCG to replatform their ecommerce experience for an upcoming new product launch and to support future growth. We adapted to their agile process and migrated existing features while incorporating new interactions to expand on their platform's capabilities, meeting a hard deadline for the launch of their new ecommerce site.
GoPro-Discovery-1x

Information Architecture

I-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-eI-N-F-O-R-M-A-T-I-O-n-A-R-C-H-I-T-E-C-T-U-R-e
Something that GoPro does exceptionally well is provide supportive content around their products by people who actually use them. Users are immediately able to envision the potential of the product and how they would use it. GoPro used to showcase their products strictly through their YouTube channel. As part of this redesign, one of our tasks was to discover new ways to incorporate the concept of visualizing how users would use the products in real-world contexts. We collaborated with the client and development team to create a product browse page that uses existing platform features and provides a tailored browsing experience for their customers.
GoPro-IA-1x

Typically, browse pages contain product images, prices, and user reviews, but they often lack images that showcase how the products are used in real-life situations for their intended audience. To address this, we collaborated with our development team to include lifestyle and action shots on the browse page that demonstrate the accessories being used in context.

We wanted to change how users browse products on this page. Instead of scrolling through a product grid, users can toggle a "catalog-view" and see products in use through action shots. This allows for both traditional browsing and a more immersive experience.

GoPro-IA-2x

Catalog View - Interactive Hotspots

Our team focused a lot of our efforts on the interactive experience for the "catalog-view" for the mounts and accessories browse page. We had designed a responsive masonry grid layout that would showcase activities that the users would want to use their products for, with custom hotspots on each of the photos that directly tied which products were used for which activity. This required a complex understanding of both product data capabilities as well as limiting the potential UX complications of how this would function within a responsive design. I had worked with our development team on searching for a light front-end solution for how we could implement the hotspots so that they wouldn't interfere with platform dependencies or add additional scope.

E-Commerce Experience

E-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-eE-C-O-M-M-E-R-C-e-E-X-P-E-R-I-E-N-C-e
We improved the ecommerce website by adding a new way for users to browse products based on activities. We created a special section called "Shop by Activity" where users could find pre-made bundles of products for specific activities. These changes helped users understand how to use the products and find the information they need quickly while shopping.
GoPro-EE-1x

Shop by Activity - Bundled Products

In another effort to provide their users with a complete solution to how they would actually use their products, we had developed a bundled product that contained both the primary camera customers were shopping for as well as applicable accessory options. This directly aligned with the overall concept of GoPro's new product line that specifically targeted their varying activity-based audience. With their new marketing campaigns for their new product lines, we were able to group products that represented their audience's needs.

GoPro-EE-02

Takeaways

T-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-sT-A-K-E-A-W-A-Y-s
  • Successfully launched within a tight deadline
  • Worked with a diverse team through a fast paced agile process
  • GoPro was named Demandware Partner of the Year 2013
  • Webby Award Winner for "Best Consumer Electronics Site" and "People's Voice Award for Best Consumer Electronics Site"
GoPro-Grid-x
Previous
Samsonite
Next
iRobot – New