Dell Redesign

How might we help non-computer experts easily make shopping decisions on Dell?

Overview

Background

The redesign simplifies the search, selection, and comparison processes by reducing cognitive loads.

The professor is also acted as the client of this capstone project.

Duration

7 weeks (5 weeks for research & redesign + 2 weeks for iterations)

Team

1 Product Manager; 4 Designers & Researchers

My Role

UX Designer & Researcher

In a team of four designers, we contributed to the research process and created wireframes for the redesign.

After the course ended, I conducted competitor analysis and reconsidered previous redesign decisions. Iterate some design details, finish the high fidelity designs & prototypes, and validate my design through usability testing.

The Problem - How the project started

Before diving into the project, my friend and I start to experience shopping on Dell, but both of us ended up stopping before adding any products to the cart.

The problem is: non-computer experts, who are unfamiliar with tech specs, are often blocked by overloaded tech terms and nonfunctioning features, and cannot take further actions.

I’d like to dive deeper through research and see if those problems are common for other non-computer experts.

The Process - How the project worked

Solution overview - How the project ended

Redesign - Product listing

Original Design - Product listing

Metrics - What was the outcome

4X Faster

In usability testing, users spend four times faster to finding reconditioned products than before.

7X Faster

In the time spent by users looking for comparison features.

83%😊

After testing, 83% of users reported that the comparison feature allowed them to quickly and realize which product met their needs when they struggled to choose and make their next purchase.

89% Reduction

Compared to the first round of user testing, 89% reduction in the number of users using the chat function this time since they can easily capture needed information without extra help.

Research Methods

- How do I dive into the project?

To know the specific usability problems that block users’ experience on Dell, I dive into the project through research.

Heuristic evaluation is a quick method to identify and fix usability issues. However, if I have already evaluated the website a couple of times, it can be hard to maintain a ‘fresh’ mindset to conduct the heuristics. And more importantly, I’d like to know if the problems we noticed actually block our target users.

Therefore, we invited participants from the survey and conducted usability testing to know their real and urgent pain points.

Lastly, I’d like to find out if there are any gaps in the market? After identifying market gaps through competitor analysis, I can fill them by developing the design and experience accordingly.

Step 1: Heuristic Evaluation

What: We evaluate the website from Account Creation, Situational Awareness, Support Mental Models to Support User Goals.

How: With the 4-points scale rating system.

Why: We can quickly find what major usability problems with much lower consumption of limited resources are.

Step 2: Usability Testing

What: We’d like to know how our primary persona experiences the website, their behavior, and preferences.

Click to see the testing script and full result report.

How: In-person usability testing session with 7 participants.

Why: Understand the user’s success rate and time spent to complete a task, which is helpful for uncovering problems and discovering opportunities.

Step 3: Competitor Analysis

What: Chose Apple, Microsoft, BestBuy, HP, and Nordstrom as competitors.

How: Compile a list of direct and indirect competition.

Why: As a junior designer, I’d like to learn from existing products. And notice Dell’s strengths and weaknesses compared to other competitors.

Target User

- Who am I designing for?

Why chose non-computer experts as the target users for this redesign?

Survey: We survey out 50 people (students and office workers), and 21 of them have shopped online for electronic products within one month. 90% of them identify themselves as ‘Experienced with tech products but not familiar with tech specs.’
Priority: Compared to the enterprise buyers with more domain knowledge on tech specs, general individual buyers need more help when shopping and navigating the website.

Based on the user’s goal, I narrow down the redesign scope and define the project as facing individual buyers (2C).

Research Findings

- How’s the users’ experience?

From the research methods above, I noticed many usability problems across the website. I filtered and prioritized these pain points, and 4 key problems were selected.

Pain points Overview:

Pain points 1: Users spend a long time searching for reconditioned products because of unclear categories and inconsistent navigation.

Pain points 2: Users cannot catch the point from overloaded information on the product listing page.

Pain points 3: The Compare feature performs practically no function, so users cannot leverage it for making decisions.

Pain points 4: Users cannot easily connect to the Chat function to ask for help when they encounter problems.

Pain points & Solutions

Pain points 1: Users spend a long time searching for reconditioned products because of unclear categories and inconsistent navigation.

Our target users are looking for great prices. However, they spent a long time searching for products with deals and reconditioned products during the usability testing.

Especially for reconditioned products, the average searching time is over 60 seconds.

Original Design - Categories

“A laptop for school could both be ‘for home’ and ‘for work’ at the same time. It’s hard to decide which one to choose.”-Dan S.

“ I thought this was an insignificant advertising section, because the layout was so confusing. I didn't expect it to be about the product section at all“ -Sarah P.

Original Design - Inconsistent Navigation

“Why the drop-down menu of Deals are inconsistent? ”-Mei M.

Solution 1: Consistent navigation and organized categories help users quickly locate products.

New Design - Consistent navigation

New Design - Organized categories and predictive search

Pain points 2: Users cannot catch the point from overloaded information on the product listing page.

“Same title, same picture, but different price? What’s the difference?”-Mei M.

“I can’t catch the point. It’s wordy and overwhelming.” -Jackie T.

Solution 2 : Improve the user experience by simplifying information and highlighting what users value

Pain points 3: The Compare feature performs practically no function so users cannot leverage it for making decisions.

Original Design

"These two pages look like the same." ——Kisaki.T

Solution 3: The Compare feature is always within reach and lets users notice differences at a glance.

Details of listing page & Add to compare

Pain points 4: Users cannot easily connect to the Chat function to ask for help when they encounter problems.

The five-step conversation function is too cumbersome for those who want to go directly to a human customer service representative. Not to mention that some questions asking for personal information are not necessary. To improve the user experience, we need to get them to a live chat as quickly as possible.

Original Design

Solution 4: Design a Chat function that allows users to connect and ask efficiently.

New Design

The five-step conversation function is too cumbersome for those who want to go directly to a human customer service representative. Not to mention that some questions asking for personal information are not necessary. To improve the user experience, we need to get them to a live chat as quickly as possible.

However, sometimes to reduce costs, we often want to reduce the frequency of direct contact with a customer service agent, if the support team is from the outsourced company, etc.

We can solve the first three problems: optimizing the navigation and search functions, focusing on consistency and stability, and simplifying the amount of information on the page to help users find the content they need more efficiently, so naturally, users will use the live chat function less often.

Iteration

Iteration 1: How to best present the comparison result?

“What if I want to add more than 3 products to compare? Is it possible?”

There’re three revisions for the comparison result page.

The first-version design is a pop-up window. When I reconsider the design of this page, I realized that it wouldn’t be easy to navigate if some users open the page from a smaller viewport such as their phone.

In the second-version design, I transplant it to the page and make the layout more organized. However, there’s a limit when adding products to compare.

Therefore, in the third version, I leverage the dropdown selection for switching different products. In this case, there will have no limit when comparing products.

Iteration 2: Scrolling or fixed on scroll?

When I experience some competitor websites, I realized that many of them would make the tab bar scroll then fixed on the top. I start to think about the why.

First, the ease of accessing it while deep into the site’s content makes for a more productive experience for users.

The second is the page will include a lot of information. Fixed to the top of the page as the user scrolls through to remind them which section they are in.

Therefore, I revamp this tab bar fixed and also included the CTA button so that shoppers can take action whenever they want.

Iteration 3: Deals tag: Show percentage or deduction?

“I saw the highlighted price, but it’s not straightforward enough for me to know how much I can save.”

Based on the feedback of my redesign, I use the “deals tag” to highlight how much shoppers can save. However, I noticed there’re two options to design. So, should percentage or deduction?

I conducted A/B testing based on these design details, and the deduction outperformed the percentage by 40%.

Takeaways

Research is the backbone of the design.

I’m glad that I learned that many research methods from this course. Heuristic evaluation and usability testing provide a comprehensive perspective of what are the problems.

Upon that, whenever we are stuck in ideating, we can trace back to our research. And I can always know the reason that why I design in this way.

What can be improved further?

The pain point of many school projects might be ‘overlook the business part and technical constraints.

When I was doing my 2nd iteration, I asked my Engineer friends to see if those solutions could be implemented. But it’s hard for me to know more about the business constraints.

I know how important product thinking is, and I will always take this into account when designing.

Iteration represents my growth.

Compared to the 1st version, a year later, I realized many things need to improve, and some designs are hard to implement if I think from the dev’s perspective. I take notes of all the details that I need to change and check how the industry designs a similar flow. And then, my 2nd version design is completely different from the 1st version.

All of those iteration represent my growth.

We always value impactful design. But I also value this school project, my first UX-related course, leading me into this impressive field.

I learned many research methods from this course and built deep connections with my teammates. So I always want to present this project in my portfolio.