The Problem Statement
Artfinder's basket page exhibits a 70% abandonment rate, indicating significant friction in the customer purchase journey. This drop-off at a crucial stage negatively impacts conversions and revenue.
Impact:
Financial: Substantial revenue loss due to incomplete transactions, reduced marketing ROI, and increased customer acquisition costs.
Brand: Potential reputational damage from frustrated customers, and loss of market share to competitors with smoother checkout experiences.
Affected Parties:
Customers: Frustration and abandonment due to usability issues or unexpected costs.
Sales & Marketing: Hindered sales targets and reduced campaign effectiveness.
Customer Support: Increased workload from basket-related inquiries.
Artists: Lost sales opportunities.
Discovery Focus: To identify and address the root causes of the abandonment, we will:
Conduct user behavior analysis, testing.
Evaluate the page's design, functionality, and content.
Investigate technical issues, shipping costs, trust factors, and checkout clarity.
Overview
I conducted a research focussing on the problem and uncovered information architecture problems
Outcomes
Gathered stakeholder feedback
SEO agency feedback
Competitor and market analysis
Detailed Google Analytics data review
Updated terminology
Updated information architecture
Created new basket page
Discovery
Stakeholder insights
A critical bottleneck exists within Artfinder's customer experience: the basket page. With a staggering 70% abandonment rate, we're losing a substantial number of potential sales. Compounding the issue is the page's foundation on outdated technology, which resulted in severely restricted Google Analytics tracking. We're essentially navigating in the dark, with only limited data points like abandonment rates and basic event counts to guide us. Despite these limitations, we're determined to illuminate the path to higher conversions by connecting the dots between our limited data and the prospective problems our customers are facing. The urgency to address this issue is paramount, as every abandoned basket represents a missed opportunity to connect art lovers with the unique pieces they seek.
Hotjar Recordings
Artfinder's 70% basket abandonment presented a data challenge, but Hotjar recordings provided a crucial breakthrough. By filtering relevant sessions, we gained direct access to user behavior, revealing the friction points driving the high abandonment rate. Hotjar became our primary tool for uncovering the 'why' behind the numbers.
Market and Competitive Analysis
To further understand the factors contributing to Artfinder's 70% basket abandonment, we conducted a comprehensive industry analysis. We examined 112 desktop and 72 mobile basket pages from across the art and e-commerce sectors, identifying common practices and potential pitfalls. This benchmarking provided a crucial external perspective, allowing us to contextualize Artfinder's performance and identify areas for improvement. By comparing Artfinder's experience to industry standards, we gained valuable insights into user expectations and best practices, informing our approach to optimizing the basket page and reducing abandonment.
Usability Heuristics and Metrics
To effectively diagnose the 70% basket abandonment, we applied Nielsen Norman Group's Ten Usability Heuristics. This framework allowed us to harmonize insights from Hotjar, quantitative data, and industry benchmarks, revealing key usability issues and guiding our optimization efforts.
Define
Problem 1: Number of products in the basket
Our analysis revealed a critical usability flaw on Artfinder's basket page: the lack of a clear, persistent visual indicator of the number of items in the basket. Given the varied price points of artworks and the potential for users to add multiple items, this absence creates significant friction. Users are forced to manually scroll and count, leading to frustration and a sense of lost control. Implementing a visible item count would provide crucial feedback, reassuring users that their selections have been registered and empowering them to manage their basket effectively. This simple feature would not only improve usability but also foster a sense of transparency and control, encouraging users to proceed with their purchase.
GA data shows the “scrolling” event is the number 4th event on the basket page. This is not mainly a problem, but some of these scrolling events might be related to counting the products.
Market Analysis
Additionally I've found 2 hotjar recordings that higlight this issue.
Problem Statement
As a desktop, tablet and mobile device user, I want to see the number of products I’ve added to the basket because I don’t want to lose time when counting the products in my basket.
New Design and Metrics
By highlighting the number of items I aim to;
Reduce time on task
Increase satisfaction
(Engagement, Satisfaction, Efficiency)
Problem 2: Information blocks
Artfinder's basket page, while intended to inform, inadvertently creates anxiety through an overabundance of yellow and red information blocks. While clarity is crucial in a purchase journey, bombarding users with numerous error messages and constraints can be overwhelming. The visual clutter alone triggers a sense of unease, suggesting something is fundamentally wrong. Further exacerbating the issue is the repetition of information, with identical messages appearing multiple times. This redundancy mirrors a frustrating real-life conversation, where repetition breeds annoyance rather than clarity. The accumulation of unnecessary and repetitive information leads to cognitive overload, forcing users to decipher a confusing array of alerts. Every additional question raised increases the time required to complete the transaction, ultimately pushing time-sensitive users away. We must strive for a streamlined, intuitive experience, where essential information is delivered concisely and efficiently, empowering users to act quickly and confidently.
Problem Statement
As a user I want to see get system feedback appropriately, so I can take necessary actions accordingly to continue my purchase.
New Design and Metrics
By reducing the number of repetitive and unnecessary elements on the page I aim to;
Increase success
Reduce duration
Prevent errors
Problem 3: Shipping location dropdown
A fundamental information architecture flaw exists on Artfinder's basket page, manifesting in the shipping location selection process. The presence of multiple dropdowns suggests the ability to assign unique shipping addresses to individual items. However, the system's functionality contradicts this expectation, applying a single shipping location to the entire basket. This misrepresentation creates a disconnect between the user's mental model and the system's behavior, leading to frustration and confusion. Effective information architecture ensures clarity and logical organization, enabling users to easily find and understand information. The current design fails to achieve this, resulting in a confusing and inefficient user experience. Moreover, the redundant dropdowns contribute to page length, potentially leading to increased abandonment. Addressing this issue through a more intuitive and transparent design is crucial to improving the basket page's usability.
Additionally I've found 2 hotjar recordings that higlight this issue.
Market Analysis
Problem Statement
As a desktop, tablet and mobile device user, I want to see the basket page shorter and without extra repetitive elements because I don't want to be confused about what to click.
New Design and Metrics
Removing unnecessary dropdowns I aim to;
Increase success
Reduce error
Problem 4: Product information on the cards
A core information architecture deficiency is evident in the design of Artfinder's basket item cards. While each card contains essential information – artwork name, artist, type, size, price, and packaging – the lack of visual differentiation between these elements creates confusion. All information is presented in a uniform style, hindering users' ability to quickly identify and prioritize key details. Effective information architecture is paramount in providing a clear and logical structure, enabling users to efficiently navigate and understand information. The current design fails to achieve this, resulting in a cluttered and overwhelming experience. Implementing a clear visual hierarchy, using typography and spacing to distinguish between information types, is essential to improve the basket page's usability and enhance the overall user experience.
Market Analysis
Problem Statement
As a desktop, tablet and mobile device user, I want to be able to understand the information on the cards so I can decide quickly.
New Design and Metrics
Bringing hierarchy to the information elements in the cards I aim to;
Increase success
Reduce duration
Reduce error rate
Improve satisfaction
Problem 5: Remove the item due to shipping or closure
Artfinder's customers invest significant time and emotional energy in selecting the perfect artwork. Unlike typical online purchases, art buying is often driven by a desire for connection and resonance. This extended search process means users are deeply invested in their chosen pieces. Therefore, encountering unexpected removal requests on the basket page, after such a time-consuming selection process, can lead to profound frustration. These removal states, while intended to provide necessary information, ultimately undermine the user's emotional investment. No one wants to feel their time has been wasted, especially when they've invested it in finding something they truly love. We must carefully balance the need for information with the user's emotional experience, ensuring that the basket page reinforces, rather than diminishes, their connection to the artwork.
GA data shows the “remove_from_cart” event is the number 3th event on the basket page. Some of these events might be related to shipping or closure.
Additionally I've found 1 hotjar recordings that higlight this issue.
Market Analysis
Problem Statement
As a desktop, tablet and mobile device user, I don’t want to remove the item which I’ve spent a long time finding it so I don’t waste my time.
New Design and Metrics
By save for later function I aim to;
Increase success
Reduce duration
Improve satisfaction
Problem 6: Tax information
Users arrive at the Artfinder basket page with a mental model of the expected total cost. They naturally assume the 'Order Summary' reflects the final price. However, the absence of any mention of potential taxes disrupts this mental model. The sudden appearance of a tax amount during checkout, often a significant addition, can create a sense of betrayal and lead to frustration. Users feel they have been given misleading information, as the initial price presented did not accurately reflect the final cost. While the complexities of tax calculations are understood, we must find a way to manage user expectations. Even a simple disclaimer indicating that taxes will be added during checkout can prevent this surprise and maintain trust. Clear communication about potential costs is essential to avoid 'sticker shock' and ensure a positive user experience.
Market Analysis
Problem Statement
As a user, I don’t want to see surprise price changes between the basket and checkout so I can keep my motivation to purchase.
New Design and Metrics
By highlighting the tax amount on the order summary section I aim to;
Reduce errors
Improve satisfaction
Problem 7: Visibility of the USPs
Online shopping anxieties, including security and return concerns, can deter Artfinder customers. Clear visibility of USPs, such as secure payments and return policies, is crucial for building trust and encouraging purchases. We need Artfinder users to feel safe.
Market Analysis
Problem Statement
As a user, I want to make sure the website is secure and protecting me because I don’t want my personal information being stolen and I want to make sure I can send the item back in case I don’t like it.
New Design and Metrics
By positioning USPs much higher I aim to;
Improve success rate
Improve satisfaction
Reduce duration
Problem 8: Mobile: page length and usability
A fundamental principle of effective user experience design is to align with users' mental models. Artfinder's basket page should reflect the natural way users think about and interact with their online shopping carts. Users instinctively check their basket contents to verify the accuracy of their selections before proceeding to checkout. This behavior, observed across the online shopping industry, represents a core mental model. By designing the basket page to facilitate this verification process, we can minimize friction and create a more intuitive experience. Ensuring that item details are clearly presented and easily accessible allows users to quickly confirm their selections, reinforcing their mental model and building confidence in their purchase. When design aligns with user expectations, it fosters a seamless and satisfying shopping experience.
Additionally I've found 16hotjar recordings that higlight this issue.
Market Analysis
Problem Statement
As a user, I want to make sure the website is secure and protecting me because I don’t want my personal information being stolen and I want to make sure I can send the item back in case I don’t like it.
New Design and Metrics
By positioning USPs much higher I aim to;
Improve success rate
Improve satisfaction
Reduce duration
Develop
Design variants
I have created 3 design variations considering above issues and gathered stakeholder and team feedback on designs.
After reviewing stakeholder and team feedbacks, I made improvements on my design and created a final version for a guerilla usability test.
I have conducted 5 usability test and gathered feedback. Every user interacted flawlesly and without frustration with the design.
Deliver
To streamline development, we implemented a two-phase approach for the new basket page. I provided the development team with detailed design specifications, including components, breakpoints, prototypes, interactions, and highlighted design tokens, ensuring a smooth and consistent implementation.
