Scroll to top
PWA
UX Research
User Research
User Journeys
Creative Workshops
Prototypes
2021
Topps Tiles wanted to improve the mobile experience of their trade customers. They wanted a Progressive Web App (PWA) that would work more like a native mobile app, with faster loading times, offline functionality, and access to device features such as camera and location. The challenge was to design and build a PWA that would meet these requirements, while also improving the overall user experience and increasing conversions.
I took a user-centered design approach that involved research, analysis, and collaboration with the client. I conducted competitor research and analytics to understand user behavior, preferences, and pain points. Based on this research and collaboration, I designed a PWA that was tailored to the needs of Topps Tiles trade customers, with intuitive navigation, personalized content, and helpful features such as offline order viewing and digital membership cards.
As part of the research phase for the project,comprehensive analytics and competitor research was conducted. This involved analyzing statistics from the existing trade website to identify how sessions, revenue, and conversion rates were split across devices, as well as identifying the most popular pages for mobile customers. Competitor research was also conducted, and elements were pulled from other websites and apps to create ideas for the Topps Tiles PWA. The research was presented to the client during the workshops, allowing for open discussions and honest feedback. This research was essential in identifying the needs and wants of the client and their customers and was critical in shaping the design direction of the project.
Designing for functionality was a key consideration in this project. As the PWA was designed to work like a native mobile app, it was essential to focus on key functionality such as navigation, search, notifications, and offline ordering. While the PWA was based on the trade site design, several features had to be adapted and added to make it work well as a PWA. For example, the offline order functionality was added to allow users to view and request invoices for purchases made in the physical store.
These considerations were essential in ensuring that the PWA provided a seamless user experience for trade customers.
Adhering to brand styling was a crucial element in this project as it ensured consistency across all designs and created a seamless user experience. The design followed the brand style guide that had already been established for the Topps Tiles trade website. This allowed us to incorporate familiar design elements that Topps Tiles customers were already accustomed to, making the PWA easy to navigate and use. Sticking to the brand guidelines also helped to maintain Topps Tiles' professional image, which was important given that the PWA was targeted at their trade customers.
To offer a more personalized experience for users, the homescreen design was altered to display different information depending on whether the user was logged in, a "Gold Trader" or had signed up for the "Rewards+" program. For example, for Gold Traders, the homescreen prominently displayed their Gold Trader benefits, while users signed up for Rewards+ were able to see their points and value. The homescreen also provided users with the option to reorder products they had previously purchased and displayed the location of their nearest store.
I also worked on other key pages such as the offline order page, navigation and search, app tutorial screens, notifications, and the functionality to scan a credit/debit card to add it as a payment method. These designs were also presented to the client and underwent several rounds of feedback before final approval. Each page was carefully designed to be user-friendly and intuitive, while also staying true to the Topps Tiles brand and incorporating essential functionality.
Providing users with access to essential account features and information. the design includes a dashboard overview, allowing customers to easily view and track their orders, as well as an address book and a list of favorited products. The design also incorporated a digital account card. The goal was to create a seamless experience for users, allowing them to access all their account information and preferences with ease.