top of page
BellaVita
E-commerce Website Redesign
PROJECT OVERVIEW
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.
Project: Solo website redesign project
Client: BellaVita
Duration: 2 week sprint
Tools: Figma, Zoom, Otter
August 2022
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.
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
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?
Task Analysis Findings
Some common pain points for users:
users reported there being too many categories to choose from and feeling overwhelmed by all the options
Unorganized Content
primary navigation was too confusing for users since they had to click on "Products" in order to access all the options
Difficult Navigation
for users who knew exactly what they wanted, the lack of a search bar on top of the site was frustrating
Missing Search
Missing Search
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. So from this point forward, I decided to focus on the information architecture redesign of BellaVita.
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. So 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.
BellaVita could benefit from also including:
.
.
.
Sort Option
Filter Option
Customer Reviews
DESIGN
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.
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.
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
Every step the user takes adds to their cognitive load, and too many unnecessary steps will discourage them from continuing with the site.
original primary navigation
Original
new primary navigation
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.
sort
filters
Redesign
Original
Final Thoughts
Lessons Learns
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.
bottom of page