DellGaming

A subsite of Dells Gaming Products that provides users interested in gaming a space to compare gaming products, prices, and specs to help them efficiently navigate through their options.

TIMELINE:

Four Weeks

MY ROLE:

UXR
UX
UI
Frontend Development

TEAM

Emma Jaud, Angel Newball, Dalia Bolton, Howard Yung, Annie Szarmach

MY MAIN TASKS

  1. Frontend Development

  2. Data Synthesis

  3. User Interviews

  4. Information Architecture

DESIGN & RESEARCH TOOLS

Figma, Miro, Google Drive, Zoom, Adobe Xd, Visual Studio Code, GitHub

THE PROBLEM

Users struggle with finding gaming products on the Dell website and are often overwhelmed and frustrated with the current websites purchase flow. How might we help users efficiently select, customize a product with a quick checkout processes?

OUR SOLUTION

Our team worked together to analyze and create DellGaming, a subsite that immerses users into the world of gaming while showcasing Dell products in an approachable way and creates a more all-inclusive e-commerce shopping experience for their gaming audience.

Click on device to view prototype

User Research

Why a gaming subsite?

The video game industry brings in more revenue than the global movie and North American sports industries combined.

Once lockdown measures were put in place Global Gaming Sales rose about 20% — reaching at $175 billion in 2020 and by 2023 its expected to exceed to $217 billion.

We felt that a subsite focusing solely on Dell’s gaming products would not only benefit their company but also create a more all-inclusive e-commerce shopping experience for their gaming audience.

Research Objectives

Once we determined which direction we wanted to head into we discussed some research objectives.

A few of the KPIs we wanted to focus on during testing were…

With those in mind we moved into analyzing the current Dell website.

Heuristic Analysis

We analyzed the Dell website to determine what worked and what did not so we could improve aesthetics and accessibility. For this we conducted a heuristic and accessibility evaluation.

Survey Data

I conducted a survey to help gauge the user behavior of Gamers and their game shopping habits.

User Interview Insights

I interviewed 3 users who were all heavily involved in gaming and determined that our users care most about having a simple shopping and checkout process that also allows them to compare specs and pricing.

After interviewing and analyzing the survey data, we used our findings to create an empathy map in order to define and gain a better understand of our user.

Empathy Map

As a team, we synthesized our findings from our interviews and survey responses into an empathy map to capture and gain a deeper insight into our users.

Competitor Analysis Overview

We conducted a SWOT analysis on a few of Dells direct and indirect competitors to get a deeper understanding of the competition as well as identify growth opportunities for DellGaming.

We analyzed Sony, Amazon, IBM, and Apple. Below is the SWOT we created for Apple.

Definition & Ideation

Value Propostion

Feature Prioritization Matrix

After discussing and analyzing our user research, we organized and streamlined our findings into a Feature Priority Matrix.

Top Feature Must Haves:

  • Product Reviews, Search Bar, Product Comparison, Build a Bundle Feature

User journey

Our team created a user journey map to help illustrate the feelings a potential user may experience throughout their time on DellGaming.

Information Architecture

Card Sorting

As expressed by users, the current dell website is confusing, especially when looking for gaming products.

We began the process of card sorting to better understand how to structure the website in a user friendly way and that made the most sense for the gaming microsite.

Site Map

We then used our categorizations from the card sorting to create a new site map.

Top Feature Must Haves:

  • Simplified website.
  • A focus on game related products and content.
  • Less pages for faster development.
  • Easy maintenance which will make the microsite cost efficient.

Low fidelity wireframes

Lofi Desktop Wireframes

Based on features and information architecture, we came up with a simple layout with the goal of easy navigation, highlighting gaming products, not over-crowding the page with specs, and a quick checkout process.

Lofi Mobile Wireframes

We did the same for the mobile site which mirrors the lofi desktop wireframe. In the mobile we created a clean look focusing on gaming specifically with the same features added to the desktop version.

Lofi Usability Testing

Objective:

As UI designers, we need to make sure that users are able to navigate through the website to find information successfully, so we designed four tasks to test.

Tasks:

  1. Create an account.
  2. Finding items and adding to a “compare” list.
  3. Building own PC Gaming System.
  4. Adding items to cart and checking out.

After discussing and analyzing the results from our 5 usability tests, we organized and streamlined our users’ thoughts into a Usability Testing Priority Matrix.

Main Takeaways:

  • Users want items recommended to them.
  • Had a hard time navigating home.
  • Navbar was confusing- between “products” and “shop.”

Prototyping

Style Guide

UI STYLE DIRECTION:

We first researched the main style guide for Dell as a company to create a cohesive style guide that capitalizes on Dells established style but also brings in new elements of the gaming feel.

We finalized details for typography, button states, icons, and more. These guidelines were applied to the desktop and mobile prototypes.

Midfi Desktop Wireframes

Once the style guide was established we created mid fidelity wireframes.

In our mid-fidelity prototype, we resolved the user’s pain points from the lo-fi testing, aiming to make experience more intuitive. Below are a few frames from the mid-fi prototype.

Midfi Mobile Wireframes

Along with the style guide being applied, mobile prototype was created as well to create a responsive design.

Midfi Usability Testing

In this iteration of testing, we tested the same 4 flows as the previous testing and found that the only task with 100% success was creating an account.

Unfortunately, there were some glitches with Figma that interfered with this testing round, like interactions not working even though they were prototyped correctly.

We took that into consideration and had users tell us what they would do and how they would choose to navigate if the prototype was fully functioning.

Main Takeaways:

  • Users had a hard time finding the “build your own pc system” tab and also found the naming of that feature confusing - users weren’t sure if they were customizing a laptop or assembling a group of items.
  • User would like to be able to review order before completing order.
  • Users thought the site overall could be cleaner layout wise.

Coding

Figma to Code

Based on our finding from testing, we determined what iterations we needed to make from our Figma prototype to what we wanted to apply to our coded version.

We divided up the work so that each team member coded three pages. Once all pages were finished, they were given to me to finalize code and make everything consistent through out DellGaming.

Usability Testing of Coded Dellgaming Website

After discussing and analyzing the results from our 5 usability tests, we organized and streamlined our users’ thoughts into a Usability Testing Priority Matrix.

Top Iterations to Make:

  • Make items smaller in Cart/Review Cart.
  • Users would like to see a sign in validation.
  • User would like to see a cart number validation (how many items in cart).
  • More prominent compare button next to items.
  • Get rid of payment information at the beginning of the Sign In Process.

With the feedback from our users we updated our code with the necessary iterations.

Final Thoughts

Our site is a more streamlined version of a Dell’s gaming product site - keeping their branding and functionality but adding those gaming site components. We drew inspiration from sites like Playstation & EA.

With the feedback from our users we were able to build something that is easy for users to navigate and gave the site more gaming character than the original Dell gaming section.

WHAT’S NEXT

Whats are the next steps, we will continue to test and iterate the current design to improve interactions and experience for the users, Add more complex animations, resize some items

Implement backend coding

-

primarily focusing on

  • Using a database to display all dell gaming products
  • Keep track of the items added to cart and display that number in real time throughout site
  • Sign-in Authentication API to make sign in easier
  • Give the option for user to save contact, shipping, and billing information for future purchases

Take a look at Dellgaming

Click on devices to see full website or scroll down to see video of website!

Click on device to view prototype

DellGaming Prototype