Objective
This case study demonstrates how applying the principle of contrast in design can enhance user experience (UX) and improve the conversion rate of an e-commerce website. The primary goal was to leverage contrast to make the website’s key elements (like product images, call-to-action buttons, and important offers) stand out and guide users through a seamless shopping experience.
Background
An e-commerce brand specializing in fashion retail was facing a high bounce rate and low conversion rate on its website. The website had a variety of products and categories, but users were struggling to navigate effectively and find the most important information. The site’s layout was cluttered, and many users reported that it was hard to focus on the key action areas such as “Add to Cart” buttons and promotional banners. The design team suspected that the lack of contrast in visual elements was contributing to the confusion and poor engagement.
The design team decided to focus on the principle of contrast—which involves making key elements stand out through differences in color, size, shape, and spacing—to guide the user’s attention to critical actions like product selection, checkout, and special promotions.
What is the Principle of Contrast?
In design, contrast refers to the use of opposing elements such as colors, sizes, shapes, textures, or spacing to create visual differentiation. The primary purpose of contrast is to ensure that elements stand out and are easily distinguishable from their surroundings, which:
- Helps users prioritize information.
- Guides attention to important actions.
- Enhances readability and accessibility.
Contrast can be applied in various ways, including:
- Color contrast: Using light/dark or complementary color schemes to make certain elements stand out.
- Size contrast: Differentiating the size of elements (e.g., large buttons for calls to action).
- Shape contrast: Using different shapes for different elements to make them visually distinct.
- Spacing contrast: Adding more space around key elements to ensure they stand out.
Challenges
The e-commerce website faced several challenges due to poor contrast:
- Lack of Focused Attention: The homepage displayed a variety of product categories, offers, and promotions, but none of them stood out, leading to users not knowing where to focus their attention.
- Confusing Calls-to-Action: The “Add to Cart” buttons were blending in with the rest of the page, leading to lower interaction rates.
- Unreadable Text: Some text was placed over images without enough contrast, making it difficult for users to read and understand product information.
- Low Conversion Rates: Users were not engaging with promotional banners, and sales funnels showed high drop-off rates, especially during checkout.
Approach: Applying the Principle of Contrast
The design team began by identifying key areas where contrast could improve the overall user experience and address specific challenges:
Step 1: Contrast in Calls-to-Action (CTAs)
- Before: The “Add to Cart” button was a subtle, muted color, and blended with the background and surrounding product images.
- After: The design team used high-contrast colors for the CTAs. A bright, attention-grabbing color (like orange) was used for the “Add to Cart” button, which contrasted sharply against the more neutral tones of the product images and the website’s background.
- Result: The new design made the CTA buttons more noticeable, which led to an increase in click-through rates (CTR) by 25%.
Step 2: Contrast in Promotional Banners
- Before: The promotional banners, which displayed discounts and limited-time offers, were placed at the top of the homepage but lacked visual contrast with the background, making them easy to overlook.
- After: The design team applied a darker background color to the banners with bold white text to make the offers pop. The CTA on the banner was also made more prominent through color contrast with the background, drawing users’ attention immediately.
- Result: The visibility of the banners increased, leading to a 15% increase in users clicking on the promotional offers and a 10% higher conversion rate on sale items.
Step 3: Contrast in Product Images and Descriptions
- Before: The product images were consistent in size, but the product descriptions were difficult to read because the text color wasn’t contrasting well against the background, especially in image-heavy sections.
- After: The team used dark text on a light background for product descriptions and ensured there was adequate spacing between images and text to make them easily distinguishable. Product titles were made bold and larger to give them more prominence compared to other text elements.
- Result: The product pages became easier to scan, and the average time spent on product pages increased by 18%, as users could quickly read the key product details without straining their eyes.
Step 4: Contrast in Typography for Readability
- Before: The website used a single font style for all headings, subheadings, and body text. The lack of differentiation between different types of content made it difficult for users to navigate or focus on important text.
- After: The design team applied font contrast by differentiating headings, subheadings, and body text. Headings were made bold and significantly larger, while body text remained clean and legible with a high contrast against the background.
- Result: The website’s text was now more legible, and the bounce rate dropped by 12% as users could more easily engage with the content.
Outcomes
Business Metrics:
- Conversion Rate: The overall conversion rate increased by 20%, attributed to more users successfully completing purchases and interacting with key site elements like CTAs and promotional banners.
- Click-through Rate (CTR): The CTR for “Add to Cart” buttons rose by 25%, and users were more likely to click on special offers.
- Average Order Value (AOV): The AOV increased by 10% as more users interacted with promotional offers, resulting in higher sales volumes.
UX Metrics:
- Time on Page: Users spent more time browsing products and engaging with content, with an 18% increase in time on product pages.
- Task Success Rate: The task success rate for completing checkout processes improved by 15%, thanks to clearer CTAs and a more focused layout.
- Satisfaction (CSAT): User satisfaction scores increased by 12%, with users praising the improved clarity and ease of navigation.
Key Insights
- Contrast Guides User Focus: By using contrast strategically, the design team was able to draw users’ attention to key areas, such as calls-to-action, promotional banners, and product information.
- Contrast Improves Legibility and Accessibility: Clear contrast between text and background improved readability for all users, including those with visual impairments.
- Consistency in Contrast: Maintaining consistent use of contrast throughout the website helped create a more intuitive and cohesive user experience, making it easier for users to navigate and make decisions.
- Subtle Contrast Can Enhance Brand Identity: In this case, contrast was not just about functionality; it also contributed to reinforcing the brand’s identity by choosing colors that resonated with the company’s visual language.
Conclusion
Applying the principle of contrast was a pivotal strategy in improving the UX of the e-commerce website. The design team used contrast not only for aesthetic purposes but also to make important elements more visible and functional. By enhancing visibility, guiding user attention, and improving readability, the website became more engaging, leading to higher conversion rates and improved user satisfaction.
Key Takeaway: In UI/UX design, contrast is a powerful tool that helps prioritize information, guides the user’s journey, and ensures clarity and readability. When used effectively, contrast can significantly enhance both the user experience and business outcomes.
