Scroll to top
Product Page
UX Research
User Journeys
Content Maps
Wireframes
Prototypes
2021
The new PDP needed to accommodate a wide range of products, from simple options to entire product ranges, while maintaining a clean and organized layout with a strong hierarchy.
I designed a modular layout with flexible elements that could be easily adapted to different product types. I also utilized a vertical layout with clearly defined sections and implemented a sticky product information panel to provide a strong hierarchy and make the page easy to scan.
Collaboration with Topps Tiles was key to arriving at a design that met their specific needs and requirements. By maintaining a close dialogue with the client and incorporating their feedback throughout the design process, I was able to create a PDP that accommodated a wide range of products while still maintaining a clean and organized layout. This iterative process allowed for a deeper understanding of the client's business needs and resulted in a design that exceeded their expectations.
Content maps helped to ensure that all necessary information was accounted for and provided a clear structure for the page. Wireframes allowed for a rapid iteration of different design options and provided a framework for discussing the design with the client.
Designing a PDP that could accommodate a wide range of different products was a significant challenge in this project. Each product type had unique features and requirements that needed to be accounted for in the design, while still maintaining a consistent look and feel across the page. I designed a modular layout with flexible elements that could be easily adapted to different product types. By creating a set of reusable modules, I was able to maintain a consistent design while still providing flexibility for different product types.
To keep the PDP clean and organized, trays were utilized to hide product descriptions and other information that could potentially clutter the page. They were also used to display critical selection options such as material, finish, size, and shape options. By keeping this information hidden until needed, the design remained focused, easy navigation, and provided a clear hierarchy of information that enabled customers to easily find the information they needed.
To ensure consistency across both the retail and trade sites, the designs for the retail site were reskinned and adapted to work for the trade site. This included adding specific elements and features, such as bulk buy and express checkout, that catered to the trade site's specific requirements. By implementing these features and elements, the design provided a seamless and consistent user experience for customers across both sites. This allowed Topps Tiles to better serve their diverse customer base.