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
- 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.
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.
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.
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.
The homepage includes:
- Hero carousel: new product and featured campaign
- Featured flavor
- All product flavors
- Social engagement and content for active campaign
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.
Pattern Exploration Option 1: Based on 2017 Package Refresh
Pattern Exploration Option 2 : Based on 2017 Package Refresh
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.
Social Share Button States:
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.