Image by Andrej Lišakov
BellaVita
E-Commerce Website Redesign
Homepage Mockup Macbook 2.png

Role

UX/UI Designer, Researcher

Timeline

2 week sprint

Tools Used

Figma, Otter, Zoom

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.

However, their current site structure faces some issues.

For this solo design project, the overall goal was to gain more practice in both Information Architect and my UI skills. 

Objective

Improve overall site architecture and navigation to enable easier browsing and help users find relevant content easily.
Pink Yellow Horizontal Background Long.png
User Research

User Interviews

In order to understand users better, I conducted 6 interviews where I crafted generic, non leading questions to determine their goals & priorities when shopping online.

Sample Questions
  • What are some of your favorite online retail sites?
  • What keeps you going back to the same sites?
  • Tell me about your last online shopping experience. 
  • What did you find frustrating? What did you enjoy?

User Interview Findings

I gathered the feedback from interviews and clustered the trends in an affinity map to see what users had to say. These were the most common topics brought up:
Locating specific items using search or filter is important
Easy to use navigation was mentioned by every user
Gap, JCPenney and Macy's are other commonly used sites
Task Analysis
Task Analysis Findings
Unorganized Content
users reported there being too many categories to choose from and feeling overwhelmed by all the options
The best way to learn about how people use a site is to watch them actually use it. I had the same 6 users go through specific tasks within the site and talk through their process.
Ex: Find an extra large floral dress and add it to your cart.

After task analysis completion, user experience questions were asked to reveal ideas on how to improve specific parts of the website.
Ex: What did you like most/least about the site? 
How could the website improve?


 
Some common pain points for users were:
Difficult Navigation
primary navigation was too confusing for users since they had to click on "Products" in order to access all the categories
Missing Search
for users who knew exactly what they wanted, the lack of a search bar on top of the site where they expected it was frustrating
Missing Search
BV Products Page
Unorganized Content
Difficult Navigation
Main Insight
During interviews, users claimed easy to use navigation was an important factor when shopping online, yet it was the most complained about problem on the BellaVita site.

When finding information becomes too complicated, there's a risk that users will simply abandon the site.
From this point forward, I decided to focus on the information architecture redesign of BellaVita.
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. Careful attention was paid to their information architecture as well. I chose Gap, Macy's and JCPenney since users mentioned they shop there frequently during interviews.
Competitor Analysis
BellaVita could benefit from also including:
.
.
.
Sort Option
Filter Option
Customer Reviews
Pink Yellow Horizontal Background Long.png
Designing a Solution
Problem Statement
Users need a faster and easier way to get the clothing they want from BellaVita’s online site because its current layout frustrates and confuses them.

Based off research findings, it was concluded that when designing a solution I had to focus on organizing, structuring, and labeling content in an effective way that wouldn't confuse users.

So how did I do that? There were
4 design changes that were made:
1. Categories Reduced
Based on user feedback, it was determined there were too many categories to choose from.
Categories
A quick look into competitor sites show that BellaVita has more than double the average number of categories. 

According to Hick's Law, the more options a user has can result in an increase of cognitive load and ultimately overwhelm users.
An open card sorting activity was done with the same 6 users where they were instructed to organize all 25 categories into groups that made sense to them and then name each group.
The end result was a much smaller list of 6 categories.

Since it's not necessarily about having too many options, but more so having too many options at one time, I included a dropdown for each category as shown below.

 
BV Homepage Dropdown
Problem: the original 25 categories would overstimulate users and cause them to spend more time than necessary finding what they need

Solution: group similar categories together and use a dropdown menu to hide extra options until they're needed
2. Eliminate Unnecessary Steps
BV Original
original primary navigation
Original
Every step the user takes adds to their cognitive load, and too many unnecessary steps will discourage them from continuing with the site.
new primary navigation
BV Redesign
Redesign
Problem: users were getting frustrated because they were unable to accomplish their tasks with ease on the original site

Solution: eliminate any non-essential steps, such as the primary navigation that would force users to take an extra step of clicking on "Products" first in order to access all the categories
3. Refine Search System
I shouldn't have to scroll all the way down...the search should be on top, right in front of my face.
Studies show that 43% of website visitors go immediately to a search bar, so it's important to have it in a clear, accessible location.

Problem: having the search bar on the bottom confused users and decreases the usability of the site

Solution: use existing UX patterns that users are accustomed to, such as having a magnifying glass on top of every page
4. Include Sort & Filter
It was mentioned during user interviews that locating specific items using a filter is an important aspect of e-commerce shopping. When looking at competitor sites, BellaVita was the only site to not include a filter or sort option. 

The solution was to include a sort and filter option on their product listing page. This provides users a fast and intuitive way to narrow searches and find exactly what they're looking for.


 
Redesigned Products Page
sort
filters
Original Products Page
Redesign
Original
Pink Yellow Horizontal Background Long.png
Final Thoughts
Lessons Learned
Having this be my first UX design project, this was an insightful learning experience with many ups and downs, which ultimately will help prepare me better for the next project. 

One of the aspects I found challenging was synthesizing the user interviews, task analysis, and competitive research into a coherent architecture for the site. In future projects, I would like to dedicate more time to synthesizing research. 

Working on the UI for the site was the most enjoyable aspect because it's the intersection of design and psychology. It's not only thinking "Will this make the site look pretty?" But it takes into account the question of "Will this help users accomplish their goal?"
It's fun figuring out what's the best way to make things easier for users!

 
Next Steps
Did I really improve usability?

As mentioned, as a designer it's my job to give users a straight path to their goal by clearing out any possible obstacles they may have along the way. In order to make sure that was actually achieved here, in the future I'd like to have the same 6 users go through the exact same task analysis but within the new website redesign. Asking them the same questions on their user experience will provide me with the answer of whether or not I improved usability.

 
Homepage Full.png
View the high fidelity prototype and experience the process of searching for items within the BellaVita site.