Work | web & interactive 2017

Bright Beam Goods Website

Bright Beam Goods Website

Bright Beam Goods Website

Complete Online Catalog

In its second itteration, the Bright Beam Goods website functioned as an online catalog with information and specifications for all products for sale. The site made distinctions between retail items and wholesale items, allowing stockists to find SKU numbers, discover new seasonal products, and contact the company.

The site features breadcrumb and menu navigation for quick access to all the products, an product category, or an individual product. Other pages were basic contact and team information as well as pages dedicated to searching specific product text.

The site was designed using Angular.js for a speedy response as well as built-in search functionality for product lists—including a database for all available mistaken lyrics coasters. For retail purchasing, site visitors were redirected to shop on either Amazon Handmade or Etsy.

Desktop Scale

The site features a six-column grid at desktop and laptop sizes, where the site is divided into three levels of hierarchy. The first is navigation controls, the second is overview information, and the third level is detailed content. Much of the site is fixed in position to keep the useful information always visible while browsing products.

The site is flat in UI design to reflect the nature of the products as well as using bright pops of color. The homepage showcases the newest products available and the site is updated seasonally to reflect new items and show information.

homepage
Hompage.
navigation
goods
product
product detail
contact
coaster search
Various site pages at desktop scale.

Tablet Scale

At the tablet scale, the site uses the space to showcase images to give plenty of detail to the product photography. The site functions as a tool for customers to look up products during craft fairs and wholesale shows without any distractions.

All the products are curated alphabetically with new items being marked within the catalog pages.

homepage
navigation
goods
goods
product detail
product detail
product
wholesale
Various site pages at tablet scale.

Phone Scale

The phone scale is based off the mobility features in the tablet size, and works well to still showcase the product photography. All the same pages are available with full functionality on every device.

homepage
homepage footer
navigation
goods
goods
product detail
product detail
wholesale
Various site pages at phone scale.