Work     UI/UX     Visual     Archive     About






Spring 2022
8 weeks


Nike, Your Personal Trainer is an intelligent assistant for at-home workout


Nike Training Club is an app that provides workout programs that are intentional and flexible for at-home workouts. Our project integrates data-driven conversation, in the form of a CUI, to guide users at all stages of fitness expertise to reshape what it means to exercise at home.

I was responsible for designing UI/UX prototypes, CUI visuals, and conducting research.

Team
Sammie Kim
Francis Park
Elysha Tsai


Skills
UI/UX
Motion Design
UX Research


Tools
Figma
After Effects







Concept

How might we elevate the at-home workout experience?


Nike, your personal trainer, offers guidance according to an athletes individual training needs. With the CUI, Focus on Form TODAY by following professional trainer-led videos; Own your Workout TOMORROW by customizing personalized sessions. Nike allows athletes to build confidence, self-efficacy, and personal growth through in depth at-home workout curation.



Concept Video 










Key Feature 01

Customization based on User Preference


Interacting with the CUI allows users to customize their workout routines by saving specific exercises from videos and making changes to workouts on the spot.


   



Key Feature 02

Guidance from Professional Trainers


While exercising, users can receive answers and demonstrations, from real trainers, to questions on form and benefits of specific exercises.


    



Key Feature 03

Recommendation based on User Goals


Smart recommendations on workouts and alternatives are generated based on the user’s exercise history and goals


    



CUI Visuals

6 Different States


The 6 different states of the CUI visualizes its communication with the user through motion. The design is inspired by the Nike swoosh, which transforms into different dynamic shapes that encourage movement and excitement from the user.











Background Research

The Context and Challenge


Since the pandemic began, there has been a rise in demand for fitness streaming. This is a leading cause of the desperate need for more flexible workout routines due to the limitation in public workout spaces. We identified Nike Training Club (NTC) as an existing platform that offers a broad spectrum of fitness options for at-home users; however, the remote modalities have brought a sense of impersonality to the workout experience.

Our challenge was to examine the interaction within the NTC mobile app and identify interventions that can address current pain points to elevate the at-home workout experience.



User Research

What does an athlete need?


To gather insights from app users, we carefully examined the reviews that illustrate the frustrations of the current experience. Many users seek more guidance in workouts due to the lack of explanations in trainer-led videos. Other users hope for personalization that helps curate unique experiences based on their fitness needs.

We identified the opportunity to utilize artificial intelligence in the form of a CUI to offer more personal guidance and facilitate conversations that help users grow emotionally and physically.



Platform Research

The Current NTC App


Our team studied the NTC app by illustrating the current user flow from the onboarding to the post-workout experience. By using the app ourselves, we were abel to map out UI painpoints and CUI opportunities. We identified two main types of exercising methods, trainer-led classes and whiteboard workouts. Each method targeting a different type of user, we decided to focus on the CUI’s intervention in both processes.






Platform Research

Journey Mapping


To visualize the user’s emotions, needs, and interactions with NTC, our team created a journey map highlighting the differences between guided video and customizable playlist formats.





Research Findings

Pain Points + Opportunities


We synthesized our research findings into three pain points that can be addressed with CUI opportunities, which guided our design process.



1. Imbalanced proportion of flexibility and guidance in existing workout formats

Customization of workout formats based on user preference and physical condition


2. Lack of feedback and guidance while working out

Integration of real time feedback drawn from professional trainer database


3. Lack of personalization in workout selection


Curated recommendations based on workout history and user goals, generated by long-term relationship with CUI







Concept Development

Personas


To design for a range of experience levels, we identified personas of the Beginner Athlete and the Experienced Athlete to demonstrate the different interactions with the CUI. 



Concept Development

Conversation Flows


Based on the personas and opportunities with an CUI intervention, we brainstormed conversational flows that follow scenarios covering onboarding, scheduling, working out, and post-workout. Eventually, we surmised six final CUI states: default, greeting, listening, talking, processing, and confirming.


      









Visual Identity

Designing the CUI


When exploring the visual representation of the CUI, our team focused on Nike’s characters of bold, energetic, and flexible by distorting shapes, creating contrast in sizes, and using vibrant colors.




We observed the greatest potential within stroke and line focused visuals, as they felt most dynamic and adaptable when transforming into various states. The energy embedded within the lines also resembled body movement, athletic gestures, and even shoe laces. We eventually generated a unique, abstracted swoosh logo composed of lines that would flexibly loop and intermingle when switching states. 









Interface Design

Mobile User Flow


Based on the narrative illustrating the CUI’s purpose, we developed a user flow for the mobile interface following the user’s journey from Today to Tomorrow. We carefully studied the flow of the NTC app and integrated the functions of the CUI into screen designs.




Interface Design

Design System


When designing the interface, our team studied the design system of the NTC app, and adapted the styling into CUI screens. We created new UI elements like cards and buttons that further followed the established visual system of the app.




Interface Design

Key Design Decisions


Key design decisions were made based on the conversational needs for both guided videos and customizable workout playlists. For guided videos, we catered the CUI chat feature to fit within a landscape view that is most natural to users who are watching and following the video.




Key Interaction 01

Save Specific Exercise


Activate CUI to save a specific exercise from a trainer-led video. The exercise can be accessed when creating customizable workout sessions in the future.










Key Interaction 02

Receive Immediate Feedback


Receive immediate feedback to any questions that arise during the trainer led videos. The input from CUI will be drawn from a database backed by real trainers from Nike.










Key Interaction 03

Provide Smart Recommendation


CUI provides a smart recommendation feature based on the user’s workout history and personal goals.










Key Interaction 04

Demonstrate Exercise Movements 


Users can modify the intensity of exercises by asking for an alternative. A short gif will be played to easily demonstrate the movements of the changed exercise.












Key Interaction 05

Customize Workouts on the Spot


Activating the CUI allows users to replace exercises based on physical condition and preference. The recommendation will be sourced from saved exercises from the user profiles.







Reflection


This project allowed me to integrate conversation design into a service intervention. It was a gratifying experience to think about ways that we could reform Nike’s platforms to renew their values in a completely new medium. Asking ourselves the questions about creating something that doesn’t exist in a way that would integrate naturally into a brand that is so established was an ambitious but necessary exercise in getting familiar with design as a package deal of visuals, strategy, and innovation. Having access to so many touch-points like motion, uiux/visual design, and even copywriting taught us the value in taking a holistic critical approach to evaluating the quality of communication at every stage of the process.



© CHARMAINE QIU 2024