goodr – scalable ux solutions & testing for e-commerce

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.

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.

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 conversion would increase as a byproduct of easing the product discovery process. A/B testing via Omniconvert validated this hypothesis as true, with a 2% increase in conversion after implementation likely due to an easier product discovery process. I led, monitored, and implemented this project from Design to A/B test with support from our in-house Developer.

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.

My work extends beyond PDPs and covers the entirety of goodr.com. As the sole UX/UI Designer at goodr I lead projects and identify possible CRO bottlenecks via research. One of the spots needing improvement was an underutilized search functionality. Through research we identified that users who use search are much more likely to follow through and convert. I redesigned the search functionality to be more user friendly and provide recommendations for searches as the user types. This reduced friction and led to a more pleasant experience overall. The introduction of product recs via search was also added to desktop.

The original design (not shown here) was a basic search bar which did nothing for users besides let them shoot in the dark. Product discovery is a struggle at goodr as our offerings are vast, and by optimizing the search functionality we were able to reduce friction and create a stickier, more engaging, product discovery process.

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.

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 also reflected on mobile (not shown here) as the design requirements for all of my e-commerce 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.

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 accessible fonts and font sizes, and I make sure to check contrast 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.