How I Created a Scalable, Cross-Platform Tile System for a Better Shopping Experience
As the only product designer, I led the complete redesign of Brad’s Deals global tile component. My goal was to deliver a modern, mobile-first shopping experience and create a unified user interface across web, iOS, and Android for the first time. This project established the foundation for scalable design, increased merchant visibility, improved user trust, and set the platforms up for future growth.
Legacy tiles were fragmented across desktop, mobile, and apps with no shared design standards. This caused a confusing and outdated user experience.
Before
After
A single, unified tile system built for mobile-first browsing, brand trust, and future scalability.
Results
2–3× more deals and categories shown above the fold across all devices
Mobile feeds expanded from 12 → 50 deals
Desktop feeds doubled from 12 → 24 deals
Introduced first responsive grid system
First global component used sitewide
Unified tile UI across web, iOS, and Android
My Role as Lead Product Designer
I drove the entire UX process including research, pitching ideas to stakeholders, and guiding ideation and wireframing sessions. I also facilitated user interviews and drove post-launch efforts to refine the tile component.
Platforms
Mobile Web
Desktop Web
iOS
Android
The Team
Product Designer (1)
Project Manager (1)
Developers (5)
Brad's Deals is an online affiliate marketing platform. A team of editors finds and shares the best deals on the web. The company earns commission when users click on affiliate links and buy from on merchant sites.
The Challenge
Outdated Tiles Undermine Trust and Sales
The product tiles are almost 20 years old and fail to meet modern e-commerce standards. This makes it hard for users to browse, compare, and trust the products. As a result, engagement and conversion rates have fallen. Visual inconsistencies across desktop, mobile, and app tiles weaken brand credibility and user confidence. Stakeholders were worried that the oversized tile designs restricted sales options for merchant partners.
The Opportunity
Create a Cohesive Tile Experience to Strengthen Trust
A fresh tile design can rebuild user trust, improve engagement, simplify browsing, and strengthen brand credibility across all platforms. Optimizing tile sizes and layouts will show more products on each page. This change can boost revenue for merchant partners and make shopping smoother and more enjoyable for users.
Legacy Product Tiles
Desktop Tile
Native Apps Tile
Mobile Web Tile
Balancing Business Objectives with Design Constraints
Designing for Trust, Growth, and Scalability
This redesign focused on four key business objectives:
Enhance Trust and Visual Consistency
Standardize tile designs across all platforms to make the shopping experience more modern, polished, and trustworthy.
Increase Product Visibility and Sales Opportunities
Optimize tile layouts to show more products above the fold. This gives merchant partners more visibility and can boost conversions.
Meet Modern E-Commerce Expectations
Add important product details to align with user expectations and simplify their shopping experience.
Establish a Scalable Global Component
Develop a flexible, modular tile system that can change and grow with the site redesign.
Navigating Challenges and Constraints
While this redesign was a necessary modernization, several key constraints shaped my approach:
Limited Budget for User Testing
Stakeholders were not willing to invest in new research, so I relied on established e-commerce standards, competitor analysis, and best practices to guide my design choices.
Outdated Legacy Code
The old platform's disorganized code made even small updates difficult. We needed to start from scratch with a flexible, future-proof solution.
Balancing MVP vs. Future Vision
Stakeholders had ambitious ideas for new features but this phase had to focus on foundational improvements.
How Competitive Research Led to Seven Key Tile Enhancements
Without budget for new user testing, I relied on competitive analysis and best practice research to guide the tile redesign. I reviewed top e-commerce sites and The Baymard Institute guidelines to identify what makes product tiles effective, easy to scan, and conversion-friendly.
This research revealed seven key upgrades to align our tiles with modern e-commerce expectations:
#1
Smaller, More Effective Product Thumbnails
Research shows maximizing visual information helps users browse without leaving the page. Our desktop tile thumbnails have always been problematic due to their large size and poor quality images. To address this, I resized desktop images for better clarity. We also plan to add more images in future iterations.
New thumbnail
Future thumbnail iteration
#2
Clear, Prominent Pricing
Because price is critical for quick comparisons, I separated price from headlines, standardized its placement, and styled discount prices with large, bold text for visibility. Deals were also categorized into product, sale, and clearance types to improve sorting and filtering.
Deals categorized into three types: product, sale and clearance
#3
Highlighting Discounts with Visual Cues
Displaying the original price and discount percentage builds purchase confidence. Strikethrough MSRPs and a bold red savings percentage were introduced to meet user expectations and industry standards.
Legacy price in headline
Updated price with added MSRP and savings percentage
#4
Adding Brand Names to Build Trust
Familiar brand names boost credibility. When available, brand names were added to headlines to help users quickly recognize trusted products.
“Adidas Women’s Cloudfoam Pure 2.0 Walking Shoes Available in Two Colors”
Sample of a headline feature a well-known brand
#5
Expanding Headlines to Showcase Key Features
Users expect to see 2–5 essential product features when browsing. I increased headline character counts to highlight product features better and make comparing deals easier.
Legacy tile without flag
Legacy tile with flag
Legacy headline
Increased character count
#6
Improving Shipping Visibility and Consistency
While competitors often keep shipping details hidden until checkout, Brad’s Deals users expect upfront transparency. I standardized the shipping label placement on all tiles and implemented a drop down list of shipping options in the CMS to reduce editorial workload.
Samples of shipping flags
#7
Smarter Use of Flags
Flags like "New" highlight special deals but were rarely on the legacy site, which left visual gaps. I redesigned the flag treatment to overlay directly on images, eliminating dead space when there is no flag.
New tile with flag
Planning for Future Enhancements
While some features like a save icon and user ratings were outside the MVP scope, I proactively reserved space in the design to support them in future iterations.
Quick Stats:
The app’s save feature was used over 360,000 times in a 28-day window, confirming strong user demand.
User reviews remain a desired future addition pending CMS expansion.
Potential save icon locations
Securing Stakeholder Buy-In & Aligning Teams
Gaining Approval Through Research-Driven Redesign
During stakeholder presentations, I highlighted the shortcomings of the legacy product tile. These included oversized imagery, missing key product details, hard-to-read pricing, and wasted space on rarely used features like flags and editor timestamps.
I proposed a new wireframe that incorporated the seven key research-backed improvements to address these issues. I showed how the new tile met industry standards and connected each design choice to business goals, such as improving product visibility, building user trust, and increasing sales opportunities for merchant partners.
Legacy Tile
Proposed tile wireframe
Orchestrating Cross-Team Collaboration to Ensure a Smooth Transition
After securing stakeholder approval, I worked closely with product, development, and editorial teams to ensure a smooth implementation. This included updating CMS fields, training editorial staff on new workflows, and proactively aligning teams around the new tile requirements. By planning for cross-functional needs early, I ensured the redesign was both visually improved and feasible to maintain and scale.
Building a Unified, Mobile-First Tile Experience Across Platforms
Establishing a Visual System from Scratch
Without a design system in place, I defined the visual basics for the new tile. This included font styles, element positioning, spacing rules, animations, and hover states. I also designed flexible fallback rules to handle edge cases from manual editorial errors to ensure tiles render cleanly in all scenarios.
With over 80% of visitors accessing Brad’s Deals via mobile devices, I prioritized a mobile-first approach and made sure the designs scaled seamlessly across desktop.
Some tile design variations
Implementing a Responsive Grid For Consistency and Scalability
I introduced the company’s first flexible 12-column responsive grid to keep alignment consistent on all platforms. This grid made browsing easier, improved development workflows, and set up a strong foundation for future pages.
After testing various shapes, a vertical tile layout was chosen for its adaptability across screen sizes.
Example of universal tile shape within the grid on mobile and desktop screens
Expanding Deal Visibility Across Mobile and Desktop
To modernize the experience and increase product visibility, I redesigned the deal feeds to prioritize scrolling. On mobile, I replaced pagination with horizontal scroll for multi-category pages. This is a familiar action for app users. Vertical scrolling was introduced within categories to create a more natural, social media-like experience. On desktop, feed height was reduced and carousel arrows were moved.
Deal feeds now surface 2–3x more deals and categories above the fold across all devices.
The number of deals in a single mobile feed increased from 12 to 50, while desktop feeds doubled from 12 to 24. These changes greatly enhanced usability, eliminated touch target frustrations, and expanded sales opportunities for merchant partners.
Before
After
Before
After
Extending the New Tile System to iOS and Android
After establishing the redesigned tile system for desktop and mobile web, I collaborated with native app teams to adapt the design for iOS and Android.
While maintaining platform-specific usability standards, I ensured the core component structure and visual hierarchy remained consistent. This created a unified shopping experience for both mobile web and native apps for the first time.
Before
Legacy iOS version
After
New iOS version
New Android version
Strengthening Brand Trust and Streamlining A/B Testing
Creating a consistent look and feel on desktop, mobile web, and native apps made shopping easier and more reliable for users. It also unlocked new opportunities for more effective A/B testing.
Previously, platform inconsistencies made it difficult to isolate the impact of individual design changes. Now, with a unified component system, we can confidently test single variants on all platforms, giving us more accurate insights to guide future optimizations.
Desktop
Mobile Web
App
Final Solution: A Modern Tile Experience
A Scalable, Unified Tile System That Strengthened Trust and Drove Engagement
The new global tile system delivered a modern and consistent user experience across desktop, mobile web, iOS, and Android — a first for Brad’s Deals. Standardizing our design helped us build brand credibility, made browsing easier, and increased sales opportunities for merchant partners.
Key Outcomes of the Tile Redesign:
Expanded Product Visibility
Deal feeds now show 2–3x more deals and categories above the fold on all devices, creating greater opportunities for merchant partners.
Cross-Platform Consistency
Shoppers experience a cohesive interface for the first time, whether browsing on desktop, mobile web, or native apps. This improved brand trust and simplified future A/B testing.
Future Scalability
The new tile system established a flexible foundation for future design iterations, site-wide consistency, and scalable growth.
Mobile-First Improvements
Prioritizing mobile users, who account for over 80% of site traffic, resulted in a more intuitive, scroll-friendly experience. This eliminated touch target issues and improved usability.
Praise for New Tiles
“I feel like I'm getting a better deal when I see a high percentage off!”
-Brad’s Deals User
“I can compare more deals at one time.”
-Brad’s Deals User
“It feels like we are being honest with our customers by including more product details instead of purposefully being vague to get a click.”
-Brad’s Deals Editor
“Customers will finally be able to sort by price now that it is not a part of the headline. Long overdue.”
-Brad’s Deals Editor
Iterations Based on Post-Launch Insights
Streamlined Headlines for Maximum Impact
We found that “Sale” and “Clearance” terms were appearing more frequently than expected, which led to redundant headlines that added little value. To improve headline clarity, we updated the CMS to allow editors to add sale details in a separate open-text field. This change frees up headlines for more meaningful product information.
Repetitive “Sale” and “Clearance” language on each tile
Replacing “Sale” with the sale details
Removed Shipping Flags for a Cleaner Interface
Data showed that 86% of deals offered free shipping, making the shipping flags redundant. A/B testing confirmed that removing shipping flags had no negative impact on engagement or conversion. Customers told us that they preferred shipping details on product pages rather than tiles. We removed shipping flags to deliver a cleaner UI.
Shipping flag placement upon launch
Shipping flags removed in favor of a cleaner UI
Looking Ahead: Plans for Future Enhancements
With the updated tile system in place, we are continuing to test variations and plan the following enhancements:
Multi-Image Previews: Users can see several images directly from the tile, reducing the need to click through to the product detail page.
Save for Later: Add a bookmarking feature so users can easily save deals and revisit them later.
Customizable Tile Layouts: Users can choose how many tiles show on each page, tailoring the browsing experience to their preferences.
Reflections and Lessons
Making Strategic Decisions with Limited Resources
Since the legacy tiles were 20 years old, stakeholders viewed this redesign as a necessary modernization rather than an opportunity for new user research. I heavily relied on established e-commerce standards and best practices to validate assumptions, guide design choices, and push for strategic improvements. Establishing a scalable foundation was critical. With modern infrastructure in place, we can now improve the experience based on real user insights.
Designing for Scalability and Future Iterations
Without a design system in place, this project became a key starting point for component standardization across platforms. I made every design choice with flexibility in mind to ensure the tile system could adapt to future features like saving, sharing, and multi-image previews. Balancing long-term vision with MVP needs was key. By keeping the initial launch focused, I built a strong, scalable foundation for future growth.
