e-Commerce Design for Repco

Nomat applied a human-centred design process to improve the eCommerce user experience for Repco. This end-to-end project combined research, design, prototyping and usability testing.

An image of the repco website on a mobile phone

e-Commerce Design for Repco

Nomat applied a human-centred design process to improve the eCommerce user experience for Repco. This end-to-end project combined research, design, prototyping and usability testing.

e-Commerce Design for Repco

Nomat applied a human-centred design process to improve the eCommerce user experience for Repco. This end-to-end project combined research, design, prototyping and usability testing.

An image of a vehicle in a field

Background

We partnered with GPC Asia Pacific, the largest automotive aftermarket parts supplier in Australia and New Zealand, to improve the ecommerce user experience.

The Repco project focused on redesigning the website and identifying opportunities to improve the customer experience to enhance the commercial value of the website. The goals were to increase conversion, sales online and supporting omni-channel shopping.

An image of a vehicle in a field

Background

We partnered with GPC Asia Pacific, the largest automotive aftermarket parts supplier in Australia and New Zealand, to improve the ecommerce user experience.

The Repco project focused on redesigning the website and identifying opportunities to improve the customer experience to enhance the commercial value of the website. The goals were to increase conversion, sales online and supporting omni-channel shopping.

An image of a vehicle in a field

Background

We partnered with GPC Asia Pacific, the largest automotive aftermarket parts supplier in Australia and New Zealand, to improve the ecommerce user experience.

The Repco project focused on redesigning the website and identifying opportunities to improve the customer experience to enhance the commercial value of the website. The goals were to increase conversion, sales online and supporting omni-channel shopping.

What we did

We collaborated with Repco and followed a human-centred design process that encompassed discovery research, iterative design and prototype validation to create an enhanced user experience.

What we did

We collaborated with Repco and followed a human-centred design process that encompassed discovery research, iterative design and prototype validation to create an enhanced user experience.

What we did

We collaborated with Repco and followed a human-centred design process that encompassed discovery research, iterative design and prototype validation to create an enhanced user experience.

An image of the Repco website homepage with a racing car featured on a track
An image of the Repco website homepage with a racing car featured on a track
An image of the Repco website homepage with a racing car featured on a track

Customer interviews and stakeholder workshops

We conducted in-depth one-on-one qualitative interviews to understand the needs, expectations and behaviours of Repco customers. After analysing and synthesising the findings, valuable customer insights were captured in two key artefacts. Customer archetypes were brought to life with personas which could be used to inform the next stages of the project. In addition, two customer journey maps were created. One reflected the current customer experience, with the other visualising the ideal future state. These identified opportunities for enhancing the online shopping experience as defined collaboratively with Repco.

Stakeholder workshops were also held to gain a thorough understanding of the business goals and priorities and uncover how the Repco website fit within the broader business strategy. Furthermore, these enabled us to understand the technology considerations for the site.

Customer interviews and stakeholder workshops

We conducted in-depth one-on-one qualitative interviews to understand the needs, expectations and behaviours of Repco customers. After analysing and synthesising the findings, valuable customer insights were captured in two key artefacts. Customer archetypes were brought to life with personas which could be used to inform the next stages of the project. In addition, two customer journey maps were created. One reflected the current customer experience, with the other visualising the ideal future state. These identified opportunities for enhancing the online shopping experience as defined collaboratively with Repco.

Stakeholder workshops were also held to gain a thorough understanding of the business goals and priorities and uncover how the Repco website fit within the broader business strategy. Furthermore, these enabled us to understand the technology considerations for the site.

Customer interviews and stakeholder workshops

We conducted in-depth one-on-one qualitative interviews to understand the needs, expectations and behaviours of Repco customers. After analysing and synthesising the findings, valuable customer insights were captured in two key artefacts. Customer archetypes were brought to life with personas which could be used to inform the next stages of the project. In addition, two customer journey maps were created. One reflected the current customer experience, with the other visualising the ideal future state. These identified opportunities for enhancing the online shopping experience as defined collaboratively with Repco.

Stakeholder workshops were also held to gain a thorough understanding of the business goals and priorities and uncover how the Repco website fit within the broader business strategy. Furthermore, these enabled us to understand the technology considerations for the site.

Design system and UI design

Nomat designers created a new design system in Figma comprising of reusable UI components. The components were designed with an understanding of the W3C WCAG accessibility standards.

Using the design system as a reference, the UI design for the enhanced website incorporated both user research insights alongside industry best practices. Leveraging the components from the new design system enabled an efficient iterative design process for finalising the enhanced UI. Collaborative ways of working including regular showcases with the Repco technology and project team to ensure that there was an effective feedback loop for incorporating changes.

The design system provided a critical tool for communication with the development team throughout the build.

Design system and UI design

Nomat designers created a new design system in Figma comprising of reusable UI components. The components were designed with an understanding of the W3C WCAG accessibility standards.

Using the design system as a reference, the UI design for the enhanced website incorporated both user research insights alongside industry best practices. Leveraging the components from the new design system enabled an efficient iterative design process for finalising the enhanced UI. Collaborative ways of working including regular showcases with the Repco technology and project team to ensure that there was an effective feedback loop for incorporating changes.

The design system provided a critical tool for communication with the development team throughout the build.

Design system and UI design

Nomat designers created a new design system in Figma comprising of reusable UI components. The components were designed with an understanding of the W3C WCAG accessibility standards.

Using the design system as a reference, the UI design for the enhanced website incorporated both user research insights alongside industry best practices. Leveraging the components from the new design system enabled an efficient iterative design process for finalising the enhanced UI. Collaborative ways of working including regular showcases with the Repco technology and project team to ensure that there was an effective feedback loop for incorporating changes.

The design system provided a critical tool for communication with the development team throughout the build.

Prototype and usability testing

A Figma mobile prototype was created and used to test proposed solutions with participants who were current Repco customers. We facilitated usability testing which was used to validate the effectiveness of the designs for key ecommerce user flows including adding items to cart and checkout. Overall the designs tested well, with opportunities identified to refine the experience and further enhance some of the ‘rough edges’.

Support for the build

Nomat supported the development of the enhanced user experience through collaboration and an effective design system. We worked closely with Repco to understand the technical and business considerations for implementing the desired experience. We then ensured that, where appropriate, we provided clear documentation of how the design interaction should function. We also mapped out the different variations of each component to illustrate when and why a particular variation should be used. This gave the Repco development team a clear understanding of how the system should react in a wide range of contexts and conditions. Additionally, we accommodated for any existing and new technical limitations to ensure that the final design was feasible.

Prototype and usability testing

A Figma mobile prototype was created and used to test proposed solutions with participants who were current Repco customers. We facilitated usability testing which was used to validate the effectiveness of the designs for key ecommerce user flows including adding items to cart and checkout. Overall the designs tested well, with opportunities identified to refine the experience and further enhance some of the ‘rough edges’.

Support for the build

Nomat supported the development of the enhanced user experience through collaboration and an effective design system. We worked closely with Repco to understand the technical and business considerations for implementing the desired experience. We then ensured that, where appropriate, we provided clear documentation of how the design interaction should function. We also mapped out the different variations of each component to illustrate when and why a particular variation should be used. This gave the Repco development team a clear understanding of how the system should react in a wide range of contexts and conditions. Additionally, we accommodated for any existing and new technical limitations to ensure that the final design was feasible.

Prototype and usability testing

A Figma mobile prototype was created and used to test proposed solutions with participants who were current Repco customers. We facilitated usability testing which was used to validate the effectiveness of the designs for key ecommerce user flows including adding items to cart and checkout. Overall the designs tested well, with opportunities identified to refine the experience and further enhance some of the ‘rough edges’.

Support for the build

Nomat supported the development of the enhanced user experience through collaboration and an effective design system. We worked closely with Repco to understand the technical and business considerations for implementing the desired experience. We then ensured that, where appropriate, we provided clear documentation of how the design interaction should function. We also mapped out the different variations of each component to illustrate when and why a particular variation should be used. This gave the Repco development team a clear understanding of how the system should react in a wide range of contexts and conditions. Additionally, we accommodated for any existing and new technical limitations to ensure that the final design was feasible.

Outcome

The project is a work in progress with the team currently working through the final implementation and updates to the site. The impact of the design changes will be explored as the new designs are launched and the data becomes available. The human-centred design process with Repco yielded valuable customer insights that led to design enhancements to the user interface of the website. The findings from usability testing combined with the design system and refreshed UI design also resulted in improvements to the user experience.

“For the last 18 months, our collaboration with Nomat has focused on enhancing the user experience across our eCommerce platforms. A central aspect of this effort involved crafting a unified design system for our various brands. As a result, we now have a robust design system that not only supports our development team but also enhances the overall user experience for our customers. Nomat has worked seamlessly across our brands in a flexible and collaborative manner.”

Jason Potts – GM Digital Technology GPC Asia Pacific

Outcome

The project is a work in progress with the team currently working through the final implementation and updates to the site. The impact of the design changes will be explored as the new designs are launched and the data becomes available. The human-centred design process with Repco yielded valuable customer insights that led to design enhancements to the user interface of the website. The findings from usability testing combined with the design system and refreshed UI design also resulted in improvements to the user experience.

“For the last 18 months, our collaboration with Nomat has focused on enhancing the user experience across our eCommerce platforms. A central aspect of this effort involved crafting a unified design system for our various brands. As a result, we now have a robust design system that not only supports our development team but also enhances the overall user experience for our customers. Nomat has worked seamlessly across our brands in a flexible and collaborative manner.”

Jason Potts – GM Digital Technology GPC Asia Pacific

Outcome

The project is a work in progress with the team currently working through the final implementation and updates to the site. The impact of the design changes will be explored as the new designs are launched and the data becomes available. The human-centred design process with Repco yielded valuable customer insights that led to design enhancements to the user interface of the website. The findings from usability testing combined with the design system and refreshed UI design also resulted in improvements to the user experience.

“For the last 18 months, our collaboration with Nomat has focused on enhancing the user experience across our eCommerce platforms. A central aspect of this effort involved crafting a unified design system for our various brands. As a result, we now have a robust design system that not only supports our development team but also enhances the overall user experience for our customers. Nomat has worked seamlessly across our brands in a flexible and collaborative manner.”

Jason Potts – GM Digital Technology GPC Asia Pacific

Interested to know more? Let’s Talk.

Interested to know more? Let’s Talk.

Interested to know more?
Let’s Talk.