UI, UX, Prototyping


The objective of this project was to redesign Betabrand's website for better usability. It was a week-long project done during my 10-week immersive UX Design course at General Assembly.

For those who are not familiar with it, Betabrand is a San Francisco-based company that has a unique business model. They sell their own brand, but also sells designs submitted by members of the community in a kick-starter fashion.


I'll begin with the clickable prototype. These are the wireframes of the redesign. The prototype below is not fully functional, but some of the flows can be clicked through:

View prototype


To begin, we were given a project brief, and spoke to the product manager at Betabrand. From this, and user testing, I found a few key issues that I wanted to tackle with the site:

Key Issues:


ANNA (taken from the brief)

"Anna, a 32 year old marketing manager at a financial services company, has been g-chatting with her girlfriends about their upcoming weekend trip. "Ugh, I don't want to pack too many clothes, I wish I could just wear stuff from work out to hang out for the weekend", she types wistfully into the gchat window. A day later, she sees a betabrand ad for the new yoga dresspant show up on her Facebook newsfeed. "Damn Zuckerberg, you know just how to make me press on ad popups". Off she goes to explore betabrand.


Lululemon, Juicing, Detoxing, Botanical Gardens, Floss, Bikram Yoga, The Barre Method, Orbit Gum, Chia Seeds, Toyota Prius, Smartpop, Organic Dark Chocolate..."


Anna-01 annasfriend-01 Anna2

TODD (taken from the brief)

"Todd, a 27 year old Rails developer at an SF startup is an avid cyclist. When it comes to looks, he's equal parts interested in form and function and he tries to invest in pieces of clothing that support his active lifestyle. His girlfriend describes him as "hipster-lite with an emphasis on ironic sense of humor". He also really likes to support local brands, especially if he hears about them on the many cycling blogs he scans during the week. He's in the market for a new pair of pants, reads about BetaBrand on and decides to explore the site.


PBR, Star Wars, Pickles, Free T-Shirts, Instagram, Snark, Oakleys, Coding Meetups, MVC Frameworks, Halls, Mountain Dew, Traveling, Overpriced Pizza..."


Todd-01 Todd2

Competitive Analysis

I analyzed, and compared these e-commerce and funding platforms:

Aside from a general understanding of information architecture, I took some key features away from other websites.



Urban Outfitters


The largest problem that Betabrand was facing was the enormous and confusing navigation.

I proposed categorizing things into smaller chunks. Here is my suggestion for the sitemap and navigation scheme.


Final Design


Betabrand's current home page

Betabrand - Pants, Jackets, Hoodies, Breakthroughs copy

I redesigned the homepage to:

One of the current website's strengths is the interesting pictures that illustrate the important features of the brand, so I wanted to make sure the homepage still focused on those images, but also made it easier to find information and functions of the website.


I designed the product page to...

Bike to Work Britches

The cart slides out from the side when something is added to it. I also put the shipping calculator inline, so customers could see their cart total before they buy.

Cart Slide out with drop down shipping-01


I designed the product categories page to...

This is Betabrand's current page:

Collections - Betabrand

And my redesign:

Categories Page With Filter Expansion-02

Once again, the clickable prototype can be viewed here