Redesigning a Global Component to Establish Cross-Platform Consistency
UX Research • Global Component Redesign
Company
Brad’s Deals
My Role
Lead Product Designer
Conducted research, pitched to stakeholders, ideation, wireframing, user interviews, post-launch iteration
The Team
Product Designer (1)
Project Manager (1)
Developers (3)
Before
After
Overview
Company Background
Brad’s Deals is an online shopping platform that curates deals from thousands of merchants to help consumers find products like electronics, clothing, and home goods. The website was designed over 20 years ago and was difficult to update due to legacy code, no design system, and an outdated content management system (CMS). Following a tech stack overhaul, Brad’s Deals was ready to begin a full site redesign and started with the most common component: a product tile.
How Outdated Product Tiles Hurt Both Users & Sales
The product tiles were nearly two decades old and were dated in both design and functionality. They no longer met modern e-commerce expectations, making it difficult for users to browse, compare, and engage with products. The desktop, mobile, and app tiles each had different text styles, outlines, icons, features, and layouts, leading to an inconsistent cross-platform experience.
Desktop Tile
Native Apps Tile
Mobile Web Tile
The legacy tiles negatively impacted both user experience and business performance. Users found the design inconsistencies unappealing and untrustworthy, while stakeholders were frustrated that the large tile sizes limited sales opportunities for merchant partners.
This redesign was more than just a visual refresh. It was a strategic overhaul to modernize the shopping experience and create a scalable foundation for future enhancements.
Balancing Business Objectives with Design Constraints
Designing for Both User Trust & Sales Growth
This redesign focused on four key business objectives:
Enhance Trust & Visual Consistency: Standardize tile design across platforms to create a more modern, polished, and credible shopping experience.
Increase Product Visibility & Sales Potential: Optimize tile layouts to display more deals above the fold, giving merchant partners greater exposure and expanding conversion opportunities.
Meet Modern E-Commerce Expectations: Include key product details to align with user expectations and reduce friction in the shopping journey.
Establish a Scalable Global Component: Develop a flexible tile system that can evolve with the site’s redesign.
Navigating Challenges and Constraints
While this redesign was a necessary modernization, there were several key constraints that shaped my approach:
No Budget for User Testing: Stakeholders weren’t willing to invest in new research so I relied on existing e-commerce standards and best practices.
Outdated Legacy Code: The old platform's messy code made even small updates difficult so we needed to start from scratch with a flexible, future-proof solution.
Balancing MVP vs. Future Vision: Stakeholders had big ideas for new features but this phase needed to focus on foundational improvements.
Despite these constraints, I applied research-backed decisions and a flexible design approach to ensure this redesign laid the foundation for future iterations.
How Competitive Research Led to Seven Key Tile Enhancements
Since stakeholders weren’t willing to invest in new user testing, I relied heavily on competitive research and best practices to guide my decisions. Modern e-commerce sites have established clear patterns for product tiles so I analyzed competitors and The Baymard Institute catalog to find out what makes tiles effective, scannable, and conversion-friendly.
Seven must-have features were identified to bring our tiles in line with modern expectations. By applying these recommendations, I ensured that our tile redesign was a strategic improvement rooted in industry best practices.
#1
Product Thumbnails Are Essential
“Maximize the visual information available so users can navigate without having to leave the product list. Three thumbnails are recommended.”
Since we promote other merchants’ products, we have minimal control over product imagery. Desktop tile thumbnails have always been problematic due to their large size and poor quality images. To address this, I made desktop thumbnails smaller. Due to technical constraints, the MVP would show one image, with plans to add up to five in the next iteration.
New thumbnail
Future thumbnail iteration
#2
Display Price Clearly
“Price should be large enough to see without effort to help users quickly select or discard items in a product list.”
Extracting prices from old headlines seemed simple, but it proved to be tricky once I analyzed how the headlines were written. The decision was made to split deals into three types: product, sale, and clearance. This would allow the price to be extracted from the product headline.
Creating distinct deal types and separating price allows users to eventually sort, filter and search by price and deal type.
Price in headline with shipping info:
“Canada Gear Parka $74 Shipped”
Sale percentage range:
“30-40% Off Nike at Macy’s”
Under a certain price point:
“Family Pajamas under $20 at Macy’s”
Sale + additional percentage:
“Adidas: Up to 75% + 20% Off 2 Items”
Sample of various legacy product and sale headlines
Deals split into 3 categories: product, sale and clearance
#3
Displaying the Discount Percentage Encourages Users to Purchase
“Showing both original and discount price helps users believe they are getting a good deal. Price is typically a short amount of text. To avoid it being easily overlooked, use a large font size, a distinguished color, and bold styling.”
The legacy tiles only showed the discount price. Since all of Brad’s Deals products are discounted, I made the discount price the largest and boldest text on the tile.
The MSRP was added with a strikethrough and developers implemented an AI integration to calculate and display the savings percentage in red, a common color to signify a discount.
Legacy price in headline
Updated price with added MSRP and savings percentage
#4
Brand Names Build Trust with Users
“Brand names help users quickly understand product lists on websites with multiple brands. Familiar and trusted names make the site seem more reliable to consumers.”
This aligned with research that showed Brad’s Deals shoppers had an affinity for certain brands. We decided to include those brand names in the headlines when applicable.
“Adidas Women’s Cloudfoam Pure 2.0 Walking Shoes Available in Two Colors”
Sample of a headline feature a well-known brand
#5
Headlines Should Include 2-5 Key Product Features
“Highlighting product features allow users to compare items easily in product lists.”
Historically, headlines prioritized price, shipping, and additional savings detail due to character limit. To keep up with the competitive landscape, we increased the headline character count to better showcase product features.
An example of the legacy tile compared to other retailers’ tiles for the same product
Legacy headline
Increased character count
#5
Shipping
Although research showed that shipping information is usually provided elsewhere, our users were accustomed to seeing it displayed in the headline so we were hesitant to remove it.
We implemented a drop down list of shipping options in the CMS. This change reduced editorial time spent writing the deal headline.
Visual consistency was achieved by placing the shipping flag in the same spot on every tile.
Samples of shipping flags
#6
Flag Treatment
“Flags should be used to to highlight products that have a special feature or are suited towards certain customer segments.”
The most common flag on the old tiles was “New”, indicating deals posted in the last 24 hours. The legacy tile included space for a flag, despite over 90% of tiles not having one. This resulted in unnecessary white space.
I overlaid the flag on the image to prevent white space when the flag is absent. When the flag is present, it is small and does not take away from the image.
Legacy tile without a flag
Legacy tile with “New” flag
Updated “New” flag
#7
Future Save Icon
“Users need a way to save items to easily find them again and make a purchase decision.”
In the previous 28 days, 21,000 app users had used the save feature 363,000 times, indicating its value. However, to implement saving on site, further CMS development was needed. A save icon wasn't included in the MVP tile but I left space for it, knowing it would be part of a future iteration.
Potential save icon locations
*Note: Displaying average user ratings is vital for product tiles as well. However, Brad’s Deals lacked a user rating system, which is a desired feature but it wasn't included in this project's scope.
A more in-depth summary of the research can be viewed here: Competitive and Best Practice Research ↗
Securing Stakeholder Buy-In & Aligning Teams for a Seamless Launch
Gaining Approval Through Research-Driven Redesign
While presenting to stakeholders, I highlighted the shortcomings of the legacy product tile. The old tile was dominated by a large image covering 70% of its space, overshadowing product details. The headlines failed to highlight critical product features, making it hard for users to quickly locate important information like price. Excessive space was wasted on flags that rarely appeared and elements like the editor’s name and timestamp offered little value or context.
Legacy Tile
To address these issues, I presented the research findings and proposed a wireframe that strategically integrated the seven key elements. I secured buy-in by showing how the new tiles met industry standards and linked the design changes to business goals, such as better product visibility, improved trust, and higher engagement.
Proposed tile wireframe
Orchestrating Cross-Team Collaboration
After getting approval from stakeholders, I collaborated with product, development, and editorial teams to define their roles in the implementation process, ensuring a smooth transition to the new tiles. To support the proposed UI, the platform team needed to change and add fields in the CMS and the editorial team needed training on how to implement the seven recommended elements. By proactively aligning cross-functional teams, I ensured that the redesigned tiles were not only visually improved but also feasible to implement.
Designing Flexible, Mobile-First Tiles from the Ground Up
Prioritizing Smaller Screens First: A Scalable Approach
Data showed that more than 80% of Brad’s Deals customers access the site from a mobile device. I explored both horizontal and vertical tile shapes and discussed with developers how these options would translate to larger screens. This prompted a broader conversation about implementing a grid system.
Horizontal tile option
Vertical tile option
Implementing a Flexible Grid For Consistency and Efficiency
Developers needed a visual framework to ensure components interact as intended, regardless of the device size. A flexible 12-column grid was added to provide a consistent user experience across platforms and simplify the development process. It was decided that the vertical tile shape worked best across screen sizes.
Example of universal tile shape within mobile and desktop grids
Designing from a Blank Slate
Without a design system in place, there were many small design details that hadn’t been thought through before such as:
What font sizes and styles should be used?
Should the tiles be outlined? Should there be drop shadows?
Should the price go above or below the headline?
What should the hover state look like?
Which corner of the image should the flag be located?
How do the tiles adjust if headlines are different line lengths?
These considerations can be explored in this deck:
View Tile and Deal Feed Deck ↗
After many mocks, discussions, iterations, and design reviews, this was the final tile design for MVP launch:
Designing for Every Scenario & Edge Case
There were more edge cases to consider than I had anticipated due to potential errors from editors manually inputting product details. Errors such as:
How does the tile render if an editor forgets to fill out optional information like MSRP?
How do we ensure consistent styling when employee error occurs?
Is there enough room if the price has 5 digits?
What if the MSRP is the same as the current sale price?
I collaborated with the back-end team to address potential errors and ensure the tile would still render as expected in all scenarios.
Example of an editor forgetting to include MSRP in the last tile
From Fragmented to Unified: Redesigning Deal Feeds to Expand Merchant Opportunities
Addressing Cross-Platform Inconsistency
The legacy tile containers, referred to as ‘deal feeds’, differed greatly across platforms. Desktop showed a 3-page carousel, mobile web featured a 4-page carousel, and native apps used horizontal scrolling. Heat map data indicated that users tended to click through all deals in a feed (12 was the maximum allowed).
The two primary objectives were to add more deals to the feeds and increase the number of feeds above the fold. Optimizing limited screen space to expose more deals boosts merchant opportunities and sales potential.
Legacy desktop deal feed
Legacy mobile deal feed
Legacy native apps deal feed
Boosting Deal Visibility for Mobile Users
On legacy mobile web, users could only view three deals at a time. They struggled to click the pagination arrows due to small touch targets. To improve usability, I explored horizontal and vertical scroll options. Since our app users were familiar with horizontal scrolling, we believed it would be well-received on mobile web.
Legacy version
Horizontal scroll option
Vertical scroll option
I presented these options to a small user group for feedback. They appreciated horizontal scrolling because it allowed them to view multiple categories at once and they liked vertical scrolling for its resemblance to social media. We chose to include both. Horizontal scrolling was implemented when there were multiple categories on a page. Vertical scrolling was implemented to view more deals in a category.
The new feed blocks show more than 2x the number of deals and categories above the fold compared to the legacy version. We also expanded the deal feeds on mobile to have 50 deals instead of 12. These changes replaced almost all manual tapping with scrolling, drastically reducing touch target issues.
Unifying the Tile Experience Across All Mobile Platforms
The new designs were implemented on both iOS and Android to ensure a consistent layout between mobile web and apps. This was the first time in Brad’s Deals history that mobile web and native apps shared the same component design.
Legacy iOS version
New iOS version
New Android version
Optimizing Desktop Deal Feeds to Showcase More Deals
By decreasing the feed block height, removing pagination dots and the CTA, and overlaying the carousel arrows, 2x the number of categories could be shown above the fold on desktop. We increased the number of deals per carousel page from 4 to 6 and doubled the number of deals in a feed from 12 to 24.
Legacy feed block
New feed block
Final Solution: A Modern Tile Experience
The final tile design included the seven key research elements. This was the first uniformed global component in the company’s history and marked the start of standardizing design elements for future iterations as we prepared for a complete site redesign.
By adding comprehensive product information to each tile, the redesign boosted purchase confidence while unlocking greater merchant opportunities. The new design delivers a consistent, polished look across desktop, mobile, and app platforms by organizing content into a structured, scalable framework. With a mobile-first approach, the tiles offer an intuitive browsing experience, setting a solid foundation for future enhancements and continued growth.
Unified Impact: Elevating User Confidence and Future Growth
Added Product Information Improved Purchase Confidence
The new tiles featured longer headlines that included 2-5 important product details, providing helpful information to guide purchasing decisions.
Including MSRP and savings percentages made users feel they were getting a good deal. Separating and enlarging the price made the tiles easier to scan.
Legacy Deal Tile:
New Deal Tile:
Optimized Deal Feeds Increase Merchant Opportunities
The new tile size allowed for more deals and categories above the fold on all device sizes. On desktop and mobile, there are 3x more deals and categories displayed before scrolling.
On desktop, the number of deals in a feed doubled from 12 to 24. On mobile, it increased from 12 to 50.
Exposing more deals increases opportunities for partner merchants to advertise.
Legacy Deal Feeds:
New Deal Feeds:
A Consistent Look Across Platforms
For the first time, the most important component had the same UI on desktop, mobile web, and apps. A consistent tile design boosted brand recognition and credibility across platforms.
Desktop:
Mobile Web:
App:
Organized Content Into a Structured Framework
The introduction of a flexible grid system ensured content is consistently aligned, making browsing and scanning intuitive and efficient.
The grid also streamlined the development process and will be implemented on every future page.
Laid the Foundation for Future Iterations
Users had not been able to sort by price when it was included in the headline. By adding new price fields to the CMS, users will be able to sort and filter by price, MSRP, and discount percentage.
Flexible solutions like this pave the way for ongoing improvements as the site evolves.
Legacy Price Treatment:
New Price Treatment:
Enhanced Mobile Experience
The design prioritized mobile-first design since over 80% of visitors access the site through mobile devices. Horizontal scrolling replaced pagination dots on category feeds to improve touch target accessibility. This new pattern allowed 3x the categories shown above the fold.
Legacy Category Feed:
New Category Feed:
Improved A/B Testing
Previously, variations in the UI made it challenging to isolate the impact of individual design changes.
Now, a consistent interface allowed us to confidently test a single variation, ensuring that any changes in performance are directly due to the design tweak. This simplified the testing process and provided more accurate results to guide future iterations.
Testing price above vs. below headline
Iterating Based on Post-Launch Insights
Streamlining Headlines for Maximum Impact
After the launch, we noticed that the terms “Sale” and “Clearance” were often repeated in a deal feed. Since those words were previously a part of headlines, we hadn’t been able to calculate their frequency. We had relied on editors’ claims that around 20% of our deals were sale or clearance events but it turned out to be a much higher percentage. This redundancy did not provide the expected value to the user.
To correct this, the platform team updated the CMS from a drop down menu to an open-text field. This allowed editors to include sale details in the open-text field and use the headline for additional product details.
Repeatitive “Sale” and “Clearance” language on each tile
Replacing “Sale” with the sale details
Removing Shipping Flags for a Cleaner Interface
The launched tile featured shipping information but after launch, data revealed that 86% of active deals offered free shipping. We suspected the shipping flag was not as valuable if it appeared on almost every tile. We ran an A/B test on showing versus hiding the flags. Conversion and engagement results were about the same. Our customer feedback group said they expected to see shipping information on product detail pages instead of on the tiles. We removed the shipping flags to simplify the UI.
Shipping flag placement upon launch
Shipping flags removed in favor of a cleaner UI
Praise for New Tiles That Truly Resonate with Users
“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 transparent with our consumers 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
Looking Ahead: Plans for Future Enhancements
Now that the tiles are updated, I’m eager to iterate further based on real user interactions. We are continuing to test variations of the tiles and add the following enhancements:
Multiple images
Ability to save
Timestamp showing when the deal was posted
Allowing the user to decide how many tiles to display on a page
Reflections and Lessons
Get Creative with Limited Resources
Since the existing tiles were nearly 20 years old, stakeholders saw the tile redesign as a long-overdue update rather than an opportunity for extensive user testing. Given how far behind we were from modern e-commerce standards, stakeholders were unwilling to invest in new research and instead expected design decisions to be based on existing industry insights and best practices. This meant I had to be strategic and lean heavily on established research to validate assumptions, support my design choices, and confidently advocate for those choices in stakeholder presentations.
This redesign was a critical first step in modernizing our e-commerce platform. With a scalable foundation in place, we can now gather real user insights, iterate with confidence, and continue evolving the product for an even better shopping experience. I look forward to connecting with users to further improve the tiles.
Design with Future Iterations in Mind
When I began this tile redesign, we didn’t have a design system in place, making this project a critical first step in standardizing components across platforms. I was intentional about every design choice to ensure flexibility for future updates and a more scalable website. Our old platform’s outdated and messy code had made changes difficult, and we wanted to avoid repeating that mistake.
One of the biggest challenges was balancing long-term vision with immediate needs. Everyone had their own ideas for future tile capabilities (saving, sharing, multiple images, etc.) but this MVP wasn’t about packing in every feature. Instead, I focused on creating a solid foundation that could evolve over time. By keeping the tiles simple and adaptable, we set ourselves up to continue iterating as more of the site transitions to the new tech stack and additional development resources become available.