Webpage redesign

AquaQuote: E-Commerce Product Page Redesign

AquaQuote: E-Commerce Product Page Redesign
AquaQuote: E-Commerce Product Page Redesign
Before
AquaQuote: E-Commerce Product Page Redesign
AFTER
AquaQuote: E-Commerce Product Page Redesign
AquaQuote: E-Commerce Product Page Redesign
AquaQuote: E-Commerce Product Page Redesign

AquaQuote, Inc. is a supplier of water and wastewater treatment products, mostly catered to industrial customers. It came with the challenge of lacking a modern and visually engaging design, which was potentially a contributor to having a high bounce rate and low conversion rate.

The company aims to grow and reach new clients while making sure that their current customer base returns as well. As part of this move, they decided to look at the option to modernize their e-commerce site, starting with the redesign of the product detail pages.

Letting the page breathe

At first glance, the product page looks crowded, which is an understandable problem in the industrial sector due to the amount of information that needs to be conveyed to users. This can be solved by organizing the data and putting them under different sections that are clearly marked.

Law of proximity in UX Design - AquaQuote | Miscibility Design Solutions by Chardynne


When scrolling down, a long list of similar products is shown, which can be replaced by one row of more modern looking product cards with an "Add to cart" icon to encourage the user to place. This is made scrollable horizontally to show more products within a smaller space.

Webpage redesign and modernization of UI - AquaQuote | Miscibility Design Solutions by Chardynne

Building trust and authority

Trademark logos are retained within the page for credibility, but moved to the bottom to steer the users' attention towards the actionable item instead. To allow the users to focus on the CTA, which is to get a quote, the price, quantity field, and button are all placed within one section. Transactional logos are also added to build the customer's trust when placing a request for quote. To further communicate trust, customer reviews are also placed at the bottom of the page.

Demonstration of clear CTA in new UI - AquaQuote | Miscibility Design Solutions by Chardynne

Addressing accessibility issues

As an overall update, the color palette was slightly adjusted to adhere to accessibility compliances. This includes adjusting the color contrast and font sizes for better readability.

NOTE: Images and product screenshots on this website have been taken upon project handover. UI and UX discrepancies may currently be present due to changes made by the client after said handover.

Let’s talk about your design needs!

Not in STEM but need a quick website built? Let's talk anyway! Send me a message or check out some of my work outside of STEM:
View non-STEM projects
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.