Shirewoodware Website Revision

SUMMARY

I oversaw a team of UX and UI designers to redesign the Shirewoodware e-commerce experience. I worked with the business and the design team to conduct a competitive analysis as well as determine key pain points to decide which pages within the user flow would have the largest impact on the user's experience and conversion. Based on the assessment the decision was to refresh a majority of the pages within the core user flow. The redesign created an average increase in CTRs by between 27% and an overall increase in conversion by around 14%.

---

THE CHALLENGE

We were approached by Shirewoodware to optimize and refine various pain points within the existing e-commerce flow and to design a forward-thinking online shopping experience.

We conducted user research and did competitor analysis to better understand these problems.

WHAT WE LEARNED

1. A large percentage of dropoffs occurring on the home page was because no products were visible "above the fold".
2. Customers got confused/concerned during checkout as an image of the product they were trying to purchase was not visible.
3. Product naming conventions were cumbersome and confusing.

THE PROCESS

Once we’d established the key pain points, I performed a heuristic audit of the existing site to determine where improvements could be made. From there, I created wireframes while working closely with my team to determine new page layouts and the overall look and feel of the revisions.

THE SOLUTION & RESULTS

To determine the individual effectiveness of the revisions A/B testing was done to compare the performance of the changes on a per-page basis. The redesigned pages had individual increases in CTRs between 10%-40% and an overall increase in conversion by around 14%.

Home page

The top banner was reduced in size in alignment with the identified trends of competitors and of the broader trends of e-commerce sites in general.
The Whys
During testing, we noticed a reduction in the time till the first interaction with the page.

Search and results pages

 The headers were significantly reduced in size to allow for the products to be brought up higher into the user's vision and allow for more products to be visible on the initial page load.
The Whys
Reducing the white space, shortening the titles, and increasing the size of the "engageable items" (images, links) showed better engagement results during testing and also resolved a pain point for the business owner who wanted more prominent product imagery across the site.

Product pages

The product description was condensed to the right-hand side to allow for increased space for imagery.
The Whys
Although this change did not make a noticeable impact on performance the increased space for imagery was a key pain point for the owner. The revision also allowed for more cohesion with the larger imagery that was being used across the entire site.

Checkout

A "distraction-free" version of the checkout process was implemented.
The Whys
Based on research and competitor analysis, and then backed up by our own testing, this style of checkout had a higher conversion metric than a more traditional checkout layout. In addition, product images were added to the checkout process as this was a key pain point for consumers to help reduce the uncertainty of the items in their cart during the checkout process.