Gina Lin
orbit-thumb-1700x1400 -01.jpg

Orbitgum.com Redesign

Designing a brand site to bring customers into a bold and flavorful gum world

Background & Goals

Orbit Gum refreshed their new package designs and the original flash-based website was out of date. This gave Orbit Gum an opportunity to redesign the website to introduce the new package and the new flavors, and also to improve the overall user experience. The goals for the Orbit Gum website redesign included:

  • Encourage product flavors exploration
  • Strengthen information of product flavors and product types
  • Emphasize the “where to buy” feature
Orbit-product-package.jpg
 

Role

  • Designed UI and visual design in collaboration with design lead, developer, project manager, 3D designer, and the development team from Haus
  • Went through design process from UI research, sketching, design exploration, crafting experience, imagery creation, and QA testing
 

Approach & Process

Orbit Gum website is a product-focused site. There were two rounds of new packaging designs in 2016 and 2017. The website’s look and feel is inspired by the package designs that each flavor has, correlated with its distinct color and shape. In order to keep the brand voice—energetic, bold, and fresh—the website leverages animation and transition motion and uses WebGL to create interactive 3D product integration.

 

Navigation (Hamburger Menu)

To invite an exploration of product flavors and to provide a quick glance of available flavors, we have all the flavors in the main navigation.

Final Navigation:
We kept it simple and straightforward to list all the flavors with its connected icons. The background color of the navigation gradually changes as a user explores one flavor to another.

orbitgum_nav.gif

Navigation Option 1:
We showed the packages with the flavors to help people connect each flavor with the new package design. When a user hovers on a product flavor, the product is highlighted and the background color changes.

nav_option1.gif

Navigation Option 2:
We created a different layout using each flavor’s colors and icons. When a user hovers on a flavor, the selected flavor color is reversed.

nav_option2.gif
 
 

Homepage

The homepage includes:

  • Masthead
  • Hero carousel: new product and featured campaign
  • Featured flavor
  • All product flavors
  • Social engagement and content for active campaign
  • Footer

In order to encourage product flavors exploration, we integrated bold colors and patterns to create a gallery-like grid for all product flavors. Animation and hover state also helped to attract people’s attention. We also created 3D type for the Orbit White product feature in the hero carousel to correspond to the product’s chewy characteristic.

orbit-homepage.jpg
 

Pattern Exploration Option 1: Based on 2017 Package Refresh

orbit-pattern-option1.jpg

Pattern Exploration Option 2 Based on 2017 Package Refresh

orbit-pattern-option2.jpg
 
 

Product Details Page

We created a product types selector to help people easily distinguish between the three product types—regular pack, car cup, and 3 pak—and their availability. We used WebGL to integrate a 3D product that people can drag to rotate the regular pack and read the details on the back side.

orbit-product-page.jpg
 

Social Share Button States:

Orbit-share-btn-states-01.jpg

Original button

Orbit-share-btn-states-02.jpg

Hover state

Orbit-share-btn-states-03.jpg

Hover on each social icon

 

Making of 3D Products:
To make the 3D products, we made a texture for each flavor to create the box model.