Heather Prime
UX Designer & Researcher
Betabrand_thumb.png

UX design, Betabrand

Betabrand | Site redesign concept 

Project summary

BACKGROUND

Betabrand is a clothing company based in San Francisco whose production decisions are based completely off of their customers designs, and votes. 

This uniqe selling point allows their fans to create their own designs, have them voted on and supported through crowdfunding, and produced and sold in store and online by Betabrand. 

Currently, they have lots of support from their super fans but have issues translating their brand to consumers that have never heard of them before.

CHALLENGE

Highlight and maintain core brand values as well as provide a flow to easily discover products.

SOLUTION

A redesign of Betabrand’s site that simplified path to purchase and product discovery based on core user needs and testing. 

Additionally, the redesign showcases Betabrand’s unique business model and communicates values effectively.

Research and analysis

Understanding the brand

VALUES

  • Customer centric
  • Collaborative
  • community building
  • Fun
  • Quirky
  • Innovative

CHALLENGES

  • Keep the customers at the core of the design process
  • Empower users to decide what they want to see
  • Expand to male and female audience
  • Bring model citizen into the purchase path

OPPORTUNITY

  • Effectively communicate 3 pillars of Betabrand to the user
  • Cater to the unique ways women shop
  • communicate values through design

Persona development

Aligning brand & user goals

Information architecture

CONTENT AND FEATURE PRIORITIZATION

cardsort.jpg

I employed a card sort to determine both the categories in which the products would be grouped on the site and to cut down the fluff and streamline the product page. 

The results helped inform the design of the product page. Product story, shipping information, and the make and care were de-prioritized on the page.  The most important information to the users included price, fit, images, and colors. 

 

 

SITE MAP 

My site map was informed through research (interviews and card sort) and made to merge business with user goals. 

The user flows were greatly shortened from the original pathway on the site. 

click to view

Ideation & product design

SKETCHING INITIAL WIREFRAMES

I started off with a three column design to illustrate the 3 bucket approach to beta brands business model and a simplified nav - on a single page as opposed to the continuous scroll.

Testing Results: include larger, stronger CTA’s and more extensive functionality 

PRODUCT PAGES

Using the insights collected during my research phase simplified the product pages to contain just the information that our users wanted to see.

Testing results: Add a title header above the picture instead of just on the right side, add a CTA to customer photos, make tab action clearer 


2nd iteration

NEXT STEPS

  • Further user testing, fully functional prototype, gather client feedback, hover states, search function, pre order vs funding differentiation design, solidify checkout flow
  • Build out mobile site