Nike Experience Mini Program (NXP)
Product Design, Icon Design, Interaction Design
Nike needs to introduce a new platform for users to participate in online and offline community events. The Experience MP (NXP) is an app that allows users to register for Nike events seamlessly.
Role
I worked as a UI/UX Designer at Nike Digital Studio Greater China HQ supporting the UX Design & Product Lead in creating the Experience Mini Program (MP) from scratch for Nike users to sign up for Nike events in China’s major cities.
Team
Product Managers: Jan Wang, Jamie Chiu
UI/UX Designers: Carolyn Chen, Sum Shang
Duration:
March 2022 - July 2022
Background
Before, registration for Nike community events were through WeChat Official Account posts or through Nike App posts. There was never centralized location where users could keep track of the events they were participating in or see an active listing of all the current and upcoming events hosted by Nike. Nike needs to launch a booking program for their online and offline community events.
The Problem
Nike users need a centralized platform to be better informed and participate in Nike community events
How can we incorporate a diverse range of events to cater to everyone’s needs and preferences? (One off events, seasonal events, recurring events, 1 o 1 service, etc).
How can we reach more users and incorporate a social feature into this community app?
The Challenge
The NXP includes 3 types of events: Nike 365 Session, Nike By You Session, and 1 on 1 Expert Session. Each of these events has a different time frame, duration, and requirements. Design an experience that encompasses events with these different variables establishing solid logic between choice selection and time display.
Goal
The new MP should align with Nike’s App UI and build on the existing Nike Training Lab MP UI. Users should be able to book, modify booking, QR check in, subscribe to notifications, and navigate the app seamlessly to register for Nike events.
The NXP includes 3 types of events: Nike 365 Session, Nike By You Session, and 1 on 1 Expert Session. Each of these events (categorized by the Business & Product department), has a different time frame, duration, and requirements.
Nike 365 Session is characterized as a single session event with a set time frame. Users can register and waitlist if full.
Nike By You Session is characterized by multiple sessions events offering different dates and time frames.
1 on 1 Expert Session is characterized by multiple sessions offering a variety of instructors, different dates, and time frames
Nike 365 - Single Session
365 Session consists of activities that are offered within a fixed time. Spots are on a first come first serve basis. However, it will display total availability as well as spots left.
Availability Rule: Only show spots left when there are fewer than 10 spots
Waitlist Rule: Currently no limit on the waitlist (this will change as users increase)
UX Flow:
User arrives the NXP Homepage -> Event Detail (365 Session) -> Phone Number Authorization -> Join Form -> Join Form Filled -> Confirmation Slide-Up -> Joined Modal -> WeChat Authorization -> Event Notification Subscribe -> Joined Successfully -> QR Code Event Pass
Nike NBY - Multiple Session
NBY Session consists of activities that are offered on multiple days and at different times. There is no waitlist offered spots are on a first come first serve basis.
Nike Expert - Multiple Session
Expert Session consists of activities that are offered by a selection of different instructors on multiple days and different times. There is no waitlist offered spots are on a first come first serve basis.
Research & Exploration
I researched and analyzed how other events, fitness, and booking apps are designed, from previewing an event to viewing, sharing, booking, canceling, rescheduling, etc. We specifically were looking for examples of multiple sessions and instructors as well as the waitlisting, spots left, rescheduling, and time conflict cases. Most of our competitors are specialized in one kind of event such as online workouts, classes, concerts, talks, etc.
Previous Booking Experience
Users would have to click on individual articles with no way of keeping track of all their subscribed events. In order to subscribe they would be redirected to the Nike App. It was also easy for event posts to get lost in all of Nike’s other updates. If there was issues they would have to copy the URL into the safari browser. There is also a limit on how many articles Official Accounts could post not all of Nike’s news could be published in a timely manner. This process was disorganized, unclear and a lot of effort on the user’s end to complete the task
My Icon Designs for NXP
I drew new icons for categories that would be additions to Nike’s Greater China Icon Library. I collected reference photos, poses, and existing icons, and brainstormed different keywords to portray the main idea of each category. After testing them out on the mobile screen, we selected the most successful ones with clear messages and spacing. Through exploration, iteration, and research, I finalized the new icons above aligning with the existing style of Nike’s Icon Library.
Challenges
The Joined Event page UI, Design System, Time Selection Logic, and Waitlist Logic were the backbone of this booking experience. I started out with a multi-step process exploring different UI styles, testing UX flows, and conversing back and forth with the Business, Product, and the Engineer team. After building out the initial wireframes and getting feedback from our Design Director, the UI still felt in-cohesive, distracting, and needed to be streamlined. There are still multiple CTAs competing for attention and a lack of hierarchy. Prioritizing the most important information and decreasing the importance of other buttons resulted in a more compact and efficient design that would reduce the user drop rate throughout the flow. Through testing all the edge cases and flushing out all the possible flows for time and waitlist I was able to successfully establish the booking mechanism.
Establishing Design System
After exploring different card styles (as well as free-floating) to display events we arrived at this design. It successfully displays the all-important event information in a succinct manner, works well as a list display, offers space for event images, and translates well across all the key pages. Establishing this card style sets the building block for the rest of the MP’s UI.
Time Display Logic
Mainly applies to below pages, other edge cases follows the same rule
Fixed Time Display Logic
365 Session Event Card Rules:
The date is listed by Month, Day, Day of week, and Time with leading zeros. If time goes into the following year, the Year first before is shown before Month, Day, Day of Week.
Using Nike schema today or tomorrow determines the date. Today, Tomorrow refers to the present day and the day after.
24-Hour Time System. 00:00 for change to the next day
Time Range Display
NBY session & 1:1 Expert Session Event Card Rules:
The date is listed by Month, Day, or Day of week with leading zeros. Only the time range is shown. Same-year events will not show the year of the beginning date. If time goes into the following year, only an end date range year is shown.
In line with the Nike schema, 'Today' refers to the current day, while 'Tomorrow' refers to the following day.
Selector Time Display
Rule:
Selector only shows Month and Day followed by Day of Week
Using Nike schema today or tomorrow determines date. Today, Tomorrow refers to present day and the day after
Phase II: Sharing &
User Generated Content
Encouraging UGC through sharing:
With the NXP, Nike events have higher visibility and engagement. We create better customer engagement, allowing more users nationwide to be up-to-date and participate in Nike’s events, building as a community.
After each event, there is also a photo gallery with professional images of members participating in Nike’s activities. Users can share or keep the photo as a souvenir. The NXP gallery allows users to share event posters on their WeChat Moments or other social media platforms. By having users post their images online they are able to promote Nike’s events and attract more potential users thus driving up traffic, and bringing more people to join the Nike family.
The Solution
Efficient Booking Flow
Designed a speedy booking experience with easy registration, convenient editing, and waitlisting options that appeal to both straight-up users who know exactly what they’re looking for and want to get in and out fast and users who are interested in exploring activity categories.
Variety of Selection
With the NXP’s event listing logic, Nike is able to list one-time events, long-period events, and multiple selection events to offer more variety to the user. This caters to users who want group participation or 1:1 experience and allows them more flexibility to around their schedule.
Social Feature
Following each event, users can keep their images as a memento, share their experience with their friends, or visit the gallery to have a full recap of their involvement in Nike’s community activity.