Best Buy Responsive Web Design

Richie Chen
8 min readApr 23, 2018

--

Best Buy Outlet from Google Images

Best Buy is an American electronic legacy brand. Team Poppins assembles to execute a 4 day research report before iterating on our own solutions for a responsive web design for Best Buy the following week. Best Buy is a B2C(business to customer) electronic retailer that caters to homes and offices for anything technology related, helping customers buy things they need for lowest prices through brick and mortar stores as well as online.

We were tasked with researching the brand, analyzing every facet of our client’s website and their competitors to get a comprehensive understanding of how it could be improved. We started off conducting contextual inquiry with real customers at store locations and shopping online, observing, documenting and gathering insights.

We conducted a total of 12 in store inquiries between Union Square and Chelsea outlets. This brought us to understand the people who came into Best Buy stores for numerous purposes, this range from browsing a new product in mind, people who were around the corner, to people picking an item up for repair, to the Gamer club enthusiasts.

Alex speaking to one of the customers at the Nitendo game station
  • Users come to Best Buy stores for the deals
  • They come in-store when they want to see how a product feels in their hands, like a phone case or a watch.
  • Once in the store for an errand, people might find themselves picking up additional items (replacement headphones) that they didn’t set out to buy.
  • People seem to be on their phones a lot during the shopping process — either looking up additional deals or texting information (like a photo of a product) to family and friends.
  • People come into the store when they have time to kill — they might come into Best Buy to browse on a lunch break. There’s a lot of entertaining things in store — like Nintendo
  • Switch and laptops with WiFi — that can keep waiting friends entertained while their friends pick up a necessary item.

We proceeded to conduct a screener survey and acquired 18 responses, and realize that Best Buy had a big market share amongst their competitors when it came to purchasing electronics online, falling behind Amazon.

Through the survey, it determined that my primary platform will be designed on a desktop, since 83% of our screeners had bought their electronic appliances online through their desktop, and nobody had used their mobile apps.

In the competitive Analysis, we realize:

  1. Electronic Retailers were popular among customers who were loyal to specific brands could find their products there.
  2. The salespeople were also very transparent about advising customers to head to the competitors if it was sold out at Best buy, just needed to give a price match.

We also did a comparative and competitive analysis charting out other big boxes and companies with distinct products that that had admirable services and usability, marking out their physical and online presence against their retail and service.

Comparative Analysis
Competitive Analysis

We curated a usability test guide to conduct 4 task scenarios. We got to document the process of 6 users purchasing a DSLR camera under $500, book a service appointment, get a store pick up as a Mother’s day gift, and compare 3 TVs they are interested in.

While conducting the 4th usability testing, I came to an epiphany, that users who tried comparing items felt really frustrated when they were not able to save them after comparing, which end up wasting the user’s time losing his research. There were 2 different sections, 1 to save items, and the other to compare them. On the current website, the compare feature is very small, represented by a checkbox, and users might miss on this great opportunity to make a better decision on picking out a product that is more suited to their needs.

Best Buy affinity mapping

During Affinity Mapping, we realize that every store had a different experience depending on it’s layout. And many potential customers in store had something specific in mind, and it was important for them to physically see and compare with other products.

Card Sort:

Having users conduct open card sort got the team to see the how users group electronics through the environments it’s used in such as “outdoors”. During closed card sort, we realize that on the current site there were a few repeats of categories in more than 1 product listing since they qualified under both. Of the 3 people tested, one of them categorize certain products into types of activities like “leisure”, which made me consider rearranging the cards to be base on the environment it is used in. However, I felt that with constraint of time, we needed a few more card sorting to find more commonalities within these groupings to validate this assumption.

This brings me to my problem statement:

Primary Persona:Betty
Secondary Persona

Meet Betty, a journalist who will get to the bottom of the story. She doesn’t consider herself techy, but owns electronic essentials like her phone and laptop, and spends a lot of time in her kitchen prepping meals.

She enjoys the convenience of getting things done, and will stick to brands that can provide that convenience for her. One of her pain points is the lack of expert assistance when she doesn’t understand the technical information.

As for Adam, since his career is heavily depended upon his electronic instruments and gadgets, he stays up to date with the latest trends but is price conscious, exploring music’s digital platform for new types of rhythms.

Betty’s User Journey

Bad news! Betty’s TV had broken down and she has friends coming over this weekend to watch West World Season 2, and her friends are coming over for their monthly movie marathon night, so she doesn’t want to disappoint anyone. In the user journey, it’s split up into 5 phases. She needs to search out options available, discover what’s feasible, make a payment for this new TV, and get it delivered to her place. Because TVs are expensive, she wants to make sure that there’s a warranty. At the bottom of the chart is Best Buy’s services as she interacts with the system.

Revise Task Flow

The revised task flow for saving equipments represents the happy path Betty would take to get to share her list of 3 TVs she is considering to purchase within her budget.

User Flow of Betty

In the user flow, it explains Betty being able to compare the TVs within her budget through 3 options: 1. Search bar 2. main navigation 3. Picking out from deals recommended to her base on her past search.

Initial Site Map
Revise Site Map

In the revised site map, I condensed the amount of level 2 options so users do not face the paradox of choice. I also repositioned services to be on the right side of the user, since services is mostly engaged after having purchased a product, so it feel more personalize and logical, having it place beside shopping history.

Design Round on comparing items

I did a round of ideation design studio brainstorming the different ways users can compare items while browsing for products.

In the Low-Fi, I got to merge the compare and save feature, so users can save items they are interested in, and provide clear opportunities for users to click onto this feature.

Low-Fi Wireframe Features
Low-Fi Usability Testing Results

Through my first usability testing, 4 of 5 users mention that reviews help them make a well informed decision and filter tab helps them narrow down their search. This led me to realize cutting down on levels of site map by relying on filters lets users save time while finding what they want.

In the mid-fi wireframe, I implemented a slider bar for users to pick their price range. I also repositioned the user account to the middle to greet the user, making him feel like he’s the center of Best Buy’s experience, which 3 of 5 users agreed with.

During the testing, 4 of 5 users were actually confuse with the slider bar because the other filters acted differently, as checkboxes.

This made me realize that a whole new interaction can confuse users especially when they are not expecting it.

Mid-Fi Usability Test Results

With my High-Fi prototype, I got to test it with 6 users, and the average time was a really close shave, mine being a second faster than the existing site at 60 seconds. Some of the comments were that it was cleaner and smoother completing the tasks.

Responsive Web Design: Mobile Platform

Having redesign Best Buy as a responsive web platform, some considerations for the mobile interface are the limitations of icons on headers, as well as a minimal layout of of information to prevent cluttering, given a screen size.

Some of the next steps after usability testing, would be creating more than 1 compare lists to accommodate different products so users have the liberty to compare multiple types of products that correlate. Users were also unsure of the in home consultation option which I’d like to further explore, which would include users who require a professional to consider the user’s existing home or office to provide a recommendation. Thanks for reading (:

--

--