Web & Graphic Design

Website Redesign for Home & Body Brand

Website redesign shown on 3 different screen sizes

Project Date:

Fall 2022

Overview:

Sea Witch Botanicals (SWB) was in need of a website redesign as they were going through a rebrand. I worked with them to establish their new brand guidelines, redesign the site, and migrate to a new Shopify theme.

My contributions: 

Brand style guide, mockups and prototypes, website build in Shopify, upgrade to Shopify 2.0

Challenge:

Create a mobile-optimized e-commerce site that’s easier for customers to use and represents the rebrand.

Objective:

Design a site experience that more accurately tells the story of the brand, highlights their value propositions, and speaks directly to their target demographic. Of course, the goal is that all of this translates to a higher conversion rate.

Solution:

A responsive website with a brand new Shopify 2.0 theme. 

Tools used:

Figma; Adobe Illustrator; Shopify

Figma logo
Adobe Illustrator logo
Shopify logo
Animated gif of a website's navigation in use
Navigation prototype

Simplified Navigation

SWB has a large catalog of products and dozens of different collections. The former navigation was confusing, and even frequent customers had a hard time finding products they were specifically looking for. 

I suggested a simpler model – Shop By Product, which allows users to shop by product category, and Shop By Scent, which introduces a potential customer to the scent families available at SWB.

Video Section

I edited some video taken by myself and another person on the creative team to add to the homepage. This looping video plays in the background of what I called the “Manifesto Section”, with the goal of creating the Sea Witch vibe to really bring the audience in.

The "Manifesto" section of a client homepage

The "Manifesto" Section

Sea Witch Botanicals creates special products. They take a strong stand on synthetic fragrances, fillers, and other nasty ingredients that are known to have negative health effects. Many of their loyal customers shop with them because they have sensitivities to these types of ingredients.

The Manifesto Section was designed to speak to their target demographic, to highlight their value proposition and be more vocal about their stance in the field.

Full Homepage Mockup:
Before & After

My redesign of the homepage included several important pieces that were missing from the old site or needed improvement, including:

  • Social proof and press mentions
  • A clear USP above the fold that explains who they are, what they do, and who they do it for
  • Simplified navigation that makes it easier to find the products a customer is looking for
  • The brand’s value propositions and what makes them unique in their field
  • Clear information about their impact and how they give back
  • Simplified footer that makes it easy to find additional information

Before:

After:

Homepage mockup for website redesign
Figma mockup of homepage design

Results & Lessons Learned

Unfortunately, I stopped working for the team just before the new site was launched, so I don’t have access to analytics on how the changes performed. I did, however, learn a lot from this project. Here’s a few things I learned:

  • I got more comfortable creating clickable prototypes in Figma
  • I learned how to mine reviews for customer insights as I didn’t have the time or financial budget to interview users
  • I gained confidence in advocating for my ideas and presenting my designs to the team
  • I researched a LOT about customer psychology, how to make the audience the hero of the story, and Jobs To Be Done