E-Commerce Website Design
Overview

Founded in Los Angeles, Nasty Gal is a retailer that specializes in women's fashion. 

Challenge

Girls shop at Nasty Gal for specific events, but it's difficult for them to find outfit inspiration and select their size based off of clothing pictured on their models.

Solution

To re-design the Nasty Gal website and include an online lookbook shopping experience focused on discovering new looks worn by real customers.

Details
Role

UX Design | UI Design | Visual Design
 

Timeline

10-day sprint during General Assembly UX Immersive

Tools
Pen & Paper, Pop App, Sketch, InVision, Keynote
C + C Analysis

Because our team was unfamiliar with the brand, we started with a competitive/competitive analysis to to look at current trends in e-commerce. This table shows the areas in which the current Nasty Gal site was lacking, which allowed us to make informed decisions in the re-design.

USABILITY audit
Insights:
  • Product Page
    • Users relied on measurements, because it gave a better idea of how the item would fit on them (see image at right)

    • Expandable side menu didn't allow easy access to product details

  • Add to Cart 
    •        ​Users did not expect to be redirected to the shopping cart screen when adding an item to the cart

  • Check-Out
    • Users were frustrated when trying to edit or delete an item when on the the check-out page   

Model measurements are helpful to users, but are not always enough to help them decide on a fit
CONTEXTUAL INQUIRY
Insights:

I found that the unique design and infinity mirrors in the store encouraged selfie-taking amongst customers. This prompted me to visit Instagram later to find out that most pictures posted at that store shared some similarities:

Further studying their individual accounts revealed that this was a common trend and that Nasty Gal fans enjoy the experience of dressing up, selfies, sharing photos of their outfits and social media.

Neon lights, trendy music, and mirrored walls and ceilings elevated the in-store shopping experience to a new level.
USER INTERVIEWS
Key insights from user interviews:

 

Clothing from Nasty Gal makes a statement— These are not your everyday clothes to be worn while running errands. These are clothes that are worn to have experiences in.

Not only did these girls tell me that they went to these events, but when I went back to their Instagram accounts - I found that these moments were heavily photographed and shared. They wanted people to know that they went, what they wore, and the brands they had on. These clothes, these events they attended, and the things they shared shared on social media, are all part of their identity.

USER PERSONA

With all of the insights I gathered, I was able to put together a persona for Dressed-Up Daisy, who embodies the target Nasty Gal shopper. She comes to Nasty Gal with a goal in mind - to find something for a specific event. Additionally, she gets ideas from real girls on the internet to help her build her own outfits, not models in their catalog.

Knowing the persona's behaviors, goals and expectations, and pairing them with the insights I learned earlier from my heuristic analysis and usability tests, I was prepared to start sketching solutions that would suit her shopping needs while designing the site in a way that would make her online shopping experience frictionless and fun.

SKETCHES

I sketched deas what would address my user's problems, with the current site itself, and based on the needs I uncovered during my user interviews:

  • A cleaned up product detail page, so the user easily find necessary product information without clutter
     

  • A new social lookbook feature, so the user could find the outfits she needed with the help of other customers
     

  • An updated checkout experience, so the user would now be able to continue shopping after adding an item to the cart

WIREFRAMES
NEW FEATURE: SOCIAL LOOKBOOK

Because research showed that Nasty Gal customers first looked for outfit ideas from social media outlets such as Instagram, I created a solution that allowed them to do this while shopping online. This would allow them to discover new outfits based on the Nasty Gal offerings, without having to leave the site. Additionally, it would make it easier for users to determine how an item would fit, based on how it looked on actual girls vs. the site models, because it was important for users to be able to choose the proper size.

Since the social lookbook feature was entirely new, I created a new user flow to illustrate how it would be integrated into the current shopping flow, from browsing to checkout.

Goal: User wants to find an outfit to wear for a specific occasion

Watch this feature here:
USABILITY TEST: HOME PAGE

After adding the new lookbook feature, I made it accessible from the home page, and tested how users would interact with it.

Before

Users were not sure where this banner would take them, which made them hesitant to click on it. Simply placing the new feature on the home page was not enough to get their attention.

After

The banner became interactive, giving users a sneak preview of what to expect— outfit ideas for different occasions.

USABILITY TEST: SOCIAL LOOK BOOK GALLERY
RE-DESIGN: PRODUCT detail PAGE
Before: 

When users add an item to their shopping bag on the existing website, they are automatically taken to the shopping bag page. During usability testing, this frustrated users who wanted to continue shopping. By being brought to this page, the shopping flow was disrupted and users were upset that they lost their place on the page that they were just browsing.

After

The new add-to-bag drawer keeps all items in the shopping bag visible and allows the user to continue shopping after adding items. There is no need to redirect users to the shopping bag page, because they can add items, compare what's in their bag with new items, and edit as they go along. 

Within the drawer, the user is now able to:

  • make changes to her items

  • view her subtotal

  • view the amount left until free shipping

  • enter a promo code.

RE-DESIGN: CHECKOUT PROCESS
Before: 

Users were satisfied with the overall checkout flow, but wondered if they could still edit the items in the bag, in case of a last-minute size change, or wanting to remove the item altogether. This was not possible.

After:

The re-designed flow remained the same 3-step process, but with added visibilty. Each step of the process is more clearly defined, allowing the user to focus on one step at a time, and clearly indicating in green when each step is complete. The user is still able to edit sizes, quantities, and delete items from the bag, saving them the extra step of going back to make changes.