goodr – scalable ux solutions and testing for ecommerce

Live site hosted at >>> www.goodr.com

When I first arrived at goodr I found a site in desperate need of UX optimization, a site with a meandering user experience which lacked solid direction and clarity. Many of the modules were sprawling and outdated and navigation was a chore (something validated through user surveys and user journey maps).

A prime example of the work I do at goodr surrounds the PDPs – a critical node in the customer journey. As an example of my work for goodr I will walk through the modules on the PDP which I optimized. Afterwards There will be an honorable mention of a project which improved accessibility and demonstrates an understanding of design theory.

fig 1. PDP as it was when I first arrived at goodr

If goodr is good at one thing it’s content. We produce images in house via our production team but the images were often being skipped over and fought with one another for attention as users refused to scroll down below the fold. This data came from heatmaps powered by hotjar.

fig 2. Revamped PDP with variants and preview capabilities. (click to expand)

To solve this I implemented a new image module which supplied users with satisfying feedback as they browsed images and brought content and the point of focus back up above the fold. Another change I identified and executed was the addition of variants to the PDPs. As I said, we had identified a pain point for our users – the navigation experience. We had many varieties of SKUs for the same model of glasses but to view them all was an arduous process of navigating back and forward between collection pages and PDPs.

I brought this experience under one roof housing navigation for a single model all in one place. I also adjusted page headers to communicate the idea of the SKUs belonging to a single collection. The theory was that by adding variants the users would have an easier time locating products of interest and cart totals would increase as a byproduct of the easier navigation. A/B testing via Nosto is currently underway to validate this hypothesis.

In a tracking overlay the users would see the names of the sunnies they were previewing pop up under their mouse. Our copy team is hard at work coming up with ridiculous titles for the sunnies – something our company is very proud of. I took action to highlight these names to drum up interest in the product and highlight our irreverent and fun naming scheme, something integral to our brand. Part of UX work is the consideration of brand accessibility. User Experiences can educate and ingratiate users to brands through fun or charming interactions.

fig 3. the review module when I first arrived at goodr

goodr has an amazing wealth of reviews – a data set I identified as being underutilized. As it stood when I first arrived the user would see a preview of three reviews with no further filtering and little context. The user could then scroll three reviews at a time through the entire body of reviews available to users, an action which was highly impractical.

fig 4. Prototype of the new review module made in Figma

I reforged the reviews to be navigable and informative. Modules which previously did not expand where given light-boxes and expansion functionalities. Media which would get lost under piles of 5 word reviews was made accessible through media filter options and a media view module which would allow users to view customer images. These changes were planned for after I drew up a user journey map which identified pain points and opportunities for the module. These changes were reflected on mobile as the design requirements for all of my ecommerce work has to be dynamic and responsive.

The experience was given new life – users could now see the reviews and content they needed to see to boost their confidence in the brand.

fig 5. A subtle shift from border-less to bordered product cards

When I arrived at goodr I was overwhelmed with the collection screens. Visual clutter was leading to a high cognitive load which was turning users away, causing drop out. I instituted new product cards to create clear groupings and disambiguate content on screen. Though shown here only on mobile, this change was applied to desktop as well.

As an accessibility minded UX designer I find it critical to stick to guidelines set out by institutions like WebAIM. It is critical that the web be accessible to all. As dependence on websites increases throughout culture it is the duty of UX designers to ensure experiences are not denied any party on account of physical or mental differences. In light of this I try to design with no fonts under 14pt and check contrast for new modules whenever new color combos are introduced. Accessibility extends beyond the obvious however, and I believe clear groupings and low cognitive loads provide accessibility to many neurodivergent groups.