Overview
Situation:
Northshore is an eCommerce-only Incontinence and Adult Diaper supply website. As a leader in the marketplace, they needed a website that increased their payment options and would scale to meet their business needs. I was brought in to lead the website digital discovery, strategy, and project setup. The system included a powerful auto-ship subscription service with the ability to accelerate, pause, or reschedule a recurring order. The UX included many account creation and login usability improvements to assist senior users.
Technologies: Episerver ECP, Bootstrap 3, Aria, Various payment systems
Sites Deployed: Q4 2019
Tools: Axure, Photoshop, Zeplin, The solution strategy, UX and information architecture documents were managed in Confluence (this facilitated an efficient approval process between three parties involved in the development).
Personal Involvement: On this project I led discovery and UX/IA strategy development efforts as well as directed a team consisting of a UX designer, Visual Designer, BA, and Ecom lead.
Overview
Many of the pages for this website were standard eCommerce pages with some interesting features as outlined below.
Segmented Search
The UX for the Site Search Engine Results Page (SERP) segmented the products from the extensive content that the site had to offer due to their extensive content marketing program. When a User initiated a search from a product page, the SERP displayed a products list (see below). When searching from a content page, the SERP would display content results. Note the comparison function below as well.
Search Engine Results Page (SERP) with support for Products and Content
Comparison Capability
The comparison capability is very important for this eCommerce website. A good amount of time was spent on the comparison features (icons and helpers) to assist the user in the selection of the best product for their needs. These features were implemented as Axure prototypes to make sure the operation was usable on both desktop and mobile devices.
Comparison Feature in Axure
Comparison Feature on website
Personalized Recommendation system using Machine Learning
Sophisticated Recommendation Systems
An important project goal was to support various forms of product recommendation features and place them strategically on the product list, product detail, shopping cart, and other pages in the website. Episerver enabled us to implement recommendation areas based on contextual machine learning, such as “others-also-bought”, Previously-viewed, Previously-purchased, and more.
Auto-Ship
Auto-ship was an important feature on this website as users were buying more expensive items via subscription. They needed ways to “throttle” their orders based on their usage variation including the ability to modify their Auto-Ship account via the management panel shown below.
Autoship with support for subscription schedule editing features
Using this panel, they could move up their next shipment date if their supply was running low or delay a shipment if they had excess supply. This interface was prototyped in Axure to make sure all use-cases were covered and that the user interface elements were easy and intuitive to use.
Product Detail Page
The UX for the product detail page was carefully designed to make sure the most pertinent information was above the fold.
Wireframe
Actual Site
