Supergoop!

Web Design & Development

Project Overview

Supergoop! is a premium brand of broad-spectrum sunscreen products. I joined Supergoop! in early 2015 to provide design direction for the brand’s digital presence and ongoing feature development for its growing Ecommerce platform.

Services Provided

  • User Experience Design (UX)
  • User Interface Design (UI)
  • Frontend Development
  • Web Development

Workflow & Codebase Updates

At the project outset, I established version control for the codebase, implemented a custom child theme, and configured LESS locally – making ongoing updates faster and more stable. It also allowed for a single place to define brand styles – for example, a concise, tidy list of color variables:

/*
** Color Palette
*/

@white:             #fff;
@gray-dark:         #1c1c1c;
@black:             #000;
@sg-blue:           #0055a5;
@sg-blue-light:     #77bcee;
@sg-yellow:         #fee952;
@text-light:        #9c9c9c;
@text-primary:      #555;
@text-semidark:     #4c4c4c;
@text-dark:         #3c3c3c;
@trim:              #d3d3d3;
@trim-light:        #eaeaea;
@bg-light:          #f7f7f7;

Visual Design & Brand Consulting

As a next step, I worked with the Supergoop! team to define accurate digital counterparts for their offline brand guidelines. This involved the design and consistent application (using those handy variables) of the following visual components:

  • Typographic guidelines
  • Color palette values and variants
  • Shadows, trim, and animations
  • UI elements, interactive behavior, and microcopy
Supergoop Desktop Preview
Supergoop! UI Update Preview

Free Shipping Upsell, Store Locator, & More

My ongoing project with Supergoop! involves working with their team to concept, design, implement, and test new features and optimizations. Such updates include a store locator and a shopping cart upsell feature that encourages users to add items that would qualify their order for free shipping. By iterating quickly and testing our assumptions using an array of analytics tools, we have improved on nearly every key performance indicator.

Supergoop Cart Upsell Feature Preview
Supergoop! Free Shipping Upsell Feature
Supergoop Store Locator Preview
Supergoop! Store Locator Feature

Metrics-based Ecommerce Consulting

Ecommerce platforms are some of my favorite projects, as they tend to be focused in their goals and diligent about validating their assumptions. If you have an Ecommerce project and you’re looking for design or development support, I’d love to hear more!

Interested in working together?

Get in Touch