Dell

Dell.com is one of the most widely known computer brands, yet their desktop browsing page does not connect with the average consumer. My goal was to redefine the experience and language to help a user understand which computer will meet their needs.

  • UX, UI

The Problem:

This browse page on Dell.com would confuse most non-tech folks. The only helpful copy are the light grey descriptions, but we could certainly do much more than that.

Further questions:

  • Could the category icons be more relevant to the user?
  • Could the average small to medium sized business (SMB) office manager navigate this?
  • Who made up the term SMB?

Dell's Compare Page

What do the bars underneath the components mean? Performance rating? Value? Popularity? Availability?


Dell's Product Page

Does the typical computer purchaser think of their computer in terms of technical components? Dell has prioritized technical information here, which would alienate those who do not understand how a computer is constructed.

Competitive Research:
Bestbuy.com

Bestbuy.com shows us a much clearer example of understanding how to buy a computer (even for those who struggle with knowing the difference between USB-A and USB-C). Check it out:

Exploration:
Wireframes for functionality

After evaluating the existing UX, I believe that I was now ready to start outlining ideas to help simplify the shopping experience for the end user. Invision to the rescue!

Exploration #1: Category Browse

My first concept is a redesigned category browse, with a simplified category hero section at the top. Also note that it is easier to browse further down the page with shorter descriptions and no odd blue statistic bars.


Exploration #2: Recommendation Engine

An alternative concept includes a recommendation engine, which helps direct the user by prioritizing their computing problems over conveying technical details.

Product Page

I envisioned a clear product page with easy to understand meta data and a tabbed content section to convey more details if desired.

High-Fidelity:
Let's make it *pop*

Utilizing Sketch, I first began creating text and button styles as reusable components. This little bit of effort on the front end helped me design these high-fidelity mockups quite efficiently. I even zoomed in the closest pixel and pulled RGB values from my web browser inspector to ensure that my mockups would be on brand.

Recommendation Engine Mock-up

This Sketch mock-up for the recommendation engine option has brought user clarity and removed any technical static from the user experience. A slight refinement in the visual design also helps clean things up nicely.


Product Page Mock-up

This product page helps the user understand how each product is rated in terms of price and features.


Alternative Product Rating

I also designed an alternative method of conveying the price and features, which makes more sense as a linear scale:

Final Thoughts

For the majority of the world who cannot discern the difference between RAM memory and Solid State, it can be intimidating to know where to begin shopping for a computer. Dell.com has the potential to stay technically descriptive while also including customers with varying computer knowledge. I believe that it would be within their best interest to lower the barrier to entry as much as possible.

Further Questions

This exercise would need additional details to further solidify it as a viable solution:

  • Are Dell customers typically more technically inclined?
  • What are the needs of a typical Dell customer?