Drizzle & Shine Case Study

Case Study:

Desiree Daniels

Tools:

  • Sketch
  • Invision
  • Optimal Card Sort
  • Google Surveys

Time:

2 weeks

E-Commerce Boutique

Scenario:

Drizzle + Shine is Seattle based brick & mortar eco-boutique for men and women’s apparel and accessories. They pride themselves on selling vegan items that are ethically sourced and use sustainable fabrication practices.  Their customer currently must sift through several pages of merchandise to see if they sell specific items. The online boutique appears to be for women only, but upon looking through pages of merchandise it is clear that they also sell both men’s and unisex apparel.

What do you sell here, I can't tell?

The Problem:

Drizzle + Shine has organization and navigation challenges on their boutique website. Their global navigation system is vague and groups many items together that could be better categorized and easier to find.

Global Navigation Revamp

The Solution:

I believe that by reorganizing the global navigation, sales would increase and the bounce rate would go down.

Research

UX Process Overview

Research includes:

  • customer surveys (Google Surveys) of 10 people
  • 3 interviews (Zoom)
  • Research – Affinity map, competitive analysis, task analysis, element analysis,
  • Card sort (optimalworkshop.com)
  • Visual Design
  • Wireframes (designed in Sketch)
  • Prototyping (executed in Invision)
  • User Testing – 3 people

Who considers themselves to be sustainable shoppers?

I began the project by setting up a screener looking for people who regularly shop online and who consider themselves to be ‘sustainable shoppers’.  People who value sustainability and seek out these brands/resources.

I located 3 people who fit this profile out of 10 screeners.

Meet Emily, the Persona.

Aka. "The Lightning Bolt Shopping Detective"

Emily is a representation of all of the sustainable shoppers that I interviewed.  These are common desires amongst them: 

  • “I like to cross-reference styles before I purchase online.”
  • “I research a bunch before I make any purchase.”
  • “I am distrustful of the online market.”
  • “I like to purchase apparel that I’ve bought before so I know it will fit.”
  • “I like shortcuts to expedite the shopping & check-out experience.”

The overall takeaway is the Emily likes to thoroughly research before she shops. She finds a lot of this information through social media and likes shopping to be quick and painless. This led me to investigate the competition.

17 Steps to Check-out

Task Analysis

The task: To locate and purchase a skirt.

I assigned a simple task and tested this task on 3 competitor’s sites to see how Drizzle and Shine held up. 

I found that two sites had this task completed in 10 steps. Drizzle and Shine showed up in a third-place with 17 steps. They lost speed in these three areas:

  • The apparel category includes all men’s and women’s items. There is no distinction between the categories, which slowed down the locating task.
  • Check out process took 8 steps, filling out several forms and click “next” in-between sections.
  • The global navigation link says “Shop”, which you still must click into in order to find apparel. This created an extra step before locating the skirt.
How many steps: To locate and purchase a skirt

The 3 Main Issues & Solutions

1. Global Navigation

  • A redesign of the global navigation to put shopping categories along the bottom of the header on the landing page and sticky header, therefore there was no more need to click on “shop”, this eliminated a redundant step. I also regrouped events, visit, and blog tab into the top right corner together. This still highlights them on the header but groups them into a more logical story.

2. The Check-Out Process

  • Checkout process pages put into 1 auto-populated form. User reviews and clicks pay. This eliminates the previous extra 10 steps on the old site to check out.

3. Lets Now Categorize Apparel by Gender & Item

  • Apparel Category is broken out into Men’s Tops, Men’s Bottoms, Female Tops, Female Bottoms, Dresses, Sale, etc. (instead of “shop” that takes you to another landing page).

7 People Sort it Out

Open Card Sort

I identified that the following headers all worked except for shoes, which were changed to footwear. The outlier was slippers. It was not clear for all participants if slippers would be included in shoes or not.

'Footwear' is preferable to 'Shoes'

Key Card Sort Takeaway

Does this site really have sustainable products?

Element Analysis

Findings: Sustainability was placed on the footer of the competitor’s sites. They did not draw attention to this as an important part of their brand, despite it being a positive distinction from the competition.

To improve upon this, I created shoppable “photo stories” on the front page with clickable headlines calling out sustainable categories, such as “Unisex Vegan Shoes.” These new headlines create intrigue while the photos entice the users to bypass the global navigation to begin shopping immediately. 

Design

I chose the colors blue and yellow to represent rain and sun (Drizzle + Shine).  I used the color yellow for all of the CTA button and cart items. This is a warm and bright color that highlights and prompts action. The blue is grounding as used as the footer and other highlights.

I redesigned the homepage using an Instagram feel with large dreamy photos and catchy category headlines that highlighted the sustainable brand highlights and that the store had men’s categories. I utilized the negative white space on the old home page and added a pop up to go over the new store hours due to the Seattle fires.

Old Home Page

New Home Page

Navigation Redesigned

For the apparel category, I chose to use a slab drop-down menu because there were not enough items in each category to fill a page. I choose to group all women’s tops on one page using carousels to scroll back and forth. The dropdown menu had grayed out categories that were not clickable stating what was in each category. The users wanted to click on these, so the navigation needs more time put into it to redesign.

The Check-out Sequence

Design

User Testing

3 Key Takeaways
  • Color the user feedback notifications, the # of items in the cart.
  • CTA label was not clear. 
  • The menu navigation label was unclear.
  • The gray title doesn’t look like a link.
  • Remove grayed out unclickable links.  “Yes, they provide information, but I really want to click on them.” – User #2