top of page
PortfolioCardbbspark.png
The AI Messenger feature designed to support and enhance the customer shopping experience

Project Background

Levelling up in a rising market

Due to the pandemic's influence on gaming and technology, Best Buy has become a popular retailer of gaming PCs. As users increasingly build custom gaming setups, Best Buy has an opportunity to offer a custom build feature on their website, similar to Micro Center's Build my PC feature.

Challenge - or more so, my prediction

Design a custom gaming PC building experience that caters towards beginner builders as an added feature to the BestBuy website.

Design Process

Discover

Research Objectives

1

Identify the needs of website visitors who are shopping for gaming PCs and parts

2

Identify needs of users who who want to customize their PC

3

Determine Best Buy business goals in offering a customize feature on their website for PC gaming

Stretch Goals
  • Study eCommerce patterns that help business drive additional revenue
  • ​Understand how to create a guided experience that drives business goals without being overbearing

Hearing from the users

My goal here when conducting user interviews was to identify user needs when shopping online for gaming PCs and parts. I also aimed to gain an understanding of their needs for customizing a PC

5 Participants were recruited between the ages of 24 and 34 years old 

  • All have some experience playing video games on PC

  • Those with little experience have interest in purchasing or building a gaming PC in the future

  • Want info on low-high performance specs

  • They consider the games they play plus their school/work needs

User goals when shopping for a PC or parts

  • Affordability, Compatibility, Performance are all major deciding factors

Expectations

  • Users typically go to social media, like Youtube and Reddit, and then PC specific sites, like Newegg to compare parts

Frustrations

  • It's overwhelming and hard to narrow down their search

  • Availability, biased reviews, and affordability

    • Users struggle to determine if they are getting the best deal​

Users Suggested:
AI chat box
PC builder
Virtual appointments
Users say to consider:
Store availability
Longevity of product
Performance estimation
Work station needs
Beginner friendly verbiage
Pricing next to parts on prebuilds
More filter options

Investigating the competition

I wanted to see what similar businesses are doing to drive revenue in the PC department. So, I conducted a competitive audit on PC Part Picker, Micro Center, and NewEgg

download.png
download (1).png
download.jpg
Filters galore

All sites have wide selection of PC products and a rather extensive and complex set of filters. On Micro Center, I counted over 30 filter options when searching for a graphics card.

PCPPsearch.PNG
"Build my PC"

PC Part Picker and Micro Center have a customization feature formatted as a list where users add parts to each section

MC PC BUILD List.PNG
"Find my Gaming PC"

NewEgg has a beginner friendly shopping experience. Users can start with a game title and view budget friendly recommendations

newegg gaming pc finder (game chosen).PNG

The PC gaming industry

The overall increase in consumer interest and market growth shows that Best Buy has an opportunity here.

  • The global PC gaming software market is projected to reach $45.2 billion by 2024

  • First-person shooter games leading the way

  • Women represent 46% of all PC gamers, providing possibilities for targeted marketing strategies.

  • China's PC gaming market is expanding, with over 500 million gamers expected by 2024

  • Despite the increase in mobile gaming, PC gaming platforms remain significant.

Non-PC related businesses

I looked into other non-PC related experiences that are being used by other business to drive revenue.

nikeid-screenshot-header.png
Nike ID

Nike an online service that allows customers to create their own gear by customizing color, design, and performance features. This feature aims to provide personalized products to customers.

Google AI 2.PNG
Google AI Snapshot

A generative AI feature that uses conversation to drive the search. AI snapshot offers a short list of noteworthy factors to consider and products that fit that criteria.

Clippy.jpg.jpg
Microsoft's Clippy

A virtual assistant intended to help users in Microsoft suite. Was found to be intrusive

Forming takeaways from everything learned

I gained a better insight on user goals

My first assumption was that users wanted a beginner friendly customization experience

What I learned from users:

  • They want to narrow down their search easily

  • They want unbiased information

  • They want transparency on affordability

Best Buy could benefit from taking a unique approach

We know that users are looking for an easily digestible experience that helps find exactly what PC or part they are looking for. 

Potentially offering approachable and easy to understand information on specs, compatibility, performance, affordability, and the like plus unbiased recommendations could drive revenue.

Define

Defining the problem

Creating a realistic representation of user needs

Based on the takeaways found in research, I created two user personas and outlined their goals

As a user, Nick should...

Feel confident about his search for a PC without needing to learn any complicated jargon or technical information

C2 Personas_Storiesnick.png
C2 Personas_Storiessdf.png
As a user, Sam should...

Be able to find specifically what PC part she is looking for without having to sift through products that are irrelevant to her search.

C2 Personas_Storiessam.png
C2 Personas_Storiesddd.png

Deciding on the solution

How might we create an experience that helps users not only find what they want quickly, but also understand why they want it?

After reviewing the research, I narrowed down to two potential solutions that could work hand in hand:

  • An AI powered search that educates users on their product search

  • A customization experience where users can choose the exact item for their needs

Throughout the experience, users would be given the option to start a Customization. Otherwise, they would follow the AI Search flow where users can either choose an AI recommended product or start a Customization. I also included the potential to navigate to other resources.

Iteration2 plus customization.PNG

Due to the time constraint of this project, I focused only on the AI Search feature. Here is that user flow on its own.

iteration 2.PNG

Develop

Creating the solution prototype

Exploring potential designs

I started with sketches of the Best Buy home page featuring a PC Customization hero section as it will be a future addition and the worked on multiple AI Search results pages. All will include the following:

  • The search prompt repeated

  • A few sentences informing the user about the product they are searching for

  • "Key considerations" or tips on what to look for when searching for that specific product

  • The recommended product listings

  • The ability to input a follow up prompt or question

C2 Lofi Wireframe 2.jpg
Search Results Page 2.png
Search Results Page 4.png
Search Results Page 5.png
Search Results Page 1.png
Search Results Page 3.png

Narrowing it down

Using a similar color palette to the Best Buy branding, I narrowed down to two results page lout options and created high fidelity wireframes

c2colors.PNG
Option 1

Key considerations are positioned first followed by top 3 recommended products.

Check boxes show that these products meet the criteria set out by the key considerations

Option 2

Key considerations are separated by section and recommended products sit within each section.

The prototype

I prototyped for Option 1. Users would start at the home page and type into the search bar. The AI Search results page would appear and users can ask a follow up prompt or question to yield more specific results. They can then add their chosen product to their cart.

C2PSS.PNG

I opted to feature Option 2 as a screenshot during usability tests to ask users' thoughts and opinions on the layout.

Deliver

Validating the design and making revisions

Because there were still various questions and potential solutions, I made sure to get an MVP in front of users to gain feedback as soon as possible

Usability testing

I conducted a moderated usability test via Google Meet using screen share. 

I recruited 5 participants ages 26-38 of varying PC experience

Beginner

2 participants considered themselves to be beginners at PC gaming and building

Intermediate

2 participants stated they were fairly experienced in PC gaming and building

Expert

1 participant identified as very experienced and has many years of PC gaming and building under their belt

Participants were tasked with finding and adding a white gaming PC to their cart

2/5

participants expected to go to the PC section of the site first

3/5

participants noticed the "Customize PC" ad and expected to start there

Thoughts and impressions on the results page

3/5

participants found it to be very informational and liked the key considerations

2/5

participants were concerned that there was no focus on price and budget

After task completion

All participants stated that the feature did not meet their expectations

Specifically, they did not expect to land on an AI feature

1/5 participants found AI to be intrusive

1/5 participants had concerns about not seeing any compatibility information

Additional feedback from the users

  • Majority found the experience to be helpful and useful, particularly enjoying the key considerations

  • Visual design was simple

    • Potentially text heavy

  • All agreed that this experience meets a need

  • Participants had trouble using the “follow up” feature

    • They either did not realize it’s function or were not “paying attention”

What did they think of the alternative page?

Layout Option 2

1 participant prefers this page

  • It is not a wall of text and products are in view

4 participants found the information confusing

  • Products in 1 key consideration meant they did not meet the criteria of other key considerations

I formed five priority revisions from these insights

Make the AI feature feel less intrusive
  • Write an AI disclaimer, design an exit point, or incorporate elements from the original search results page

Organize text content to be less text heavy
  • reorganize, condense, and/or resize text

"Follow up" input field needs to be reworked
  • update writing, redesign input field, and/or reposition input field

Include budget comparisons
Include compatibility information

Reviewing my options

I needed to go back to the drawing board and make decisions on the best actions to take. 

Frame 5ss.png

New sketches

I opted to have the AI feature pop up over the original results page in a messenger format. This accomplishes two things:

  • Users can see they are able to exit if they choose to

  • The messenger format is familiar where users can better recognize that they can ask a follow up question or prompt

Additionally, I organized product recommendations by budget

PRSketches1.PNG
PRSketches2.PNG

Exploring more layouts

I continued to look at and explore several designs for the product recommendation cards

Cardoptions1.PNG
Searchresultsoptions1.PNG

Encouraging exploration and discovery through branding

I went back to make a decision on the this added feature's name and brand identity

I decided that Best Buy Spark hit home. I wanted to send a message that users can find what they are looking for and learn something knew with the help of this feature. The journey that they take with Best Buy Spark will be enlightening. They may end up choosing a product that they would not previously choose but is exactly what they need. Maybe that new product is the catalyst to a new hobby or career. 

I pulled references of star, spark, and lighting motifs, and began brainstorming

Frame 3.png
Frame 1.png
Frame 2.png

The friendly face of Best Buy Spark

I landed on this circular star design with a pastel gradient similar to the Best Buy brand colors

Frame 4.png
kksfd.PNG

I went with a circle design to keep it soft and approachable, as AI can be seen as invasive.

I chose a pastel gradient to keep the friendly feel and add a feeling for freshness

Finally, I chose soft pastel blues and greens to be used for the recommendation cards to evoke calm, trustworthiness, and non-aggressive.

pastelcards.PNG

Bringing the design to life with prototyping

In order to really bring the design to life, I implemented several animations to enhance the user experience

A loading animation to act as a marker that users are landing on a new feature
RPReplay_Final1696019807 (3).gif
Hover states were used to showcase compatibility information without taking too much space
RPReplay_Final1696019807 (1).gif
The ability to scroll so that users can refer back to past search results
RPReplay_Final1696019807 (2).gif

Project takeaways

I learned to be persistent in pushing the boundary

My biggest takeaway was challenging myself to create as many iterations as possible. Continuing to iterate on my design concepts made for one of the better choices in the end and will continue to improve as I continue to iterate

User-centered design is paramount

I had many unanswered design questions throughout this process. The best way for me to push this project forward as to start usability testing. 

Effective research was crucial to putting my project in the right direction

I conducted a variety of research and continued the exploration throughout the project. This exposed me to many design solutions and ideas

Future Roadmap

Expanding on the solution

Incorporate the customization feature

  • The 2nd part of this project includes a customization feature.

    • Add points in user flow where users can move to customization if the AI search isn’t meeting their exact needs.

Potential to add other features and/or revisions

  • Review other revision options and determine best ways to implement

  • Continue to research other options/features that could be added to make this experience better

Iterate, iterate, iterate

  • Continue to improve the design through testing, research, and feedback

Thanks for reading! Check out more of my work

bottom of page