Compare Page 2.0 for Dell.com
Making it easier for customers to find their ideal laptop.
Objective
Make the comparison feature on dell.com less cluttered, more helpful, and easier for customers to use.
Background
The comparison feature on dell.com had a much higher conversion rate than other parts of the site, so stakeholders wanted to bring the experience to other parts of the site. However, it was clear to stakeholders that many design improvements were needed prior to bringing the feature elsewhere. My goal was to discover precisely what needed to be improved upon in the design then bring the feature to other parts of the site once it was improved.
​
I worked on this project from July to November 2022 while also juggling responsibilities of another project I was working on, and taking a few weeks off to get married and go on my honeymoon in September.
​
Following the completion of this project, the implementation of these designs was put on hold due to the development team moving to a different project. However, I have thoroughly documented my design process and the reasoning for each decision made, and I am hopeful it will be implemented in the future.
Tools
Figma, Figjam, usertesting.com
Skills
E-Commerce Design, User Research, Interaction Design, Wireframing, Prototyping, User Testing
Final Deliverable
High-fidelity desktop and mobile wireframes and prototypes in Figma, presentation covering process and reasoning behind design decisions
The Process
Site Evaluation
Within the Dell Digital Design team, there is a strong focus on the Discovery and Framing (DnF) process. This project was my first time doing a full DnF on my own and my project manager Anand’s first project at Dell. Luckily I had received quite a bit of support and advice from my fellow designers. However, each DnF is unique and there really isn’t a set process to follow, so I ended up learning a ton along the way.
Discovery
Discovering the Problems
I, along with my project manager, started the discovery process by checking how other companies including e-tailers, direct competitors, and review websites enabled product comparison. We also reviewed customer satisfaction data.
​
Then, I learned about previous A/B tests that Dell had done concerning the compare feature, read up on best practices for product comparison on Baymard and Nielsen Norman, and finally I ran an unmoderated test on the previous version of the experience on usertesting.com.
This is an image of the Figjam file with my insights from Nielsen Norman and Baymard, past A/B tests, and the unmoderated user tests I ran.
Defining the Problems
After finishing our initial research, we - with the help of our stakeholders - began to lay out and categorize all the problems with the current version of the compare page.
We then organized these problems with affinity diagramming, mapped out root causes (above), identified key questions and assumptions, and finally came up with 6 “How might we” statements (below).
Framing
Generating Solutions
Once we understood the desired outcomes of the new design, we held an ideation session with 20+ stakeholders to come up with ideas on how to solve the problems we identified. During the session, everyone had a chance to vote on the ideas they liked the most, and then I later grouped together the ideas that had similar themes.
Refining Solutions
I then took to Figma to start coming up with a new design that solved all of these problems. Once I had designs I was happy with, I took them to my internal stakeholders, namely my Project Manager and Experience Lead. After a few rounds of feedback,I had a design that we were all happy with, and I returned to usertesting.com to begin testing this new design.
​
I chose to run these tests as moderated tests rather than unmoderated due to some limitations to my Figma prototype, and because I knew that that would be the best way to get in-depth feedback on this new design.
​
I chose to split the tests between tech-savvy and not tech-savvy users because I wanted to make sure that people who cared a lot about certain specs would have all the info they needed while also not inundating less tech-savvy users with information that was unneeded and confusing for them.
The first round of testing yielded some valuable insights (which I will go into more detail on in the next section). Once I made some changes to the design, I conducted another round of testing on both the desktop and mobile. The second round of testing was much more successful and I only made minimal changes to the design afterward.
Final Design
Old Version
Compare 2.0
Compare 2.0 Improvements
Product Recommendations
A recommendation feature was something that many stakeholders requested from the beginning.
During my user testing, I found that this was something that users found genuinely useful and really seemed to like. I also learned that users expected the recommended product to be similar to products they already selected (in price and features).
My initial intention was that if any of the four spaces were open, they would automatically be filled with a new recommended product. However, during testing I found that some users thought that the page was too cluttered when comparing four products at once. Thus, my final recommendation was such that only one recommended product would appear automatically, and the user would have the option to add more (as pictured above).
Highlight Differences
I added the highlight differences feature in order to help users more easily differentiate between products and ignore extraneous information.
The feature becomes more helpful when fewer products are being compared since almost every spec will be highlighted when comparing a lot of products at once.
​
During testing, users really liked this feature for the most part, and some said it was their favorite feature on the page.
Customization Options
This feature was already part of the previous design, but the link said “Show all options”. This wording made the functionality unclear to users during the test I ran, so I changed the wording to “Customization Options” to make it more clear. I also added the price difference between the options in bold in order to further assist users in making the best decision.
Info Modal
This feature was already live on some of Dell's product detail pages. The purpose of it is to help less tech-savvy users choose between specs when they don’t necessarily understand the differences.
During testing, I was able to confirm that less tech-savvy users found this feature to be very helpful on the compare page as well.
More Details
For this feature, I simplified the specs so that the user only sees the most critical information at first. The full spec info was available under the “More Details” CTA. The info within the More Details section was then broken down and labeled for more clarity.
​
During user testing, one user perfectly summed up the perks of this feature saying “The information that I'm being shown right off the bat is useful for me to narrow it down, so it helps me select a couple of different devices, and then I could dig down a little bit deeper to see the additional details that might help you make a definitive selection”.
Simplified Product Stacks
Previously on the compare page we used an older, much longer version of the product stacks that causes a lot of information to be shown twice. In my new design, the top specs and financial offers are only shown in their own sections below the stacks.
I also reworked the product stack outlines to remove the space between them for aesthetic purposes.
​
Overall, I feel that this makes the page feel much less cluttered along preventing information from being repeated
Product Stack - Old Version
Product Stack - Compare 2.0
Gaming-Specific Specs
I also added a “Performance” section on the new compare page with two gaming-specific specs – Framerate and Geekbench score. Users that were interested in gaming thought this was helpful.
Mobile-Specific Design Considerations
Dell has a pretty large majority of their traffic come through their desktop site, and for the compare page, the number of desktop users was especially high. However I felt it was very important to make the experience as seamless as possible for our mobile users.
Message Bar
To start, I added a message bar at the top of the page letting users know that by rotating their phone to landscape mode, they would be able to view up to three products at once rather than just two.
Specs Filter
I also added a 'specs filter' where users would be able to filter out the specifications that they didn't want to see from the page. This feature was a part of previous versions of the design that I decided to bring back in order to allow users to clean up the already cluttered mobile design. During testing there were some users that thought this could be very useful.
Sticky Spec Headers
Another design decision I made specific to mobile screens was to make the gray spec headers static when the user scrolls horizontally. This prevents the user from losing their place on the page and forgetting what spec they are looking at.
What's next?
Unfortunately, right after I finished this design, all work on the compare page was put on hold. I did write extensive documentation on all of the design decisions I made, so hopefully the project will eventually be picked up again in the future.
