Nike AR Basketball Game - Tmall
ProductDesign, 3D Modeling, Animation, Graphic Design, Illustration
Nike needs to launch an in-app AR game for Nike members to play. This experience aims to increase member engagement and give users a chance to win discounts, prizes, and more.
Role
I worked as a UI/UX Designer at Nike Digital Studio Greater China HQ supporting the UI Lead & UX Lead in creating a AR Basketball game for Taobao Tmall. I worked on both the UX/UI as well as 3D modeling all the assets and illustrating campaign graphics.
Team
Product Designers: Carolyn Chen
Duration
February 2022 - March 2022
Background
6/18 is an eCommerce holiday in China. Nike needs to launch a new mini-game to engage users. It should be a straightforward simple game that easily rewards the user and promotes Nike’s brand image. It will be one of the mini-games Nike offers on Taobao to improve member engagement and give users a chance to win discounts, prizes, and more.
How to Play
Onboarding Flow
Game Play
Claim Prize
The Challenge
Taobao in-app widgets have limitations on what can be developed. Highly complex games with lots of 3D graphics would exceed limitations causing problems during gameplay. We wanted to elevate the game experience by having high quality graphics to visually engage the user thus increasing customer satisfaction and user retention. During production, we also had to go back and forth with outsourced designers and in-house developers to figure out what format to best support these 3D objects given Tmall’s limitations.
Nike Basketball Court Physical Environment
AR UI
Basketball Digital Environment
UI + Graphic Design + 3D Modeling
This project required me design strong visuals and graphics. I animated the prototypes for counting down, basketball shooting, points scoring, and the prize win real. I 3D modeled all the objects required for this project and illustrated the box, court, and established key visuals to align with this campaign style. I experimented with many iterations for backboard designs, background styles, basketballs, and basketball stands to mix and match for the game.
Prize Box Design
Backboard Design
Basketball Court Modeling
Basketball Modeling
Key Visuals
The Solution
High Quality Motion Graphics
During the design process, I gathered a lot of reference images of basketball court environments, ball shooting Games, AR specific UI. The Swoosh to start hand sign was integrated to promote brand awareness as well. I wanted to be creative with the visuals while still having them align with Nike. For hoop shooting games, I looked for games with clear instructions, a points system, strong visual animation effects, and swipe-to-throw techniques.
High Reward System
Nike members who play get a chance to win Nike accessories, clothing, vouchers, discounts, and shoe lottery tickets. This attracts new users as well as existing members to try their luck at the game.
Easily Accessible
A circle-touch target envelopes the basketball hoop. If a user throws the ball anywhere inside the circle the ball will go in. I implemented an indication flow to assist the user in aiming to score. The line appears grey when the user first presses down on the ball and when the user aims correctly it turns orange guaranteeing the ball will get in the net almost 100 percent of the time.
