Betabrand | swaps-k

Consultant- User experience

designer

My Role -

Sketching

Keynote

Omniglaffle

Invision

User research/ Interviews

Competitive analysis

Ideate and brainstorm

Study of persona

Card sorting

User flows

Information architecture

Usability testing

Techniques -

B e t a b r a n d

User research

Personas

Wireframes

Clickable prototype

Key Deliverables -

Scope -

Duration : 2 Weeks

Team strength: Swapna

Betabrand is an online clothing community, based in San Francisco. They design, manufacture and release new products non-stop. Brand new ideas spring to life on their website every day. Most unique quality of Betabrand? The fans of the community can co-design a garment and crowdfund them into existance in a matter of weeks. Due to this unique twist in the garment design, Betabrand products are not just one of a kind but also highly functional ones.

Betabrand fails to educate the users about their products and uniqueness of their brand. Their existing web presence is haphazard and confusing to a user. Thus not living upto the quirky, fun and unique venture that they truely are and not generating enough user participitation which is the soul of their venture.

U s e r - R e s e a r c h

Project in a nut-shell -

Tools -

1. Observations, Interviews, Heart to heart

Users Wondered...

User felt -

“What on earth is a Sucker Lab?”

“Do they have all the products on their home-page? That's weird…”

Target user for Betabrand is a young, modern professional who lives in San Francisco, is interested in promoting a local brand and shows quirky taste in clothing. My strategy was to meet up with eight test users who (mostly) fall in the above category and document their experience as they interact with the Betabrand website.

Some were just asked to interact with the site in general

Some were given a simple task to follow. For eg., find "Black Bike to Work Britches"

Few tasks were more complex, such as "find this + find that + add this coupon + proceed with the check out process"

“Spotlight/Model Citizens/Think Tank …these are

categories for what ?"

“I can create my own garment? How? Where?”

2. Competitive Analysis -

Competitive analysis involved taking a deeper look at few other clothing ventures with similar business values such as Betabrand.

Goal of this technique was to study how the other businesses presented their concept, educated their users and eliminated user pain points.

CONFUSED

EXHAUSTED

UNFAMILIAR

LOST

BONOBOS

ANTHROPOLOGIE

SAN FRANPSYCHO

BETABRAND

Clear navigation categories

Clear (men) target users

Users are educated about the business model

New product information is laid out clearly for the users.

Users are told the story behind the uniqueness of the brand

Clear navigation categories

Confusing nav

B r a i n s t o r m & I d e a t i o n

1. Card Sorting-

Since most of the users could not make sense of product names and categories and found the navagation menu confusing, I performed a fun card sorting experiemnt with the users to study their mental map. To figure out what made sense to their subconscious mind.

Work

MEN

Comfort

Gym

Party

Access.

Bike to

work

pants

Button

up shirt

Sweat

pants

Vajamas

Yoga

pants

Disco

pants

Disco

hoodie

Caps

Shoes

Botanical

tee

Unicorn

tank

Japants

Disco

Leggings

Flip

slips

Bags

Sunglasses

Shoes

Access.

Bottom

Top

Reversible

dress

Work-it

dress

Dress

WOMEN

Most men sorted out clothing items by function

Most women sorted out clothing items by style

2. Persona Study -

Todd- Male, 27

San Francisco, CA

I was provided with the two pre-designed personas. Todd and Jenn. My challenge was to study these personas and identify with their goals.

A developer in a startup
An avid cyclist.

Tech savvy.
Frugal

Quick, to the point shopping
Likes to use coupons.

2. Basic User Flow For Todd -

Use Keyword Search

Use Navigation Menu

Home

" Black bike to work pants"

All the users thought unique garment names were extremely confusing and not helpful.

Product Page

Product Detail

Shopping Cart

Check-out

Apply Coupon

Better visibility for the brand name
Better emphasized main categories
Get the most current look right off the home page
Project Think Tank gets high visibility. Users can upload/vote/fund from the home page
Women's category is emphasized
Blog, newsletter to connect with the Betabrand community
Easy search bar to locate the products fast
User pictures ( model citizens) also get highlighted
User get to read Betabrand's uniqueness in their words.
Clean and concise footer for better customer service

4. Alternate Navigation Schema -

Global header

Primary Navigation

Sec Navigation

Footer

Global header

Mega Navigation

Footer

I explored various ways of structuring navigation menu so the content could be well structured and the user won't feel lost.

W i r e f r a m e s

1. Sketching, User testing and more Sketching.

2. Finalizing the Concept -

2/8 Users preferred

Sec navigation at top

4/8 Users preferred

Sec navigation on the side

2/8 Users preferred

Mega Navigation

6

7

8

9

10

1

2

3

4

5

1

2

3

4

1

2

3

4

5

6

1

2

3

4

5

Better visibility for the sub-categories
Collections get a seperate sub-category
Banner space for most popular clothing/sale/deals
Further simplification of most polular clothings

Filters for better and faster search
Product views from various angels
Enlarged product view
All product customization tools
Suggestions for complementary clothing /accessories
Pictures of real people wearing the clothing product.

Simplified billing form filling
Combined shipping
Combined Payment
Purchase summary before the final purchase
Place the order.

My test users did not feel exhausted with the new design. They thought the site was intuitive and with the design flow sorted out, they could concentrate on the most important thing - unique products and opportunities offered by Betabrand.