Setting up and confirming
Arrived and unlocking doors

Scanning vehicle to varify
Confirming destination and leaving ride

Outcome 

Enhanced tutor’s login navigation and aligned UI with updated visual system for web and mobile views

Concept - A Digital Board Game 

How might we educate designers about their place in the current industry?

As designers, we go on unique journeys to grow and discover ourselves. Our board game visualizes realities of the design industry by curating personalized game play based on the user’s background in design.

User Flow

Interacting with Data

The user navigates through 25 blocks of the board by interacting with cards that appear on each block. By inputing their answers on the cards, the user gather stickers as a reward. As the final takeaway, the user would receive a personalized sticker collection to learn more about the statistics related to themselves, to and share with other people.

Card Type 01

About Me Card

Invites user to input answers based on personal experience and background.

Card Type 02

Reward Card

Presents user with a reward scenario, in which they will learn facts about the industry and earn a happy face sticker.

 

Card Type 03

Obstacle Card

Presents user with an obstacle scenario, in which they will learn facts about the industry and have a happy face sticker taken away.

Card Type 04

Quote Card

   Introduces a quote by real designers that has a personal voice about the design industry.

Card Type 05

Risk Card

Presents user with a situation with different outcomes based on their choice. The backside of card will display corresponding data of the outcome.

Ending the Journey with Purpose

After navigating though all of the blocks, the final screen shows all the stickers that the user has collected along the way. When hovering over the sticker, users would be reminded of the statistics related to their choices throughout the journey.

Visual System

Creating a Playful Identity of the Board Game 

The combination of a game-like typeface and vibrant colors helped form a lighthearted mood of playing a board game. The supporting stickers and cards are designed in a simple yet quirky approach to provide an additional personality to the brand.  Finally, we used different methods of data visualization to show variety in the different types of cards.

Initial Research

Working with the AIGA Dataset

Before designing, our team studied the dataset by finding correlations between the different categories. We were especially curious about a designer’s satisfaction with their work, and we compared the satisfaction levels with categories like job title, salary, years of experience, and gender.






The Concept

The Board Game Narrative

Our team decided on creating a digital board game as it illustrates a metaphor of an unpredictable yet charming journey with challenges and surprises. We saw the opportunity of integrating different interactions that leads to unique outcomes of the journey.



When designing the layout of the board, we focused on finding a desirable proportion of the board, cards, and collected stickers. We settled on a layout with the overview of the board for users to keep track of the journey while focusing on the interactions with the cards.

Reflection

This project allowed me to explore data visualization with a highly visual approach by creating a digital game. It was interesting to explore integrating the customization aspect of the game into learning opportunities. After establishing the visual system and flow of the board, I learned to shift into an asset-based workflow, in which the assets will be delivered to the developer.

If more time is allowed, I would explore more micro interactions such as sticker animations and moving hints that would  keep the experience engaging throughout the journey.

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.

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.

Problem Space

How might we design a mission control system that efficiently manages autonomous trucks?

The trucking industry serves a major role in our everyday lives as it provides transportation for countless essential goods. Within the industry, it is evident that there needs to be new technology not only to continue innovation, but also to fix issues related to driver shortages and communication.

Our project addresses problems in the current trucking industry we discovered through research. Our team envisioned an innovative mission control system for managing autonomous trucks and creating seamless connections between the management level of Daimler and the stakeholders attatched to the daily interactions.

Left Screen

Main Dashboard

Center Screen

Comprehensive Monitor

Right Screen

Individual Monitor