Information Architecture Design - GoPro website design
Project Overview
The purpose of this study was to evaluate the efficiency of GoPro website and users' buying cycle.
    -   Redesign GoPro website with IA findings     
    -   Streamline the user experience with studies
    -   Revisit the design to reflect stronger branding
    -   Create a stronger P2P presence to gain loyalty
    -   Design a more interactive user buying cycle   

Market Segment
Age 18 to 35
Active lifestyle
Outdoor individuals
Social media driven users
Contextual Scenario
Existing HERO5 users want to upgrade to HERO6.
    -   Compare features and benefits of 2 models
    -   Find HERO6 camera specifications before buying
    -   Customer reviews of HERO6 for peer support
    -   Customer support and GoPro culture are important
    -   Users want to make a sound decision before upgrading
Screenshot of current cluttered navigation bar and users want to have better customer support and a stronger peer community.  The online complaints are overwhelmingly bad.
Product screenshot – the vague product information is hidden behind carousel.
Common Tasks For User Testings on current GoPro site
    1   Find HERO6 on existing GoPro website 
    2   Find features and benefits of HERO6
    3   Find product comparison chart for HERO5 and HERO6
    4   Find HERO6 camera specifications
    5   Find GoPro user reviews and ratings for HERO6
    6   Find GoPro online forum or community on the site
    7   Find P2P feedback on HERO6 camera
Treejack results with given tasks above
   -   The overall success rate is 57% out of 50 participants
   -   Tasks 2, 3 and 4 are to compare features and benefits
   -   Users abandoned those tasks results with no sales
   -   Users find it hard to locate customer service in task 6
   -   Users can not find P2P support in task 7
These simple tasks are important to the users to compare features and benefits of 2 different models in order to make an informative decision in the buying cycle.
Task 2 - Pietree  - 6 out of 10
Task 2 - Pietree - 6 out of 10
Task 3 - Pietree - 4 out of 10
Task 3 - Pietree - 4 out of 10
Task 4 - Pietree- 4 out of 10
Task 4 - Pietree- 4 out of 10
Pietree Results - Task 2, 3 and 4
   -   Task 2: 40% failed to find product information
   -   Task 3: 60% had difficulty to compare products
   -   Task 4: 60% could not find information to compare
The current GoPro sitemap is clearly confusing our users.  They are not sure where to navigate through the site.
Card Sorting
A card sorting exercise to further understand the users' needs to improve the IA for the new design.It also enables to better the information scent from users’ perspective.

click to enlarge

    -   Increase navigation clarity
    -   New design needs more depth and content
    -   Difficult for users to find production information
    -   Users feel the images do not reflect the branding
    -   Create a more informative buying cycle
    -   Better support system to secure users' loyalty
    -   Users want a stronger community / P2P presence
Solutions For Redesign
    -   Rearrange the global navigation
    -   Customer support should be more prominent
    -   Insert camera specifications for all product
    -   Design a product comparison chart for all models
    -   Encourage users to get involved through interaction
    -   Create a stronger online community, cost saving.

Click to enlarge

GoPro Re-design Proposal
After reconstruct the architecture information of the site, I propose a new roadmap for better information scent from user's perspective.  In the high fidelity wireframes below, I mimic the "GoPro" like style images for the new website design to reinforce the brand identity rather than the studio images from the current design.  The blue sidebar gives the users a sense of direction, breadcrumbs - see high fidelity mockup.  When the users select a category on the navigation bar, the rest of the unselected options are grey-out to give the users a sense of where they are at with the new design.  The arrow on the sidebar also confirms the information scent.  The visual charts are all clickable with simple blurbs about the features and benefits.  This creates a more interactive user experience.

Thumbnails of new design

New Wireframing
I use one of the blue tones in the original logo as my base color.  In the high fidelity wireframes, I mimic the “GoPro” like photo style for the new design to reinforce the brand message and to show the active lifestyle of the users.  
   -   The blue sidebar serves as breadcrumbs 
   -   Unselected options will be gray-out
   -   Visual charts with clickable links
   -   Create a more interactive user experience
New Design Elements and Tools
Most of the new design elements were done in Adobe Illustrator then combined the graphic components and photos in Adobe Photoshop.  
Information Architecture Design - GoPro website design - User Testings - Wireframing
Landing Page
Rearrange the navigation bar with prominent support option
“GoPro” like photo to reinforce the active brand message
Sample Page
When the users select a category on the navigation bar, the rest of the un-selected options are grey-out to give the users a sense of direction with the new design.
Breadcrumbs > cameras > GoPro Hero6
Sample Page
Visually display the camera specifications of GoPro Hero6o with clickable icons to product links where users can learn more about the features and benefits.
Breadcrumbs > cameras > camera specifications
Sample Page
All the features are being displayed with clickable links.
Breadcrumbs > cameras > features and benefits
Sample Page
Where users are encouraged to write product reviews for P2P support to create a strong GoPro user community which in turn minimize the customer support cost.
Breadcrumbs > cameras > reviews and ratings
Sample Page
A feature where users can select different models to compare cameras before purchasing.
Breadcrumbs > cameras > compare cameras​​​​​​​
Sample Page
An example: comparing Hero5 and Hero6 with visual cues.  The users can either click on "add to cart" to finish the buying cycle or "learn more" which would take the users back to the original product page.
Breadcrumbs > cameras > compare cameras > hero5 vs hero6

You may also like

Back to Top