Drizzle & Shine Case Study

Case Study:

Desiree Daniels


  • Sketch
  • Invision
  • Optimal Card Sort
  • Google Surveys


2 weeks


E-Commerce Store

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.

The Problem:

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

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.

The Solution:

Global Navigation Revamp

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


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

Discovery Research

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.

Affinity Map "I" Statements

  • 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. She likes shopping to be quick and painless.

Task Analysis

The Check-out Process

The task: To locate and purchase a skirt.

I assigned a simple task and tested this task on 3 competitor’s sites.

Two sites had this task completed in 10 steps. Drizzle and Shine showed up in a third-place with 17 steps. The three identified pain points in their process were:

  • 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 is “Shop”, then you choose a category. An extra step for an online retailer site.
How many steps: To locate and purchase a skirt

3 Issues Solved in 3 Ways

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.

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.

Categorize Apparel by Gender and 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.

The dendrogram below suggests categories that can be grouped together.

Card Sort

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.

To fix this, the front page had shoppable “photo stories” with clickable headlines calling out things like, “Unisex Vegan Shoes.” This expresses some of the sustainable aspects of the brand.


I chose the colors blue and yellow to represent rain and sun. The yellow button is for call to action and cart items. This is a 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

User Testing

3 Key Takeaways
  • Color the User Feedback Notifications
  • CTA Label Needs Clarification
  • Menu Navigation label was unclear
  • The gray title doesn’t look like a link
  • Remove grayed out unclickable links. Yes, they provide information, but we really want to click on them.