Path-To-Purchase Audit And Redesign
In early 2016, Gerber requested Subtext to provide a comprehensive audit of their US ecommerce website to address key performance issues from a previous agency redesign, most notably a dropping conversion rate.
As a result of this audit, key pages on the path-to-purchase were determined to have roadblocks that needed further refinement. Subtext provided updated responsive web design layouts for the product detail page, the shopping cart, and checkout pages for desktop and mobile.
Project at a glance
- 01.Provided a comprehensive website UX Audit to prioritize areas of focus
- 02.Redesigned product detail page with a focus on usability and brand experience
- 03.Redesigned shopping cart and checkout pages that followed industry best practices
- 04.Collaborated with Gerber development team for final implementation
- Responsive design layouts for better usability on both desktop and mobile
- Streamlined checkout pages
- Relocated CTAs on product detail page to increase click-through
Performing a Website UX Audit to determine key friction points
After the 2015 relaunch of Gerbergear.com with a former agency, Gerber’s marketing team began to notice key performance issues with the website. The website was receiving negative feedback from customers and experiencing a decline in conversion rate. Gerber felt it was necessary to get outside expertise help uncover the areas of friction that were causing the most issues.
Subtext was brought in to perform a full website UX Audit, including a review of the home, category, product detail, shopping cart and checkout pages. The UX Audit gave Gerber a prioritized list of initiatives to remove roadblocks to purchase and provide for a stronger brand and customer experience. Gerber began improving their website’s UX experience by redesigning the product detail page, shopping cart and checkout pages.
Redesigning the core pages causing friction
To start the redesign process, Subtext created different concepts based on the agency’s IP, best practices and competitive analysis. These concepts were reviewed with Gerber and the final selections were developed into full design comps for the product detail page and each step of the shopping cart and checkout process.
Subtext also provided layouts for both desktop and mobile to ensure the designs properly translated for mobile-device users.
As part of this process, we used a tool called Invision that allowed us to present comps in a click-through prototype. This helped the client think through the flow of these pages while providing feedback and found it extremely helpful.
The client gave Subtext full creative control and deferred to the agency’s expertise in updating these critical webpages. Subtext also partnered with Gerber’s Creative Director to create and set web guidelines for the company as part of this effort.
Product detail page customer experience enhancements
Improving the customer experience of the product detail pages was critical to increasing conversion. Subtext redesigned the product detail page to put the right content in the right place where customers would easily find information to make a purchase decision. One of the key pieces of content Subtext introduced was illustrative graphics to highlight key features, industry press, and instagram photos from other customers.
Improved checkout process
The shopping cart checkout pages is the most critical area of an ecommerce store, and a poorly designed experience can lead to huge abandon rates and lack of trust with the customer.
Gerber’s checkout page concerns started on the actual product detail page. The existing version of the page did not provide clear indication that a product had been added to the cart.Subtext addressed this with the addition of an overlay near the checkout basket in the navigation to indicate the number of items currently in the customer’s cart.
Adding clear indications of items in the cart was an easy win, but the checkout pages themselves posed the majority of issues. The existing checkout process was a single page checkout that did not clearly show progress through checkout. Additionally, shipping options did not load automatically, there were usability issues with font colors and sizes, and the checkout forms often suffered validation errors. Each one of these alone are conversion killers, this website had three. To remedy these conversion roadblocks, Subtext implemented a simple, multi-step checkout process, complemented by a progress bar across the top of the screen to provide customers a clear view of where they were in the checkout process.
Collaborating with a separate development team
While Subtext has full-service development expertise in-house, the agency sometimes is required to work with an external development team and are very comfortable doing so. As part of this project, Subtext provided both annotated design comps with notes for functional specifications, as well as HTML/CSS as a final deliverable for their development team to implement within their ecommerce management system. We also operated as a technical liaison, as needed, to ensure the right solutions were implemented. As a final completion point, we provided QA support before the launch of the new pages.