Select Page

eSalon

The Brand:
eSalon is a D2C e-commerce brand specializing in personalized hair color delivered to your door for in-home application.

My Role:
Senior Digital Designer

Projects Below:
• Your Hair Colorist Landing Page Design
• Complete Color Happiness Landing Page Design
• Appointment Booking Page Design
• Color DIY Landing Page Design
• A/B Test, Subscription Email Design
• Personalized Autoshipping Email Design
• Intro to Autoshipping Email Design
• Brand Overview Deck Design

Your Hair Colorist Landing Page Design

The Objective:
I was assigned to create a landing page that would direct potential new customers to the homepage for online booking with a professional eSalon colorist. My aim was to achieve a high conversion rate and low bounce rate.

My Role:
As the senior digital designer, I first teamed up with the copy writer to formulate the narrative for the page based on the creative brief. The focus was on eSalon colorists and their role in the customer journey. I worked in Sketch to create mockups and I included imagery of  actual eSalon colorists for a personal touch. I went through rounds of reviews with my team, talking through the reasoning behind design choices.  Ultimately, the flow of the final layout was dynamic and engaging. Plus, the use of step-by-step messaging makes the page easily digestible. 

The Results:
A success! The landing page had a CVR of 4% and increased appointment booking with eSalon colorists by 18%.

desktop

mobile

Complete Color Happiness Landing Page Design

The Objective:
I was assigned to create a landing page that would direct potential new customers to the homepage to sign up and subscribe. My aim was to achieve a high conversion rate and low bounce rate.

My Role:
I worked with the copy writer to create messaging for the page based on the creative brief. The focus was to guide the customer through their journey once they sign up. I worked in Sketch to create mockups and had review meetings with my team to walk through the reasoning behind design choices before feedback and final approvals.

The Results:
Another win! The landing page had a CVR of 3% and positively influenced homepage subscription sign-ups.

desktop

mobile

Appointment Booking Page Design

The Objective:
Redesign the site page for booking appointments to align with the new branding and increase the CVR.

My Role:
I received the creative brief via Basecamp, which included the copy, link to the branded image database, and the timeline. From there, I worked in Sketch to come up with responsive wireframe variations for review. The wireframes included modular sections and ample negative space to complement the new, minimal branding. During reviews with my creative director, I articulately walked her through the customer journey and my design choices such as hierarchy and placement. Upon wireframe approval, I move into the design phase! Working from the style guide, I strategically choose color to apply and imagery to drop in to the page, along with the final copy. For example, I recommended that we use the bright red color for call-to-action buttons globally, to quickly engage the user, and this was implemented. One more review phase with stakeholders, and after their feedback and approval, I send the Sketch file to the development team for upload.

The Results:
Woo hoo! The redesigned page had a CVR of 4% and increased appointment booking by 25%, which led to increased revenue overall. 

desktop wireframe

mobile wireframe

DESKTOP final

mobile final

Color DIY Landing Page Design

The Objective:
Create a new landing page to educate new customers about eSalon, drive them to the appointment booking page, and increase the CVR.

My Role:
After receiving the creative brief via Basecamp, I worked in Sketch to come up with responsive wireframe options for review. Using the style guide as a reference, the wireframes included modular sections and ample negative space. Next, I had a review meeting with my creative director to walk her through the user experience and my design choices such as hierarchy and placement. I recommended that we highlight some statistics on the page to further draw people in, and that was added right before the call-to-action button. Once the wireframe is approved, I move into design, dropping in color and images. The stakeholders review, and after their approval, I send the Sketch file to the development team to go live.

The Results:
The CVR was 5% (wow!), the bounce rate was 30%, and engagement time was strong. 

desktop wireframe

desktop final

Mobile final

Additional Webpage Design

Landing Page

Hair Colorist Page

A/B Test, Subscription Email Design

The Objective:
Conceptualize and create test emails with slightly different messaging to announce the ending of the original subscription plan, and introduce the new autoshipping plan.

My Role:
I created the layout and design for both test emails in Sketch. I worked closely with the copy writer and sales manager to come up with the two different messages. Test A spoke more generally about the new offering, whereas Test B highlighted the pricing. I made the pricing call-out prominent and comprehensive to see how that would affect customer’s engagement. Throughout the process, I met with my creative director and stakeholders to share my process and receive feedback for edits. 

The Results:
Test B had a higher CVR of 2.5% thanks to the pricing call-outs!

Test A

Test B

Personalized Autoshipping Email Design

The Objective:
Conceptualize and create 3 email segments to phase out the old subscription plan (“The Match Up”) and introduce the new autoshipping feature that will take it’s place.

Email Segment 1

Phasing out original subscription plan only (no offer):

desktop

tablet

mobile

Email Segment 2

Phasing out original subscription plan & introducing offer to sign up for autoshipping with pricing difference highlighted:

desktop

tablet

mobile

Email Segment 3

Phasing out original subscription plan & introducing offer to sign up for autoshipping without pricing difference highlighted:

desktop

tablet

mobile

General Intro to Autoshipping Email Design (4 variations)

The Objective:
Design a branded email to introduce autoshipping to all customers (non-segmented).

My Role:
From the creative brief, I created the layout and design for the email in Sketch by starting with a few options to show my creative director in review. In a lot of cases, it is ideal to provide options to show the range of ways information can be displayed and decide which would work best for our customers. I met with my creative director and stakeholders to share my process and receive feedback for edits. 

The Results:
Ultimately, version 2 was the final approved email thanks to the clear call-to-action paired with imagery in the hero area. It had a CVR of 2.5%.

Brand Overview Deck Design

The Objective:
Conceptualize and create a brand overview deck, featuring the new branding, for the founders to share at expos and events.

My Role:
I worked closely with my creative director and the copy writer to decide the content and flow of the deck. We mapped out each page and once all of the content was nailed down, I worked independently in Keynote to create the full deck. I went through several rounds of reviews, where I received stakeholder feedback. After edits and approvals, the deck was sent as a pdf to the founders.