Raspberry Beret: Designing the Boutique and Digital Experience Through User Research

The Raspberry Beret Prototype

Role

UX Researcher

Project Type

UX Research

Duration

8 weeks

Deliverables

Logo, mockups, journey map,
sitemap, spider map, prototype

Problems

  • Raspberry Beret is a funky consignment boutique selling luxury vintage clothing and accessories.

  • They have strong competitive advantages with their two stores in Massachusetts.

  • The brand has lots of personality in real life but, none of that was showing up on their website. It just didn’t exist.

  • It was too busy; a neon green sidebar on a magenta background with red text is nearly impossible to read.

  • The navigation had too many tabs and pages for their online stores. It was redundant and frustrating.

  • Everything was competing for attention and it was simply just too much.

Objectives

  • First objective was to build them a design system along with a brand identity.

  • Raspberry Beret's in-store experience was great but, their online experience was not.

  • Clean it up, cut the tabs and make it easier to shop without getting lost.

  • There’s loud colors, walls of text, and a navigation
    with a gazillion pages.

  • People shop online. If your website is confusing or looks chopped, they're not coming to your store either.

  • A better online experience isn't just a design problem; it’s also a business one as well.

Goals

  • The vibrant colors and funky personality worked
    for the in-store experience.

  • However, it didn’t work for the online experience.
    That same charm online is seen as chaotic.

  • The goal was to take what made the store special
    and make it into a digital experience.

  • Cleaning up the navigation and making it easier
    to shop without getting lost.

  • If your customer can’t find what they’re looking for, they’re leaving and not coming back.

  • Making the website ADA compliant by following
    the recommendations of WCAG 2.1 compliance rules.

“At Raspberry Beret, we believe that there is a social responsibility that comes with buying “recycled” clothing. It’s an easy, economical, and stylish way to help the environment. ”
— Rachael Bankey

Define

Research

Create

Test

Define

1

  • Working in a team of 6, the goal was clear.

  • Give Raspberry Beret a brand identity and a website that actually worked.

  • Comparing the old experience with the new. Designing the brand and digital experience through user research.

2

  • Taken screenshots from the old home, consignment, Meet us, and About us pages and comparing it to my new rebrand.

  • Raspberry Beret has two stores that serve different audiences; college and elderly women.

3

  • The redesign had to work for these audiences
    and it had to made sense.

  • Deliverables included a spider map, mood board, customer journey map, site map, lo-fi wireframes and a Figma prototype.

 
Split-screen Comparison: The Old Raspberry Beret website vs. The New Redesigned Website

COMPARISON: OLD RASPBERRY BERET WEBSITE VS. THE NEW REDESIGNED WEBSITE

 
Screenshot of the Old Raspberry Beret home page

SCREENSHOT OF OLD RASPBERRY BERET HOME PAGE

Screenshot of the Old Raspberry Beret About Us page

SCREENSHOT OF OLD RASPBERRY BERET ABOUT US PAGE

Screenshot of the Old Raspberry Beret consignment page

SCREENSHOT OF OLD RASPBERRY BERET CONSIGNMENT PAGE

Screenshot of the Old Raspberry Beret Meet Us page

SCREENSHOT OF OLD RASPBERRY BERET MEET US PAGE

Research

4

  • Spider mapping let me explore the relationship between the stores, their competitors and vintage fashion trends.

  • Created a moodboard with clothes from the store, colors, and textures.

  • Combined the heuristic evaluation, usability tests, and task scenario into a customer journey map.

  • Compare the old sitemap and created a new one.

  • Created low-fidelity wireframes to map out prototype.

5

  • Ran a SWOT analysis against three competitors; Second Time Around, Boomerangs, and The Garment District.

  • Compared their mission statements, business models, unique factors, and customer feedback.

  • Recruited 2 college students for the usability testings.

  • Each person completed one of these task scenarios; scheduling a shopping party, trying to find a dress,
    or contacting the stores to sell their stuff.

6

  • I watched how they used the site and let them show me where it broke down.

  • The navigation issues surfaced fast.

  • They were clicking through multiple tabs just to reach one destination.

  • One user kept clicking product photos expecting them to be links and got annoyed when they weren't.

  • Built a persona from the research and mapped their journey to pinpoint where the experience fell apart.

 
A spider map I made to explore everything connected to Raspberry Beret

SPIDER MAP FOR RASPBERRY BERET

 
Mood board I put together with photos from the actual store

MOOD BOARD FOR RASPBERRY BERET

The old Raspberry Beret sitemap. Yes, it was really that cluttered

OLD SITE MAP FOR RASPBERRY BERET

SWOT analysis matrix comparing our competitors

SWOT ANALYSIS MATRIX FOR COMPETITORS

The new Raspberry Beret sitemap

NEW SITE MAP FOR RASPBERRY BERET

 
Customer journey map for persona Stylish Sheryl showing pain points and emotional stages during checkout

CUSTOMER JOURNEY MAP FOR RASPBERRY BERET PERSONA

 
Wireframe for the home page hero

WIREFRAME OF THE HOME PAGE

Wireframe showing customer reviews page

WIREFRAME OF THE CUSTOMER REVIEWS PAGE

Wireframe for the newsletter and About Us page

WIREFRAME OF THE NEWSLETTER & ABOUT PAGE

Wireframe for the Shopping page

WIREFRAME OF THE SHOPPING PAGE

Wireframe for the consignment page

WIREFRAME OF THE CONSIGNMENT PAGE

Wireframe of the footer

WIREFRAME FOR THE HOME PAGE

Create

7

  • The biggest fix was making the three separate shop pages into one pictorial shop page.

  • The redundancy was confusing the users.

  • I found that combining the pages eliminated the issue.

  • All I had to do was let the clothing speak for itself.

8

  • The navigation went from 14 overwhelming tabs down to just three pages; Shop, Consignment, and About Us.

  • The eBay, Etsy, and Poshmark pages were grouped together instead of getting their own tabs.

  • Creating a brand campaign thats identifiable in every page.

9

  • The pink palette turned into something cool, modern and vibrant.

  • I didn’t want to lose the brand's personality.

  • Photography became the primary navigation tool.

  • I was inspired by watching users reach for the images during testing.

 
Screenshot of the new Raspberry Beret home page

SCREENSHOT OF NEW RASPBERRY BERET HOME PAGE

 
Screenshot of the new Raspberry Beret consignment page

SCREENSHOT OF NEW RASPBERRY BERET CONSIGNMENT PAGE

Screenshot of the new Raspberry Beret about page

SCREENSHOT OF NEW RASPBERRY BERET ABOUT PAGE

Test

10

  • The wireframes were done quick to establish a basic structure for the prototype until more data came in.

  • The low-fidelity wireframes refined the architecture and the high-fidelity prototype brought the full brand system to life.

11

  • Every design decision can be traced back to the usability testings.

  • The consolidated navigation, the pictorial shop, the image-as-link approach.

  • All of it came from watching people struggle with the original site.

12

  • There’s one thing that I'd do differently.

  • Project constraints allowed, I would have expanded the usability test beyond 2 people.

  • More voices would have meant more confidence in the decisions.

  • With the resources I had, the results were enough to act on.

Nikkia Prim