NIKE, YOUR PERSONAL TRAINER





Level up personal fitness with Nike AI.


We improved Nike Training Club to empower beginner and experienced users to achieve their fitness goals at home. Our concept video speaks to athletes of all skill levels with an emphasis on personalization.

Although this project was a collaborative effort, I had the most ownership over the messaging and script.







Role
Skills
Team
Duration

UX Writer
Visual Designer
Conversation Design
Campaign Strategy
UI Design
Motion Graphics

Sammie Kim
Francis Park
Charmaine Qiu
(for Nike Training Club)
7 weeks


DESIGN OVERVEW

Focus on form today...


Nike Training Club has an abundant collection of workout videos with guidance from professional trainers. We identified that this is a helpful feature for beginners focusing on performing workouts accurately.

With Nike CUI, users can get personalized tips on improving workout form and save specific workouts within a playlist into their favorites.






...and tomorrow will be even better.


Nike Training Club also offers a customizable “whiteboard workout” format that allows users to better manage the pace of their workout. We elevated these features to grant athletes maximum control over their workout session. 










PROBLEM + RESEARCH

Personal fitness post-COVID invites higher expectations.


Despite exercise being a highly personal physical endeavor, current at-home fitness resources reflect a sense of impersonality. Even the hottest fitness app on the app store, Nike Fitness Club leave users craving for more. 



Key Insight:
Although most users enjoyed the quality and range of resources offered in the app, they found it hard to select and adjust resources to match their needs, goals, and lifestyle.








INSIGHT + POSITIONING

Fitness resources are not one-size-fits-all.


We thus defined two core audiences: beginner athlete and the experienced athlete. Designing for broader skill-level accessibility was not only a user-centered design decision, but part of a higher-level strategy to further Nike’s mission to “bring inspiration and innovation to every athlete in the world.”



MESSAGING

Nike tells a great story. 


Inspired by Nike’s evocative storytelling campaigns, we modeled the campaign structure on a human story. Instead of a standard demo video of product features, the video acts as a campaign for better athleticism in and of itself.
Our video follows Kate, a young woman interested in improving her athleticism from the comfort of her home. As she continues to work out, Kate grows from a beginner athlete following trainer-led video workouts to an experienced athlete that can customize workouts on the fly. It is only with Nike’s intelligent assistant and the curated recommendations, guidance, and flexibility that Kate is able to advance from focusing on form today to owning her workout tomorrow.Full script here︎︎︎





CUI DESIGN

Nike moves with you.


Nike AI’s look reflects an exciting breadth of motion states that is familiar to fitness. Nike AI fits seamlessly in the NTC design system, whether it is activated during workout videos or on app interfaces.








VISUAL DESIGN

Finishing with Nike flair. 







Mobile UI Focus
Features Navigation

Film roll effects
Edgy type movement






Team Nike ✔︎



Thanks for reading!














Hi, I’m Elysha—#9AC322 and #PearFamily. Hue are you?


Ever curious about how your values inform your work? #HUEAREYOU is a personality test and conversation starter, generating a unique hex code and matching every creative to a family with common ethos in the profession.

Although this project was a team effort, I specifically contributed to the concept’s logical implementation, novel user flow, and visual cohesion.

Scroll down to see a design breakdown.
Generate your custom color profile here.





Role
Skills
Team
Tools
Duration

Overall site UX
Explore + About page UI
Visual Designer

UI/UX Design
Data Visualization
Visual Design
HTML/CSS

Jenny Liu
Chris Han
Gary Tang

Figma
Tableau
HTML/CSS/JS
PHP
7 weeks




DESIGN BREAKDOWN

The creative industry, colorized


Powered by the AIGA Census and localized community data, #HUEAREYOU visualizes the broad spectrum of priorities, skillsets, and personal values of over 9000 creatives. We invite all creatives to envision themselves as part of the community with the universal language of color.




1. Enter the Experience


An interactive visualization previews the diverse dataset, debuting the recurring square motif. Some informational context and mouse-responsive interaction guides users to take the quiz.






2. Take the Quiz


Before exploring the AIGA Census in full, get introspective with 6 multiple-choice questions about the design industry and your design ethos.

P.S. — We made this process fun by adding card-flipping and easter egg interactions to tease fun facts from the census!







3. Reveal your Personal Result


#HUEAREYOU generates a customized color profile based on your quiz responses. Scroll to reveal a quote from a famous designer, your unique hex code, color family (people who share your top value), and more.

P.S. — Click on the swatchbook to see a breakdown of your color result based on hue, saturation, and luminance.







4. Explore the Community


How common is your hex code? I shipped the Explore page design, a playground that displays every color as a square swatch. Their sizes represent how common their hex code is in the grander community.

Scroll, click to reveal demographic details, and use the interactive toolbar to fine-tune your exploration of 9,304 data points, 400 possible hex codes, and 16 hue families.







The toolbar is equal parts informative and functional, helping users narrow their exploration of the census while uncovering how their color result came to be. The goal is to inspire users to learn while playing.


Take the quiz for yourself here.
Full process documentation is outlined here.









This past year I’ve had the privilege of working with the DesignLab at NASA Jet Propulsion Laboratory, an in-house design agency supporting NASA science and engineering in communicating the value, results, and wonder of space exploration.   

Flyby a few project highlights below. ✨️ 





First HD Video in Deep Space

🚀️ Launched Oct 2023 •  🌎 Reached Earth Dec 2023  ︎ Motion Graphics  ︎ Public Media Strategy  

NASA’s Deep Space Optical Communications experiment used lasers to beam this ultra-high definition streaming video from a record-setting 19 million miles away. I had ownership of this video’s concept, graphics, and motion design. Read more︎︎︎



The mission reached 451 million people and 2.57 million impressions within 4 days on JPL socials thanks to Taters the cat. It also generated viral news stories from CNN, the New York Times, NPR, Washington Post, AFP, ABC,
NBC News, BBC, USA Today, and more.


Behind the scenes of the video reaching Earth!



More than a public sensation, this video intends to educate the masses about NASA’s tech demonstrations, which are critical to continuing NASA’s long history as a technological leader (more on demos here). In addition to workshopping the graphics on this video with the mission’s lead project technologist, I created a cheat sheet to explain the video’s strategic design. 




Software Symposium


🚀️ Launched Feb 2024  ︎ Branding  ︎ UX Research
The first Software Symposium promises a new era of software competency at JPL. I interviewed 15+ software engineers and designers at JPL and distilled the unique essence of software for space exploration into this conference identity.








Earth System Science Methodology


🚀️ Published Dec 2023  ︎ Information Design
Science goals are only achieved with cross-industry buy-in. I helped Earth system science engineers debut a new methodology at the biggest Earth science conference, American Geophysical Union (AGU). This framework breaks down the complexity of identifying impactful science topics for societal benefit.



Process sketches





Cleanroom Instructor Tooling


🚀️ Implemented Jan 2024  ︎ UX Design  ︎ Visual Design

I worked closely with instructors to redesign course templates and instructor resources for quality, consistent, and trusted technical training for all NASA personnel. Beyond setting new visual standards, the implemented designs are revision-conscious and compatible across course offerings and instructing styles.




Lead instructor testimonial — “What sets Elysha apart is her exceptional ability to transform high-level, abstract concepts into tangible, user-friendly designs.”





More projects launching soon!













Activating Martian software on Earth


PIXLISE is a science analysis tool used by NASA scientists to identify potential signs of life on Mars. Partnering with science and product teams, I designed PIXLISE’s public debut. I generated all technical content and crafted the product’s initial deployment and messaging strategy for launch. 🚀

Design fully implemented in Spring 2023.






Role

Design Lead
Skills

UX/UI Design
Info Architecture
Content Strategy
UX Research
Copywriting
Visual Design
Design Systems
Client

NASA Jet Propulsion Laboratory
(PIXL Science Team)
Duration

10 weeks



SOLUTION OVERVIEW

Enabling Earth labs to make groundbreaking discoveries with PIXLISE

 
Previously limited to a small science team at NASA, PIXLISE is now accessible to all geoscientists. Quickly survey complex features and potential use cases, understand PIXLISE’s value to your lab, and take steps to deploy powerful software the very same day.





1. Grasp complex features in seconds


PIXLISE’s flexibility supports several subtypes of science users, and every scientist’s workflow is different. The new site highlights PIXLISE’s ability to handle it all by breaking down all product functions into the following:

Workflow: how users cross-reference and collaborate
Quantification: how users validate data
Investigation: how users explore and analyze




2. Reimagine science collaboration


Scientific inquiry is incredibly interconnected, but existing software don’t enable collaborative workflows.

In addition to highlighting novel collaboration features, PIXLISE community forums, developer guides are just a click away.





3. Evaluate for fit and adopt


Replacing 1:1 product demos with a layered adoption flow enables potential users to try features autonomously. This cut onboarding from weeks to minutes, allowing the product team to focus on shipping awesome features.





Explore the final prototype here.








Peek into the process:



OPPORTUNITY

Mars science tools are useful for Earth scientists too


PIXLISE helps scientists analyze XRF spectroscopy data from the Mars rover’s PIXL instrument, enabling NASA scientists to piece together the geologic history of Mars and identify potential signs of life. Despite this specific use case, PIXLISE’s functions are applicable (and potentially revolutionary) to all XRF geoscience workflows.

The PIXLISE product team at NASA JPL approached me to distill its capabilities into a compelling story to engage a new world of users.




PROBLEM

PIXLISE doesn’t know what makes PIXLISE beautiful


Previously, PIXLISE’s front page contained only the most basic information about the tool. The team lacked perspective to communicate product value to external users. Without intentional restructuring, the tool would never grow beyond its initial user base.






Challenge








RESEARCH OVERVIEW

Crash course in the product, existing users, business, and competition


I had no prior experience working in the technical subject area of planetary geoscience. With research I hoped to understand why PIXLISE works so well for Mars.







Custom Notion setup to stay organized!





TAXONOMY

User workflows reveal what makes PIXLISE special


After some trial and error, we discovered that it was most helpful to guide scientists to talk through their workflow. It was my job to weed through the complexity and specificity of each use case, not theirs.

I devised an expert-reviewed organization of product feature information with six levels of information granularity. At the highest level, PIXLISE is characterized by flexibility (in workflow), speed (in quantification), and innovation (in investigation features).






It translated gracefully into my first iteration of wireframes for the Landing and Product pages, and is a huge improvement to the 4 cards on the site previously.






SYNTHESIS

Limitations in Earth science workflows illuminate call to action for PIXLISE


One of the biggest challenges in this process was only having access to 1 target user for research (thank you, UWO Lab!). Despite our limited access, speaking to a real lab helped us understand the technical constraints that would increase friction between PIXLISE and a new user. 


Personas




Getting specific about personas and journeys helped determine the call to action (CTA) of the site: direct users to explore PIXLISE’s features in the trial version.

The call to action is now at the bottom of every page and the main navigation.
The deployment plan also translated into the content above-the-fold of the Resources page.







INFORMATION ARCHITECTURE

Lead with values and pain points, let use cases follow


The variety of science users we gathered research from helped me devise a strategic flow: leading with 3 digestible product values, highlighting workflow user pain points, and using imagery to articulate use cases in presenting a solution to these challenges.


Final Site Map



UX Synthesis Process — Site Map






IDENTITY


Refreshed design system reflects new product values


In the process of interacting with so many stakeholders, I formulated and executed an updated mission statement for PIXLISE and 4 core pillars to support it.

The visual design reflects the sophistication and quality of the revolutionary tool, while maintaining a tone of warmth through its tight-knit community values.






Working with the product team, we were able to refine this identity into a design system that is accessible, inclusive, and implemented at scale:







The final visual system retains the dark look of the UI. We highlight with the same PIXLISE yellow spot color, but now with an additional poppy vermillion, inspired by PIXLISE’s Red Planet muse. The energetic type duo ties it all together: the geometric yet approachable sans serif Faktum and the clean monospace variation of GT America.





COMMUNICATION DESIGN

Combining type, imagery, and interaction for the final UI


The extensive content hierarchy work established the fundamental structure for the UI, but a lot of design tweaks brought wireframes to fidelity.

At this point, I started considering layout and imagery in the communication of information.





At first, I relied solely on product screenshots to supplement the copywriting. In later iterations, I incorporated simple illustrations to communicate abstract ideas and hi-res geography photos to bring context and atmosphere to the experience.





Screen Iterations per Page


Sketching helped me workshop a difficult illustration (communicating real-time collaboration).








LANDING PAGE COPY:

Refresh the landing page to better understand what PIXLISE stands for.




PRODUCT FEATURES CARDS:

Survey product features quickly by clicking on the informational cards.





PRODUCT FUNCTIONS :

Easily navigate between the three core product functions: Workflow, Quantification, and Investigation.





TOOL-INTERFACE TOGGLE:

Immediately grasp tool functionality by switching between an isolated panel view and an in-context workspace view.



Interact with the final prototype here.







REFLECTION

Learnings and next steps


The ambiguity of our target user and the high level of content complexity made this project super challenging. However, the hardest lesson I learned was to push through moments of uncertainty and get comfortable defining the UX process as I go. My greatest breakthrough was learning to be wrong, so we can get it right.

More learnings:

Writing is design. Balancing precision, concision, and accuracy with something more “punchy” and “marketable” was hard and required its own iterative process.

Don’t be afraid of ugly. Sometimes the scrappiest and ugliest tables/artifacts I made, prototyped quickly in-meeting or after a sudden revelation were the most effective in making progress. The goal is to move the needle forward.

Accessibility is so important. Working with non-designers helped me contextualize the importance of design in a non-creative setting. I saw the impact I could make in 10 weeks, and that alone made the challenges in communication worthwhile.


Visiting the lab for the final week and my final presentation!


If given more time and money, I’d:

Access more Earth Labs. It was challenging extrapolating findings with limited access to our target user. In an ideal world, I would interview more earth scientists to validate site success.

Build out Guides. Due to the complexity of PIXLISE’s interface, user support is necessary to troubleshoot and adapt to software changes. I’d love to continue working with developers to build user-friendly guides for increased autonomy and reducing the core team’s workload.

Assist Deployment Success. I got to help workshop preliminary strategies to deploy PIXLISE at scale. It would be super cool to continue doing this to bridge UX and software capabilities!

Presenting this project to the Mars 2020 PIXL science team was the most gratifying moment of my career to date. I got to see scientists react to my process and get a glimpse of the positive impact design can have on scientific inquiry. This project reinforced my belief in the importance of user-centered design.

The website is not finished. I look forward to continue systemizing design components to optimize implementation for the developer team. I’m also applying my knowledge from this summer to design the PIXLISE trial experience!

Stay tuned 🚀~







BIOSPHERE RECORDS




Your music activity deserves to be remembered.


Using data from your daily streaming activity, this novel vinyl experience plays a rewind tune to the beat of your music ecosystem.








Role (Personal Project)
Skills
Tools
Timeline

Research
Design
Production
Data Visualization
Graphic Design
Adobe Illustrator
Adobe Photoshop
Adobe InDesign
Figma
8 weeks




DESIGN OVERVIEW

The vinyl of the present, modeled after the weather.

Is your music sunny or stormy? Previously app-bound, your music data takes on a physical presence in the form of an annual report: complete with detailed schematics, insights, visualizations, all made for you.









Front and back
12-song tracklist and listening activity summary




Inside
12-inch semi-transparent vinyl record




Behind the vinyl
A rich breakdown of your music ecosytem’s weather






Music ephemera
Additional contents custom-made to your music identity



Case study coming soon!