Objective
To explore how the Rule of Thirds—a fundamental principle from photography and design—can be applied to UI design, specifically to improve the visual appeal, usability, and overall user experience of an e-commerce app.
Background
An e-commerce company with a rapidly growing mobile app wanted to redesign its homepage and product listing page. The goal was to improve user engagement, increase time spent on the app, and ultimately boost conversion rates. Feedback from users indicated that the homepage felt overcrowded, with elements competing for attention, and the product listing page lacked focus, which made it difficult for users to find the products they were most interested in.
The design team decided to use the Rule of Thirds to create a more balanced and aesthetically pleasing layout that would help users naturally focus on key actions (such as product selection and cart interactions) and reduce cognitive overload.
What is the Rule of Thirds?
The Rule of Thirds is a design principle borrowed from photography, which involves dividing the visual space into a 3×3 grid (both horizontally and vertically), creating nine equal sections. The most important elements of the design are placed along these grid lines or at their intersections. This arrangement leads to a more balanced, natural, and visually engaging layout that captures the viewer’s attention in a way that feels harmonious.
In UI design, this principle is often used to structure layouts, placing the most crucial elements in the areas where the eye naturally tends to focus, which enhances user interaction and reduces unnecessary clutter.
Challenges
- The existing homepage had a very dense layout, with text, images, and buttons all competing for attention in a disorganized manner.
- The product listing page displayed many items with little differentiation, making it hard for users to quickly identify what was most relevant.
- Poor visual balance led to users missing important promotions or calls to action.
Approach: Applying the Rule of Thirds
Step 1: Redesigning the Homepage Layout
- Before: The homepage had a hero image at the top, with text and call-to-action (CTA) buttons stacked directly below. Product categories and promotional banners were scattered throughout the page, creating a cluttered feel.
- After: By dividing the screen into a 3×3 grid, the most important sections of the homepage—such as the hero image, primary CTA buttons (e.g., “Shop Now”), and featured promotions—were strategically placed along the grid lines or at their intersections. The most critical CTAs were placed at the intersections, as this is where the eye naturally gravitates.
- Top-left section: Hero image showcasing a seasonal promotion.
- Top-right section: Call-to-action (CTA) button: “Shop Now.”
- Center-left section: Featured product categories (e.g., “Electronics,” “Clothing”).
- Bottom-right section: Secondary CTA (e.g., “Sign up for discounts”).
- Result: The layout felt more structured and balanced, guiding users’ eyes naturally through the content. The call-to-action buttons became more noticeable and clickable, leading to an increase in user interaction.
Step 2: Redesigning the Product Listing Page
- Before: Products were displayed in a grid with equal-sized cards that didn’t stand out much. The lack of focus meant that users often felt overwhelmed and spent more time searching for items they wanted.
- After: The product listing page was redesigned using the Rule of Thirds by focusing on the placement of key visual elements:
- Top section: Featured product categories or promotions were placed in the top-center, guiding users’ eyes to this focal point immediately.
- Product cards: The product image, title, price, and CTA button (“Add to Cart”) were aligned along the grid lines. The most relevant items were placed at the intersections of the grid lines to make them more prominent.
- Sorting and filtering options: Positioned along the top-left and left sections of the grid, making it easy for users to find products based on their preferences.
- Result: Product cards were now easier to scan, with prominent visuals and clear CTAs that stood out. Users could immediately identify the most important products and promotions. Product filtering options, placed strategically on the left side, allowed users to narrow their search more intuitively. The rule of thirds helped create a visual flow that mirrored users’ reading patterns, increasing user interaction with the content.
Step 3: Focusing on Visual Hierarchy
- Before: The original layout lacked a clear hierarchy, and many elements seemed equally important, leading to confusion and indecision for users.
- After: Using the Rule of Thirds, visual hierarchy was introduced by placing the most important elements (e.g., CTA buttons, product features) at the intersections of the grid. Secondary elements were aligned along the grid lines to ensure the most crucial information grabbed users’ attention first.
- Key information: Product names, discounts, and prices were placed in the middle-right or top-right grid intersections for easy visibility.
- Secondary information: Less critical elements, such as product details or reviews, were placed towards the bottom or left side of the grid.
- Result: Users could easily identify important information and took less time to decide which products to explore, leading to an increase in add-to-cart actions and decreased bounce rates.
Outcomes
Business Metrics:
- Conversion rate: Increased by 18% on the homepage and 22% on the product listing page, driven by more intuitive product discovery and clearer CTAs.
- Average session duration: Increased by 12%, with users spending more time engaging with content that was visually engaging and easy to navigate.
- Cart abandonment rate: Decreased by 15%, indicating that users were now more confident in completing their purchases due to better layout and navigation.
UX Metrics:
- Task success rate: Improved by 20%, with users completing key actions like adding products to the cart and filtering items more efficiently.
- User satisfaction (CSAT): Increased from 72% to 88%, with users commenting on the improved organization and flow of the app.
Key Insights
- The Rule of Thirds Enhances Visual Balance: By breaking down the layout into a 3×3 grid, we were able to organize the content in a way that made it more digestible and appealing. The human eye naturally gravitates towards the intersections of the grid, making these areas ideal for key elements.
- Intuitive Layouts Lead to Better User Engagement: Structuring the page using the Rule of Thirds created a visual flow that naturally led users to the most important elements first, without overwhelming them. This increased engagement and task completion rates.
- The Power of Prioritizing Information: By strategically placing products, CTAs, and filters along the grid lines and intersections, we created a clear visual hierarchy that allowed users to focus on what mattered most.
Conclusion
The case study demonstrates how the Rule of Thirds can be a powerful tool in UI design, especially in environments where visual clarity and user flow are critical. By applying this principle to the redesign of an e-commerce app’s homepage and product listing page, we were able to significantly improve the user experience, enhance visual appeal, and increase engagement and conversion rates.
Key Takeaway: UI design isn’t just about placing elements randomly; it’s about creating an intentional structure that guides users through content in a natural, intuitive way. The Rule of Thirds helps achieve this by creating a balanced and aesthetically pleasing layout that enhances both usability and user satisfaction.
