Turning Constraints into Strengths

Role
UX StrategyBrand DesignUX ResearchUX DesignUI Design
Duration
2 months
A club-branded MyShop landing page

Project Overview

A large entertainment and hospitality services company hired Credera to design and develop a multi-tenant headless e-commerce solution for public and private clubs (golf, tennis, maritime). The platform would allow clubs to operate their own online store and offer club-branded apparel and accessories that can be sent directly to club members and customers.

The MyShop e-commerce platform allows clubs to introduce exclusive access to new apparel and accessories to their members directly on their website. Club partners can select from high-end boutique lines to more well-known value brands, catering to a variety of budgets.

The Challenge

The MyShop platform was designed to seamlessly integrate into any club's website, allowing members and customers to simply click on a designated tab on the club's homepage and be taken to a shopping experience that feels like a natural extension of the club's site.

Each club possesses distinct branding elements, including logos, color schemes, and overall design aesthetics. Our challenge was to design an e-commerce experience that was easy to set up and easily customized to allow clubs to preserve their unique brand identity without designing every section of the site from scratch like a typical website builder.

We did not want the MyShop platform to be another generic and impersonal online store. Additionally, we made a conscious effort to minimize the onboarding experience for club managers so that the onboarding experience would not deter prospective clubs from joining the platform.

The Solution

We created a comprehensive design guideline specifically for club managers during the onboarding process. The primary objective of this brand guideline was to simplify the implementation of their unique brand identity while setting up their store.

To streamline the process, club managers were presented with three key decisions.

Decision 1

Pick a primary color

Based on this value, we were able to generate secondary and tertiary colors using an algorithm. This automated process also allowed us to ensure colors generated would pass WCAG 2.1 accessibility guidelines.

Decision 2

Pick a font style

Serif vs. Sans serif with varying degrees of weight. Eventually, we expanded the font options offered but the initial customization options was enough to feel on par with 95% of text styles the clubs used.

Decision 3

Upload the Club Crest

This was the final step in stamping a club's brand identity throughout the experience starting with the navigation and the footer and eventually the checkout and support related experiences.

Using this information, we had everything we needed to fill the gaps and create a seamless transition from the club's website to the online store experience.

The Results

8

Vendors Supported at Launch

18

Vendors Supported 6 Months After Launch

23

Clubs Enrolled at Launch

100+

Clubs Enrolled 6 Months After Launch

Post-Mortem

MyShops was my first experience designing a major white label eCommerce experience. At first, I was a bit overwhelmed by the task of designing a customizable interface that could feel like a "natural extension" of such a wide range of uniquely styled clubs.

Once we started writing the rules and creating constraints for the MyShops experience, the vision became more clear. The best part was, minimizing the range of styling as part of the white label experience was embraced by users and stakeholders. The ease of onboarding became our leading selling point when pitching the product to clubs.

More from this Project

Club branding applied across the storefront
Serif and sans-serif type hierarchies a club can choose between
A product detail page in a club-branded store
A club store landing page with apparel collections
The storefront themed for Aronimink Golf Club
The base storefront template before a club applies its brand
Secondary and tertiary colours generated from each primary colour
The storefront themed for Fields Ranch