BUYCOSTUMES

Head-To-Toe Costume Collection 

 

CHALLENGE

To enhance the current shopping experience by allowing users to get the Head-to-Toe Collection and D.I.Y. Collection with a single click. This allows customers to easily understand what's included with the basic costume, and what else to add to complete the look. 

Our goal was to allow users to shop an entire costume with matching accessories look with ease, whether it’s for an individual costume look or a group costume look, without having to click into 5 different links.

SOLUTION

Enhanced the current shopping experience by allowing users to get the Head-to-Toe Collection and D.I.Y. Collection with a single click. This allows customers to easily understand what's included with the basic costume, and what else to add to complete the look. Customers who viewed this Collection had a conversion rate of 5.7% verses the customers who did not with a conversion rate of 3.9%.

 

MY ROLES

+ UX Designer

+ Visual Designer

DELIVERABLES

: Task Flow

:: Competitive Analysis

:: Persona & User Stories

:: IA

:: Hi-Fi wireframes

:: Visual Storyboards

:: Remote Usability testing

:: Data Analysis

 
 

DISCOVERY

Personas

After months of quantitative data, we were able to gather all the information necessary and work together with our marketing and customer support team to create personas for our current shoppers. 

 

Competitive Analysis

The first step I did was conduct a thorough competitive analysis to see what other costume e-commerce sites are doing and whether anyone else has a better solution. Then the UX team and I created BuyCostumes user personas and wired out the old costume shopping flow. From there we were able to pinpoint the weaknesses of our current flow and where we have room for improvements. 

 
 

Understanding the Current Flow

It started with the users searching for a costume by the group category first. From there, they would have to select which group they would like, and the user would then have to click on each individual costume and accessory landing page to add to cart to slowly build their outfit. 

 

IDEATE

User stories & Proposed flow

userstories.png

After several attempts of trying different flows and user testing them to see the user’s response, we finally came up with a solution to creating a better costume shopping experience. The new task flow was created in order to assist in the production of wireframes. From there,  I created UI including the Costume Head-to-Toe icon and visual storyboards of how the costume collection will look. Because the visual of the icons and what composes of the collection is crucial to the overall shopping experience, I built the wireframes with visual comps to give the user test an accurate feel. We also gave the users to power to customize the “Head-to-Toe” look by having the ability to remove an item from the entire collection, if they want to get a different variation or if they already own an item from the collection.

Collections_ProposedFlow.png
 

VALIDATE

Usability Testing & Journey Mapping

The test results were phenomenal! All the users thought this new costume collection is awesome and intuitive.

GOAL

To identify if new users can successfully purchase a costume with accessories to build their entire look easily. 

TASKs

1. Find a halloween costume for you and your friends/ significant other.

2. Find matching accessories

3. Complete Purchase


Some of the most memorable quotes from the user tests include:

I feel kind of guilty that I whipped through that…but I think it’s an attribute that it was so easy to navigate.
This is simple, clear, and easy to use. Everything I’d want from this kind of shopping website.
 
This is perfect. This is ACTUAL Customization. I don’t have to buy extra stuff I already have. Usually, customization on sites are you can change the size of shoes or the color of makeup. The fact that they’re giving me options to remove items from a collection. The overall product is amazing.
 

VISUAL DESIGNS OF CHECKOUT FLOW

katherineklau_BuyCostumes_Collections5.png
katherineklau_BuyCostumes_Collections7.jpg