From Clicks to Customers: How Human-Centred Design Turned Priceline's Website into an Award Winning Experience
From Clicks to Customers: How Human-Centred Design Turned Priceline's Website into an Award Winning Experience
From Clicks to Customers: How Human-Centred Design Turned Priceline's Website into an Award Winning Experience
Background
Nomat was approached by Priceline to help align their digital experience with their customer needs, with a view to uplift their existing website.
Background
Nomat was approached by Priceline to help align their digital experience with their customer needs, with a view to uplift their existing website.
Background
Nomat was approached by Priceline to help align their digital experience with their customer needs, with a view to uplift their existing website.
What we did
The project was conducted following a human-centred design process. This involved collaboratively engaging with internal stakeholders, developers and digital marketing teams to explore business needs and end goals.
What we did
The project was conducted following a human-centred design process. This involved collaboratively engaging with internal stakeholders, developers and digital marketing teams to explore business needs and end goals.
What we did
The project was conducted following a human-centred design process. This involved collaboratively engaging with internal stakeholders, developers and digital marketing teams to explore business needs and end goals.
1. User research and a new IA
In-store and online interviews conducted with customers yielded insights that helped the project team understand and map out customers' shopping missions across medical, health and beauty categories. Through the lens of different personas, we were able to explore the digital and physical experiences. The journey map was triangulated with additional information, including customer data and marketing personas.
To support the creation of an intuitive navigation and to help customers locate products easily, we undertook an online card sort and two rounds of tree testing. Card sorting helped inform a user-centred information architecture which ultimately enhanced the findability and discoverability of website content. It helped us understand how customers grouped and labelled different content on the website. The proposed sitemap was tested with the target audience via two rounds of online tree testing, with iterations to the sitemap completed between rounds.
1. User research and a new IA
In-store and online interviews conducted with customers yielded insights that helped the project team understand and map out customers' shopping missions across medical, health and beauty categories. Through the lens of different personas, we were able to explore the digital and physical experiences. The journey map was triangulated with additional information, including customer data and marketing personas.
To support the creation of an intuitive navigation and to help customers locate products easily, we undertook an online card sort and two rounds of tree testing. Card sorting helped inform a user-centred information architecture which ultimately enhanced the findability and discoverability of website content. It helped us understand how customers grouped and labelled different content on the website. The proposed sitemap was tested with the target audience via two rounds of online tree testing, with iterations to the sitemap completed between rounds.
1. User research and a new IA
In-store and online interviews conducted with customers yielded insights that helped the project team understand and map out customers' shopping missions across medical, health and beauty categories. Through the lens of different personas, we were able to explore the digital and physical experiences. The journey map was triangulated with additional information, including customer data and marketing personas.
To support the creation of an intuitive navigation and to help customers locate products easily, we undertook an online card sort and two rounds of tree testing. Card sorting helped inform a user-centred information architecture which ultimately enhanced the findability and discoverability of website content. It helped us understand how customers grouped and labelled different content on the website. The proposed sitemap was tested with the target audience via two rounds of online tree testing, with iterations to the sitemap completed between rounds.
2. A new accessible design system
Before delving into the UI design, the team worked on creating a comprehensive and structured collection of design principles, guidelines, components and patterns. This was the start of a new design system that would create efficiencies and scalability for future designs. It also provided a guide for internal stakeholders on creating clear, concise and user-focused content using the right tone of voice.
We also included guidelines to ensure that the design system is inclusive and accessible to users with disabilities, adhering to web content accessibility standards (W3C WCAG). This included minimum contrast levels for colours used for text to ensure readability, as well as implementing an understanding of screen readers to ensure the sequence and hierarchy of information was coherent for all users. This ensured that accessibility was considered early in the design process to avoid rework.
2. A new accessible design system
Before delving into the UI design, the team worked on creating a comprehensive and structured collection of design principles, guidelines, components and patterns. This was the start of a new design system that would create efficiencies and scalability for future designs. It also provided a guide for internal stakeholders on creating clear, concise and user-focused content using the right tone of voice.
We also included guidelines to ensure that the design system is inclusive and accessible to users with disabilities, adhering to web content accessibility standards (W3C WCAG). This included minimum contrast levels for colours used for text to ensure readability, as well as implementing an understanding of screen readers to ensure the sequence and hierarchy of information was coherent for all users. This ensured that accessibility was considered early in the design process to avoid rework.
2. A new accessible design system
Before delving into the UI design, the team worked on creating a comprehensive and structured collection of design principles, guidelines, components and patterns. This was the start of a new design system that would create efficiencies and scalability for future designs. It also provided a guide for internal stakeholders on creating clear, concise and user-focused content using the right tone of voice.
We also included guidelines to ensure that the design system is inclusive and accessible to users with disabilities, adhering to web content accessibility standards (W3C WCAG). This included minimum contrast levels for colours used for text to ensure readability, as well as implementing an understanding of screen readers to ensure the sequence and hierarchy of information was coherent for all users. This ensured that accessibility was considered early in the design process to avoid rework.
3. UI design: a mobile-first approach
Next came the UI design for the website, starting with mobile. These were created initially as low-fidelity wireframes, which formed the foundational structure for the design. Extensive collaboration with internal stakeholders and developers helped refine the wireframes to ensure they aligned with user needs, business requirements and technical feasibility.
Working alongside Priceline's internal marketing team, we applied visual design elements to bring the wireframes to life. Striking a careful balance between preserving the organisational identity and ensuring accessibility, we merged aesthetics with functionality to create a mid-fidelity design that supported users' shopping journeys while embracing inclusivity. Finally, the experience was illustrated using an interactive prototype.
3. UI design: a mobile-first approach
Next came the UI design for the website, starting with mobile. These were created initially as low-fidelity wireframes, which formed the foundational structure for the design. Extensive collaboration with internal stakeholders and developers helped refine the wireframes to ensure they aligned with user needs, business requirements and technical feasibility.
Working alongside Priceline's internal marketing team, we applied visual design elements to bring the wireframes to life. Striking a careful balance between preserving the organisational identity and ensuring accessibility, we merged aesthetics with functionality to create a mid-fidelity design that supported users' shopping journeys while embracing inclusivity. Finally, the experience was illustrated using an interactive prototype.
3. UI design: a mobile-first approach
Next came the UI design for the website, starting with mobile. These were created initially as low-fidelity wireframes, which formed the foundational structure for the design. Extensive collaboration with internal stakeholders and developers helped refine the wireframes to ensure they aligned with user needs, business requirements and technical feasibility.
Working alongside Priceline's internal marketing team, we applied visual design elements to bring the wireframes to life. Striking a careful balance between preserving the organisational identity and ensuring accessibility, we merged aesthetics with functionality to create a mid-fidelity design that supported users' shopping journeys while embracing inclusivity. Finally, the experience was illustrated using an interactive prototype.
4. Validating the website designs
To measure the effectiveness of the proposed site navigation structures, content and interactive elements, Nomat used the interactive prototype to test the experience.
Overall, the website experience proved effective. Participants were able to successfully complete core tasks such as purchasing an item, finding a store and locating content. Participants were also observed navigating the prototype using the menu, scrolling the homepage and interacting with links to locate information. Iterations to the prototype were made between the two rounds of testing.
4. Validating the website designs
To measure the effectiveness of the proposed site navigation structures, content and interactive elements, Nomat used the interactive prototype to test the experience.
Overall, the website experience proved effective. Participants were able to successfully complete core tasks such as purchasing an item, finding a store and locating content. Participants were also observed navigating the prototype using the menu, scrolling the homepage and interacting with links to locate information. Iterations to the prototype were made between the two rounds of testing.
4. Validating the website designs
To measure the effectiveness of the proposed site navigation structures, content and interactive elements, Nomat used the interactive prototype to test the experience.
Overall, the website experience proved effective. Participants were able to successfully complete core tasks such as purchasing an item, finding a store and locating content. Participants were also observed navigating the prototype using the menu, scrolling the homepage and interacting with links to locate information. Iterations to the prototype were made between the two rounds of testing.
Initial exploration of the Priceline website
Finalised live designs for the Priceline website
Services provided by Nomat:
Services provided by Nomat:
Services provided by Nomat:
Outcome
Nomat delivered the research findings, customer journey maps and validated designs to support Priceline's website redesign. The collaborative, human-centred design process achieved the objectives of the project, providing customers with a website that delivers a seamless shopping experience in-store and online.
This work contributed to broader industry recognition for Priceline, which was named a finalist across three categories at the Inside Retail Retailer Awards 2024, including Loyalty Program or Campaign of the Year, Instore Customer Service Initiative of the Year, and Customer Experience of the Year. Priceline's digital excellence was further acknowledged when it was awarded the Top Beauty Retailer at the 2024 Power Retail All Star Bash, an award dedicated to a retailer specialising in cosmetics products that has excelled in Australia's Top 100 online retailer rankings.
Outcome
Nomat delivered the research findings, customer journey maps and validated designs to support Priceline's website redesign. The collaborative, human-centred design process achieved the objectives of the project, providing customers with a website that delivers a seamless shopping experience in-store and online.
This work contributed to broader industry recognition for Priceline, which was named a finalist across three categories at the Inside Retail Retailer Awards 2024, including Loyalty Program or Campaign of the Year, Instore Customer Service Initiative of the Year, and Customer Experience of the Year. Priceline's digital excellence was further acknowledged when it was awarded the Top Beauty Retailer at the 2024 Power Retail All Star Bash, an award dedicated to a retailer specialising in cosmetics products that has excelled in Australia's Top 100 online retailer rankings.
Outcome
Nomat delivered the research findings, customer journey maps and validated designs to support Priceline's website redesign. The collaborative, human-centred design process achieved the objectives of the project, providing customers with a website that delivers a seamless shopping experience in-store and online.
This work contributed to broader industry recognition for Priceline, which was named a finalist across three categories at the Inside Retail Retailer Awards 2024, including Loyalty Program or Campaign of the Year, Instore Customer Service Initiative of the Year, and Customer Experience of the Year. Priceline's digital excellence was further acknowledged when it was awarded the Top Beauty Retailer at the 2024 Power Retail All Star Bash, an award dedicated to a retailer specialising in cosmetics products that has excelled in Australia's Top 100 online retailer rankings.
Interested to know more? Let’s Talk.
Interested to know more?
Let’s Talk.
Interested to know more? Let’s Talk.