Ryan Bilello
Creative Director & UX
work_thumb_LI-NING TYPE ALT 1.jpg

Shop.Li-Ning.com

Art Direction, Branding, Design System, E-Commerce, Marketing Campaign, UI, UX

Introducing the Li-Ning brand to a North American market. The Li-Ning athlete uses the unique combination of mind, body and Chinese Wisdom. The sum of characteristics, were inspiration for a totally unique shopping experience. With only an online store, the user interface and shopping logic demanded efficiency with respect to navigation, user reviews, product selection, fit guides, search options, product features, shopping cart ease of use and product filtering options. The website experience was designed and delivered in just over one month to a North American audience.

Creative responds to precise strategic objectives
A clean user interface, star athlete photography brought excitement and legitimacy to the brand, the authentic story telling approach with depth of the brand, learning about key product differentiators, customer helpful information with reviews/ratings and a smart shopping cart experience would ultimately be our competitive advantage. Having researched the most customer centric UX/shopping sites to craft our own experience to be as easy as possible for the customer.

The visual design approach was modern, clean with impactful product images. Subtle micro-interactions were also carefully crafted and considered making an interface approachable and minimizing any confusion. Including bringing to life product filtering animations, 360° rollovers with products, file cabinet style content drop downs for product differentiators, keeping context.

Introducing the Li-Ning brand to a North American market

The situation

The Li-Ning athlete uses the unique combination of mind, body and Chinese Wisdom. These characteristics were the inspiration for a differentiated shopping experience. With only an online store, the user interface and shopping experience demanded efficiency. Each element and interaction within the interface would be designed with these tenets, including: navigation, customer reviews, product selection, fit guides, search capabilities, product features, shopping cart ease of use and product filtering options.

The solution

Created a design system from the ground up, one customers can get informed of all the context needed to make a purchase. Every pixel, module, component and interaction fights to get on the page. Eliciting an authentic shopping experience like none other.

 
Primary flagship pages

Primary flagship pages

We learned it was best to build the site with common components and flagship templates. This also allowed us to work faster as a team, gave us a common language, minimizing one off designs that could disjoint a user flow’s path. It would also allow for flexibility supporting additional online or offline content.

Search Results

Search Results

Facets add context, further filtering for products you are searching for. The North American audience would be fairly new to these products, the search functionality would be a key interaction within the experience.

faceted classification

faceted classification

Filtering options within the left rail organizes products systematically, to find what you need faster and more accurately.

Fit Guide

Fit Guide

Things fit differently on everyone, provide detailed information to lower the customers difficulty in making a purchase.

email sign up

email sign up

We make it easy to contact us, get killer deals and insider information. Visible in the footer of each page.

Shopping Cart

Shopping Cart

Smooth, simple and secure purchase process. Registration isn’t mandatory, flow is linear and we also included a cross selling opportunity.

Customer Reviews

Customer Reviews

Product reviews, ratings and comments helps reduce the cognitive effort within the shopping experience.

up