Bed & Bath Outlet
Bed & Bath Outlet is a family-owned business established in 1991 in NY.
Is an online outlet for bed, bath and home essentials. Furthermore, they focus on top-quality brands at the lowest price and personal services.
The website's redesign was overhauled to provide a user-friendly experience while also meeting stakeholder requirements and expectations.
Our Team
MY Roles
-
UX Designer
-
Design Researcher
Tools
-
Figma
-
Canva
-
Adobe Photoshop (Ps)
-
Miro
-
Zoom
MY Responsibilities
-
UX Design
-
Design Research
Platform
Website Redesign
Team
The group consists of 3
Duration
April 5, 2021 - April 26, 2021
About Project
Problem Statement
It is patently obvious that the Bed and Bath outlet website is not appropriate organised and the service is generally not working!
To improve the website's organisation and services, I and my team members decided to promote the values and enable activities of the website.
Our Purposes In Designing
-
Appropriate design with a proper flow to complete the purchase
-
Organise the categories and put the items in the right place.
-
Providing high-quality brands at the lowest prices.
-
Reliability and interactivity for the services.
Design Process
Discover
Heuristic Evaluation
A heuristic evaluation is a way to test whether a website is user friendly. In other words, it tests the site's usability.
In our heuristic evaluation, the site is evaluated by usability experts. That is why we will sometimes find it referred to as an "expert review".
Stage 1
As we can see at first glance:
-
The website is very messy
-
It has poor quality and irregular photos
-
Long and unclear texts
-
In general, it does not have an appropriate design
Stage 2
I checked this site more precisely, in this section where Global Navigation is located:
-
I expected to see related items! But we only see the shopping cart and the search box that is in the corner of the page in an unclear way.
-
I applied the search box in the middle of the home page, we changed the word shopping cart to cart and located in the right corner
In this section, Navbar's organisation is ineffective. Did not use proper wording! For instance:
-
The word closeouts is synonymous with the word sales. In the process of card sorting, we realised that these words are very complex, and users cannot recognise them at first glance.
-
I altered Navbar organisation to Bedroom, Bathroom, Accessories, Shop by brand and Sales%.
Stage 3
In this section:
-
It is not apparent what basis and principles they accomplished in this design
-
It is not obvious what they wanted to show
-
No specific title can be seen
-
The photos are too small and invisible
-
The texts are long and irrelevant
-
In general, consistency has not existed
-
I completely changed the section to Most Popular products.
One of the main tasks of this website is to sell different brands, but the shop buy brand button is not expected here, and it is very unclear.
-
I modified the shop by brand without box and located it in the Navbar.
Stage 4
In the get details section (on the corner), the user can click that to reach the shop by brand category and price filter.
These are thoroughly invisible to the user at first glance, and also the user cannot recognise how to enter the categories!
In the footer section, irregular texts and inappropriate typography can be seen, which have been messed up here without any particular logic.
-
I eliminated the get details word. In addition, I applied the shop by brand in the Navbar section and also the price filter moved to chosen products page.
-
I modified the footer section to the 3 categories: About us, Return & Orders and Help.
Competitive Analysis
In the competitive analysis, we compared 4 websites which included a similar business strategy. We intended to figure out in which sections they are common.
-
At first, we used Hero Image in the landing page section, but in the sorting card section and usability test, the requirements of our users became the category section that was crucial to them.
-
In the same way, we compared the information architecture with other similar websites to find out what their features are. In addition, whether these items were significant for our users.
Define
Our outputs from the competitive analysis were:
Persona
Develop
Card Sorting (IA)
-
This method was done with open card sorting, and all 3 of us interviewed 5 people, making a total of 15 interviews.
-
In the interviews, which were both video calls and face-to-face. Our users did not understand the categories of the website and their items.
-
Likewise, they were placed separately in the corner without a category!
-
In the end, if they could find a suitable category for them, they would put the items in it, otherwise, they would leave them in the same order.
-
Each of us came up with various items which we could apply on the site in different categories with competitive analysis.
These categories are:
-
Bedroom
-
Bathroom
-
Accessories
-
Shop by brand
-
Sale
Site Map
After card sorting and specifying the categories, I created the site map and placed it in the footer section of the website, which is clickable.
Design
Sketch and Low Fi Design
My initial sketch for the Home page was based on the obtained data, including competitive analysis with other websites.
Home page
Wireframes and Mid Fi Design
Our wireframes are in the mid-fidelity section, which was changed based on the interviews and card sorting.
-
Added shop by brands in the Navbar section
-
Removed the Hero image
-
Changed categories in the most popular product section
-
Modified some items in the footer section
Test
Usability Test and Iteration
Home page 1
-
It was our first high-fidelity sketch that we discovered that our users are not satisfied when they see newsletters and gift cards on the Home page and ask to see them in the Footer section.
-
Hence, they tended to see the delivery service in the purchase section of the product and add to cart.
After eliminating those three items in the wireframe above, we have a new one.
-
Users talked about dullness on the home page and changing the colour to a suitable colour
1. In addition, users requested that the footer section should not be messy and the items ought to be more organised
2. Finally, they demanded to see the website logo on the left side and above the Navbar
2
Home page 2
1
In this version, which is very close to the final version, we attempted to change the colour of the website according to the business point of view.
-
We also placed the website logo in its actual place and improved the footer section from being considered messy, though this is not the last version.
Home page 3
Comparison of the Final Version with Hi-Fi
1
2
To select a product we delivered:
-
Respected the hierarchy in the last version.
1. Designed the Filter and Sort buttons differently so users can decide more easily.
2. One of our most significant challenges was adding the favorites button in the right place.
1
One of our most controversial challenges was how to display the filter panel.
-
In this panel, the size, material, and colour of the products are specified.
-
Users can select the appropriate items for each product.
-
Users can view the quantity of each product.
After multiple tests and receiving numerous feedback from users.
Finally acquired positive comments from this version on the purchase page.
-
Items, photos and fonts became smaller.
-
Added (you may also like this) section.
On the placed order page:
-
The design of the entire page was organised
-
The (buy now) icon was changed to (placed order)
-
The labels related to the shopping cart section were organised in a box
What I have learned?
Although it was my first project in Figma, I enabled to get a positive result with proper planning and limited time.
-
I endeavoured to convey a sense of tranquillity and loyalty to the team members by communicating.
-
My initiative has progressed in the way of interviewing users.
-
Appropriately criticising the team members and cooperating with them was one of my other learnings in this project.
Next Step
-
Designing and making a fit logo with the brand name.
-
Keeping the website up-to-date according to competitive analysis and user surveys.