BellaVita
E-Commerce Website Redesign
spring homepage mockup clear background.

Client

BellaVita

Role

UX Designer

Scope

2 week sprint

Tools Used

Figma

Trello

Otter

Zoom

Objective 
Improve overall site architecture and navigation to enable easier browsing and help users find relevant content easily.
About BellaVita
BellaVita is a small business boutique located in Oakland, CA. They stock local and independent designers, which fill their vintage store with finds for both women and children.
bv%20logo_edited.png
Understanding the Problem
Task Analysis
The best way to learn about how people use a site is to watch them actually use it. I had 6 users go through specific tasks within the BellaVita site and talk through their process.
Task Analysis Insights
After observing them complete the tasks, as well as some debriefing questions related to their experience, some common pain points were:
Unorganized content
too many categories to choose from
Difficult navigation
primary navigation too confusing and lack of a search bar
User Interviews
With the same 6 users, I collected information on their basic e-commerce habits. Sample questions include:
Which online retail sites do you visit the most
What keeps you goin back to the same sites
What is your biggest concern about buying products online
Competitor Analysis
With an idea of the users’ pain points in mind, I visited competitor sites to see how they approached their user’s experience. I chose Gap and JCPenny since users mentioned they shop there frequently during interviews.
Defining the Problem
Persona
Meet Victoria
new persona.png
Based on my interview findings, I created Amy, a user persona. I took the needs directly from my empathy map findings and goals from those directly expressed by the interview participants. Amy portrays a composite of Rudy's customers, so I will think of her as the potential user that I want to design for.
Her main needs and goals are that: 
1. She would like the be assured the clothes will fit correctly and that the material is worth the price.

2. She just wants a simple in and out shopping experience.
Problem Statement
Users needs a faster and easier way to get the clothing they want from BellaVita’s online site because its current layout frustrates and confuses them.
Developing a Solution
Visual Hierarchy
In the previous design, the logo took up the majority of the screen, so Victoria was having trouble realizing where to go to shop. In the mid-fi I reduced the size and made the primary navigation much more visible, changing size and boldness.
Search System
One user said “The search should be on top, right in front of my face”. Say no more.
Before
After
Labeling System
Victoria was wasting time navigating around the entire site looking for what she wanted, but now with the new primary navigation, she no longer has to go through the extra step of clicking on “Products” to access these categories. To decide which categories to combine and keep, I conducted a card sorting activity with users.
Finalizing the Solution
After mid-fi usability testing, I incorporated some user feedback including:
Reverting back to the original logo-- I’ll leave logo redesign for the graphic design experts.
Sort and Filter option was added to their products page based on findings during the Competitor analysis.
Customer reviews are the best solution to one of Victoria’s needs: being assured that clothes will fit correctly and the material is worth the price.
Homepage 2.png
Product Listing Page.png
Product Detail.png