intern

@Scandinavian Photo

timescope

4 weeks

Case Study:

Evaluating design changes on e-commerce product cards

Project Overview

The current product cards are difficult to quickly scan through. When I entered this project a preliminary design of the new product card had already been set. However, the design iteration was hypothetical and lacked sufficient research that would support the design decision.
‍
This version did not display the bullets on the product cards, and they only appeared when hovering.

My role

My role was to evaluate if implementing the bullets-on-hover feature would truly benefit users or if it would be a costly and unproductive endeavor.

Once the design was finalized, I developed reusable product card components for the Design system, optimizing workflow for both mobile and desktop.

Constraints

We couldn't add visible stock status despite its researched impact.
‍
Due to budget constraints, We had to prioritize which features to update on the product cards and could not add new functionality. This required careful consideration of which elements were most important to improve, given the limited resources available.

The problem

The current text-heavy product cards are difficult to scan.

Scandinavian Photo currently displays bullets on their product cards, but due to the heavy information, a hypothesis that the designers has was that by hiding the bullets and only revealing them upon hovering, the user experience would be simplified since the users wouldn't be bombarded with a lot of information at once.

The hypothesis

Can hiding the bullets and only displaying them on-hover be a solution?

Research

Potential benefits

Clean and a minimalistic look.

Stock status is not visible during the checkout process, meaning they often are unaware they have ordered an item that is out-of-stock, or having to call CS to make sure an item is available.

Easier to quickly scan through products

Customers are unaware that their orders may contain both in-stock and out-of-stock items and are being sent as part deliveries.

Emphasizes the key features

Customers assume that when they see an item available at a particular store, it means the item can be reserved at that location.

User testing

Jakon Nielsens 6th rule: Recognition rather than recall

For this task, the user was prompted to search for a specific product on the website, using both the current solution with static bullets, and the version where the bullets appear on-hover, with the information located in the bullets in order to see how the effect would affect their regular browsing on the site.

Variant A - Static Bullets

Time on task: 44s.

I enjoy browsing the website for new products, so I find the bullets to be very helpful for comparing products

Variant B - Bullets-On-Hover

Time on task: 1m 29s

"The hover-feature is making me feel sea sick.

It was difficult to compare products by reading the bullets and then having to memorize the features.

Result

Presented my findings to the stakeholders and the feature ended up not being implemented.

Presenting my findings to stakeholders allowed me to advocate for users, resulting in the decision to not implement the initially planned hypothetical design.

The effect caused a cognitive overload for the users.

After careful consideration, it was evident that the version displaying the bullets consistently was the most favorable choice for users. This is due to the fact that many users visit the website for browsing purposes rather than solely for purchasing, and it can be burdensome for them to memorize all the specifications listed in the bullets and recall them when they disappear.

The final design

I built smart components for the final design, optimized for both mobile and desktop interfaces.

The product card-design that made the cut included static bullets but with more padding around them, and limited to 2 rows.

What did i learn?

Takeaways

Balancing design with budget constraints

I've learnt to recognize the time-consuming nature of prototyping, dedicating more time to this stage is crucial since it often takes several rounds of testing, collect data and reiterate. I am still glad I tested at an early stage of the process and having a better idea of the final result before starting hi-fi prototyping – which would've been more time-consuming.

Being a users-advocate truly makes a difference

It was a great lesson for me as a UX Designer to conduct research on a project that was soon-to-be implemented and adress to the stakeholders that my findings showed that the new design wouldn't be accessible for users. Especially difficult for users who are using a different screen tools to navigate through.

Go back to homepage →