Best Buy Redesign
A class project for INFO 331 (UX Information Architecture) where we built the information architecture and user experience for Best Buy, an American multinational consumer electronics retailer.
The course was taught by professor Jeremy Zaretsky, a long running professional in the UX/IA industry.
Here is my team’s vision on enhancing the user experience on the Best Buy desktop site.
Overview
Timeframe
12 Weeks
Tools
Figma, InVision, Illustrator
Role
UI Visual, Prototyping, Wireframe
Team
Jose Santos, Ibrar Aslam, Luis Flores, Michelle Ponting
Problem Statement
Best Buy, an American multinational consumer electronics retailer company with a desktop website in dire need of revamping, has come to us for help. They are looking to have the information architecture of their site altered to enhance the user experience of shopping specifically with their “Laptops and Tablets” category. With their style guides to follow, our team gathered and began..
Client Overview
Best Buy is a multinational consumer electronics retail store with stores in Mexico,
Canada and the U.S Best Buy has more than 1,000 brick and mortar locations, but also has a strong presence online through a website and mobile application. The biggest competitors of Best Buy include Amazon, Walmart and Target as well other online retailers.
Research
Information Environment
The desktop site offers a large hierarchical platform for users to buy technology products of various categories.
We chose this platform after analyzing its interface and information architecture to provide needed fixtures and improvements.
SWOT Analysis
We conducted and took note of the pros and cons that the current desktop site possesses which will help guide us in drafting design recommendations
Strengths
Effective search navigation categories
Sort products by brand, product type, and storage
Strong organizational structure for faceted searching
Clean local navigation
Weaknesses
Confusing navigation structure
Repetitive navigation from broad categories to specific sub-pages
Irregular width constraints of products
Searching is ineffective with non-technical terms (ex. small computers)
Competitive Analysis
User Research
We conducted usability tests with 5 participants. Respectively, we tested each participant with the following tasks.
Test 1
You need a new laptop for school/work. Navigate to a page to find a new laptop.
Insight
5 out of 5 people were able to effectively reach the desired goal. This provides us insight that we are heading in the right direction with our revamped hierarchical structure as users are able to get to the desired destination with no errors.
Results
Test 2
You’ve lost your laptop charger. Navigate to the page you would find a new power cable.
Insight
2 out of 5 people we tested had similar confusion with the use of our controlled vocabulary with the power cable. We had it under computer accessories, as a result this gave us more knowledge of what our users expect in terms of vocabulary when looking for a computer accessory.
Results
Test 3
You want to buy your a friend a new 16in MacBook Pro. Navigate to the page where you would find this product.
Insight
4 out of 5 testers were able to reach the goal of finding this product, thus helping reassure what our users expect when searching for popular products of certain companies.
Results
User Personas
With the results we gathered, our process started with formulating two user personas to help guide the organization of content on the site. These personas helped give us insight on the needs of our users of various backgrounds and interests.
Sitemap
Best Buy’s desktop site currently offers a hierarchical structure as it organized main information to their subcategories.
The site displays products and categories that lead to other sub pages of information related to the topic chosen by the user.
Design Prototyping
Improvements to Keep in Mind
Improve the Navigation Bar
Single rotating advertisement
Horizontal Drop down menu with icons
Increasing the size of the search bar
Side by side products to optimize space
Wireframes
Our initial wireframe sketches and prototypes hovered around the main idea of reorganizing the navigation and display structure of the products and to the sub pages
User Flow + Lo-Fi Designs
Based on the above feedback and needs, we first designed and laid out our application design with the idea of being an add on feature for google maps.
Hi-Fi Deliverable
Revamped Features
Changed the drop menu from vertical to horizontal and added images
Utilized pre-existing local navigation pages to improve navigation as a whole
Reorganized product information structure to showcase important details about products
Hi-Fi Screens
InVision Prototype Demo Link
Landing Page
Location Pop-Up Feature (Landing Page)
Horizontal Navigation Bar
Computers and Tablets (Categories) Page
Laptops Page
Laptops Product Page
Reflection
If we had more time, we would have liked to dive in deeper into other categories that Best Buy has to offer and restructure the information architecture to enhance the user experience as well.
This project didn’t feel like a class project, it felt like we were actually working with a client in making sure their needs are met along with introducing new features to help users comprehend information that is presented to them along with making sure they can guide themselves throughout the site with minimal errors and confusion as possible.