Garmin

VIRB Action Camera

Centered around the release of Garmin's next iteration of its video camera, built for the professional enthusiast

VIRB Action Camera

About

Garmin VIRB is a line of action cameras crafted for professional niche markets and leveraging advanced data integration and rugged design. At the time, it was one of Garmin's flagship products - the site alone generated over 5 million views.

Role

Working with the awesome web team at Garmin comprised of UX researchers, information architects, copywriters, and developers over the course of 5 months, I led the art direction, UX / interface Design, as well as served as a front-end developer on the project.

The experience

Focusing on the User

User Experience

3 major rounds of user tests, 3 prototypes, and countless revisions were used to determine a broad content hierarchy, and user-flow that ensured users could better navigate and understand the site.

Site Map

This project involved full ecommerce functionality, activity integration, products, shopping, grid view, and home pages. Organizing all of this in a cohesive structure and pitching it turned out to be quite the challenge.

VIRB Site Map
full site map →

Moodboards

What do you feel?

The website led the visual art direction behind the VIRB project, so I had a pretty open opportunity to come up with a look & feel for the site. We kicked off the process by using moodboards that helped define the experience to something that felt actively technical, immersive, and expansive.

moodboards for Garmin VIRB moodboards for Garmin VIRB moodboards for Garmin VIRB

Style Boards

Corralling a Committee

Looking for a challenge? Try getting 30+ people in a large corporation to agree on a design direction for a flagship project. It was crucial to get approval at the early stages of design. I came up with 3 styleboards that uniquely expressed an actively technical, immersive and expansive feel while addressing the goals of VIRB as a product.

Styleboards for Garmin VIRB Styleboards for Garmin VIRB Styleboards for Garmin VIRB

Color Color Color!

Color usually isn't my cornerstone – I'm not nearly as good at using it as other designers I know. What was initally a challenge – using a palette as extreme, youthful, vibrant and exciting as the target demographic – turned out to be a blast.

Colors for Garmin VIRB

Design

Product Pages

A user experienced two separate aspects of devices through a progressive page experience. While both pages centered on the features of the camera, the landing page (the first page) was keyed at what camera features allowed you to do, and the product page focused on the nitty-gritty, specific numbers, dimensions, and buy information.

Styleboards for Garmin VIRB
Moodboards for Garmin VIRB

development

Responsive Second

This was one of the first sites I'd developed in a way that was truly mobile first, not just responsive - Meaning every decision made, from the amount of CSS styles loaded, to the way the Sass was written, to the sizes of images, was minimalist by default.

Credits & deets

Nerdy Stuff

The core of the project was built on the Laravel php framework, and a homebrewed product API. We used Sass to organize our css, vanilla javascript, stash & Bamboo to host and deploy our git repos and Grunt to run our slew of automated tasks.

The People

Credits to those who held a particularly intricate roll to in VIRB's success: Dustin Hayes (front-end architecture, back-end development), Aaron Gurley (project management) & Jamie Swearington (UX & IA).

  • 102

    PSDs

  • 130

    Retouched Images

  • 68gb

    Design files

  • 5,000,000+

    views

VIRB Continued

Since writing this case study, I've had the opportunity to redesign several aspects of the site. In fact, I've redesigned about every page on the site. For better and for worse, it's part of the beauty of the web.