Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
UX/UI Designer
Graphic Designer
Tools
Figma
Photoshop
Illustrator
Team
Yeana Song

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
UX/UI Designer
User Researcher
Tools
Figma
Photoshop
Team
Yeana Song
Jasmine Yuan
Maggie Zheng

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Client
Boeing
Role
UX/UI Designer
Mentors
Adi Azulay
Bryan Mamaril

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Client
Teague
Role
Interaction Designer
Tools
Figma
Blender
After Effects
Photoshop

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
UX/UI Designer
Tools
Figma
Team
Yeana Song

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
Product Designer
Physical Prototyping
Coding
Tools
Figma
Arduino
Team
Yeana Song
Jasmine Yuan

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
UX/UIDesigner
Tools
Figma
Team
Yeana Song

Polaris

3D Augmented Reality Orientation & Navigation system for Zero Gravity environments
Duration
8 weeks
Role
UX Researcher
Product Designer
Tools
Figma
Photoshop
Team
Yeana Song
Evelynn Li
Janey Yee
DURATION
2021 - 10 weeks
CLIENT
Sang-gyeun Ahn
DES 207 - Design Drawing
TOOLS
Graphite, Marker
ROLE
Sketching
TEAM
N/A
DURATION
2022 - 4 weeks
CLIENT
DES 383 - Foundations of Interaction Design
TOOLS
Figma
ROLE
User Research
UI Design
Prototyping
Wireframing
TEAM
N/A
Context
Planning trips are difficult.
Google Maps works well for finding and getting directions to a single destination. But it can't plan longer, more complex trips that involve coordinating multiple destinations for multiple days. There's a lot to juggle.
That's why Google My Trips reimagines combining the tools necessary to plan complex trips . Integrated within the original design language of Google, My Trips offers a simple, comprehensive way to start your next adventure.
Context
You're a space influencer on the Lunar Gateway.
As traveling to space becomes a possibility, space influencers hold the responsibility of promoting space travel to the greater public. They need to navigate the station and find stored filming equipment for content. But how exactly do you influence in space, let alone move in zero gravity? Since there is no up or down in space, even professionally trained astronauts find it hard to get a sense of direction.
DURATION
2022 - 4 weeks
CLIENT
Kristine Matthews
DES 210 - Color and Composition
TOOLS
Adobe Indesign
ROLE
Illustrator
Industrial Prototyping
TEAM
Emily Tang
Triplog
CONTEXT
Older adults are socially isolated.
In the US, more than 10,000 Baby Boomers reach the age of 65 everyday. Alarming statistics reveal that one-third of adults aged 45 and older experience loneliness, while a quarter of adults aged 65 and above are socially isolated.

Despite the upsurge of technology designed to reconnect older adults with their social circles, persistent obstacles, including physical mobility constraints and a lack of instructions and support, continue to pose challenges in terms of usability and accessibility
Context
Planning trips are difficult.
Google Maps works well for finding and getting directions to a single destination. But it can't plan longer, more complex trips that involve coordinating multiple destinations for multiple days. There's a lot to juggle.
That's why Google My Trips combines the tools necessary to plan complex trips in a single add-on feature. Integrated within the original design language of Google, My Trips offers a simple, comprehensive way to start your next adventure.
How might we nurture relationships for isolated older adults through the love language of sharing familiar and fun kitchen experiences?
Colored glows on the Palette table to indicate the presence of loved ones
UX Framework
Value Proposition
Stemming from our experience of growing up in an Asian-American background that emphasizes the value of sharing food and eating together, we envisioned how to cultivate and encourage social interactions into the familiar experience of cooking and dining.
UX PILLARS
Autonomy
Distinguish between monitoring for safety and surveillance. Prioritize clear technological boundaries and the integration of technology catered to the individual's routine.
Familiarity
Emphasize physical, familiar, and easy to learn interactions
Purpose
Seek fun to inspire and motivate older adults to stay connected to their loved ones
Meet the Devices

Memory Magnet

The key for Aura’s system – how visual and audio memories are stored.

How it works:

Memory Magnet fills with color as it stores clips of audio (from Soundware) and auras (from Palette Table)

Send
Recieve
Clip
Store
Replay

Soundware

A food storage container lid that records the familiar & homely sounds of cooking.

How it works:

Press record to capture personalized messages or ambirent cooking sounds. Move the digital dial to playback recording.

Send
Recieve
Clip
Store
Replay

Palette Table

Linked dining tables that displays the presence of loved ones with soft diffusions of color (auras) that slowly fades with time

How it works:

Memory Magnet fills with color as it stores clips of audio (from Soundware) and auras (from Palette Table)

Send
Recieve
Clip
Store
Replay

Freezer Notes

A space to send & receive memories and messages via magnets. A tool to relive clipped memories anytime.

How it works:

Place magnets on top section to send and receive messages/clipped memories. Remove magnets to stop sharing. Use lower section as storage

Send
Recieve
Clip
Store
Replay
Video Presentation
PRIVACY & ETHICAL CONCERNS
One of the barriers voiced by older adults about technology was apprehension stemming from a lack of instruction and clarity. To facilitate the integration and continuous use of Aura, we designed a Risks & Benefits pamphlet to outline these considerations.
Some of the questions we explored included:
What are the benefits of Aura?
What are its potential risks?
How can we mitigate these risks?
PROCESS
Week 2
Research
  • Interviews
  • Competitive Analysis
Week 2-3
Design
  • Storyboarding
  • User Flow
  • System Ecosystem
Week 4-5
Refine
  • Prototyping
  • 3D Printing
  • Pamphlet Design
Week 5-6
Document
  • Video Filming
  • Presentation
Research
One-on-One Interviews
We conducted 3 one-on-one interviews aimed at learning about the ways older individuals interact with technology.
Herbert
58 years old
Lives alone
Archibald
76 years old
Lives with wife & son
Loretta
63 years old
Lives with husband &
9-year-old
Research INSIGHTS
How do you feel about digital technology in your home?
“I want the device to take care of physically-straining but needed tasks and leave the physically-straining but fun tasks like cooking for me.”
Herbet, 58
Our takeaway:
Our participants didn’t want to rely on digital technologies because they were incapable of doing tasks by themselves.

Rather, they wanted technology to accompany them and use them only when they wanted to.
Our takeaway:
Our participants emphasized the need for clear boundaries between when a device is on versus off. They reported wanting control over its influence.
"They’re gonna know everything about you anyway so I don’t really care... I’m not hiding anything but you still want to know you have your privacy. You want to have trust and know if you can turn [smart devices] off."
Loretta, 63
storyboards
Imagining solutions through stories
To gain a deeper understanding of the user space and motivations, we drafted exploratory storyboards for each of the devices.
sYSTEM ECOSYSTEM
So ... how do they work together?
We dived into structuring how each of the devices function and how they interact with each another
Refine
3D Printing Prototypes!
This was my first time 3D printing and while there were some (aka many) fails along the way, I had so much fun learning the ins and outs of 3D prototyping!
1st try
Hmm.. we had some issues with the slider portion of Soundware
8th try
No more white filament... and no slider
98th try
After many many tries, we finally got Soundware to print beautifully!
Documenting
Video Filming!
My teammates and I became star actresses for the last stage of this project. Thank you Janey's mom for the cameo & chāshāo!
REFLECTION
Keeping our target audience's needs at the forefront is key 💡
Putting ourselves in other peoples' shoes is rarely enough.

I learned so much from actively and frequently talking to older adults about their experiences with technology and what they wanted from it. Aspects I initially overlooked as intuitive was not intuitive for a demographic different from my own. I learned, firsthand, the importance of considering the ethical implications of my design choices and the impact it'll have on the people that interact with it.

Thank you to my team, Janey Yee and Evelynn LI, for all your wonderful energy, positivity and hard work throughout this journey. It was such a pleasure to work with you guys.
🫶
Interior Sketches
Marker Sketches
Pipe Sketches
Storyboards
Product Design
Logo Design
How might 3D AR navigation orient and guide novice space influencers to find stored equipment in zero gravity space stations?
How might we make trip planning easier and more intuitive by offering a way to explore destinations, organize daily itineraries and route directions all in one place?
the challenge
Currently, there is no designated web application for Apple Maps to be used on desktops. Following, it lacks many of the functional features present in the mobile Apple Maps app. I was tasked with the goal of analyzing the existing interface of Apple Maps and redesign incremental features to improve usability.
INTRODUCING POLARIS
Welcome aboard!
As you get used to floating around, Polaris is your one-stop application for finding and navigating to stored equipment throughout the station.
1.
Finding reserved equipment
The tasks summary page outlines everything you need to start your scheduled activity. Looks like you need to pick up the lens and doublet refractor from the Cupola Stowage.
2.
Navigating the space station
To get to the Cupola, use the 3D arrow to orient your body towards the projected AR path. The path then visualizes upcoming turns to help you focus on what's next.  
3.
Updating the inventory system
Tap the equipment with your phone to automatically check out. Now, others on the station can track when an item becomes available or needs to be returned.
INTRODUCING POLARIS
You're ready to go!
As a space influencer, you set the stage for the future of space travel. Thanks for having Polaris by your side to guide you every step of the way.
key takeaways
1. Designing in parallel with research
Working with a tight timeline, flexibility and adaptability were key to designing interactions that responded to updating research insights.
2.  Reaching to the past for novel solutions
The modern navigation system fails to account for 360° movement. I looked towards aviation devices, video games and even 1850s gyroscopes for inspiration.
3.  Working together with industrial designers, PMs and CDs
Built from 0 to 1, Polaris was presented to Teague leadership in 2024 along with two industrial products that work with Polaris as a system.
PROCESS
Week 1-3
Research
  • Secondary Research
  • Competitive Analysis
Week 4-5
Concept
  • Concept Generation
  • Systems Design
  • SME Review
Week 5-7
Prototype
  • Wireframes
  • 3D Prototyping
  • Animations
Week 8
Refine
  • Hi-fidelity screens
  • Live Demo
  • Final Presentation
  • Variations
Secondary research + interviews
Why a space influencer?
Space influencers hold the responsibilities of a professional astronauts, while experiencing the fear a novice in space might feel.

My role was to review NASA articles and interview Teague subject experts to speculate how existing data can help predict the experience of a to-be space influencer.
image developed by Teague's digital visualization team for Polaris
SPACE INFLUENCER PERSONA
Aryn Teague
+ short-term mission
+ completed minimal safety training
+ responsible for promoting and increasing public trust in space exploration efforts
"
I'm excited to film sponsored content and show you guys around the space station for the next two weeks! Wish me luck!
                                                                                  "
competitive analysis
How do we currently navigate?
2D arrows dominate the current navigation scene as they're universally understood and easily identifiable. I analyzed Airtags, Apple maps and video game UI to understand how they're helping us navigate.
uncovering pain points
Do these work for zero-gravity environments?
Unfortunately, what these competitors lack is the ability to differentiate between up-down and forward- back movement.
It's unclear if this arrow means to go straight or upwards. To accommodate for 360° movement, an entirely new design language is needed.
prototyping
Exploring novel navigator designs
Low-fi sketches, physical prototyping and iterations in Blender and Aftereffects led to the final navigator design that allowed for maneuvers in 360-degrees.
wireframing
Integrating the navigator into a user flow
With the navigator now enabling 360-degree navigation, I began building a UX flow that encompassed the full journey of the space influencer based on the DITL data provided by the UX researcher.
Final designs
Putting everything together: 3D, AR, UX
Collaborating with industrial designers and UX researchers, and reaching out to senior Teague designers and creative directors, fundamentally helped refine the end designs of Polaris.
3D for instant feedback
AR for continuous guidance
The unique shape of the 3D arrow follows the user's movement to offer directions. AR path overlays upcoming turns within the user's field of view.
exploring light and dark modes
looking forward
What's the next step?
To elevate the user experience of Polaris, next steps includes conducting A/B testing to evaluate and refine the usability and readability of minute interactions.
photos from the 2024 Teague commercial space age presentation
This page is still under construction!
Curious about the full process? I'm one email away :)
SEND ME AN EMAIL ->
our solution
Google My Trips
Optimized for comprehensive planning
✅ Simple daily itinerary
✅ Planning & routing all in one place
Customizable transportation methods for each destination
Saved lists
A safe haven for all of your dream destinations before you know which day's itinerary to add it to.
Easily switch between days
Tabs provide quick overviews of what you planned for each day and how to get there.
key takeaways
1. Learning to design within an ecosystem
It was a valuable challenge integrating a new feature that looked and felt like it belonged to Google's distinct ecosystem.
2.  Simplifying the process for complex tasks is key
While we designed over 12 key interactions, we focused on creating a smooth and simple flow from exploring and saving to navigating.
3.  Embracing the iteration process!
After group submission, I wasn't satisfied with how our design looked. I decided to redesign the UI to better reflect the elegance of Google's design language.
PROCESS
Week 1-2
Research
  • User Interviews
  • Competitive Analysis
Week 3
Design
  • Design Language
  • Abstract Flow
Week 4-5
Prototype
  • Wireframes
  • User Testing
Week 6
Refine
  • Principles
  • Hi-fidelity screens
  • Variations
Research
PARTICIPANT INTERVIEWS
Hearing directly from Google Maps users
We asked three Google Maps users to plan a trip in 10 minutes to identify what they prioritized and tripped over. We followed up with an in-depth semi-structured interview.
Katie
  21 years old
Minimal planner
"To use maps, I need a destination. The problem is, when I'm on a trip, I never know where to go. "
Rachel
26 years old
Big planner
"I don't know whether to go to the museum first or the cafe. Or even on what day.
I want to group them based on proximity.
Rachel
21 years old
BIG planner
I have 20 open tabs. I have timestamps, commute times, open hours and reservation links too. I just want it all in one consolidated place. ”
Key insights from user research
What did they struggle with?
01
Planning a trip is a LOT to juggle.
Users use 3+ different websites and apps to plan trips. The continuous back and forth is confusing.
02
Trips rarely go as planned.
Yet, existing planners often restrict flexibility by locking them into single transportation methods.
03
Deciding when to go can be harder than deciding where to go.

Organizing large lists of saved destinations into different days is not an easy process.
04
Finding popular attractions in a new city is difficult.
Users need more than just the current search bar. Recommendations of popular locations is needed.
UNDERSTANDING THE market
What's wrong with the current My Maps?
We analyzed six trip planning sites to observe their strengths and pain points. My contribution was on analyzing Google My Maps.
Strengths
- Offers real-time collaboration
- Destination can be grouped using 'Layers'
- Provides overview of all added destinations
Limits
- Search bar limited to direct search only
- Doesn't provide recommendations
- Can't customize time or date
- Limited to one transportation method per trip.
- No notes section
DESIGN PRINCIPLES
How can we design it "better"?
"Better" can mean a lot of things. We developed three principles to guide our design decisions based on the feedback of our interview participants and market research.
01
Concise yet comprehensive
Integrate simple and paced out interactions to reduce cognitive load.
02
Flexible yet structured
Prioritize options to accommodate different planning styles and use cases.
03
Familiar yet renewed
Expand Google's existing language to reduce barriers of learning new layouts.
USER FLOW
Laying out the navigational flow
We paid close attention to which functions were necessary or optional. I took it one step further to map out a user flow to visualize various use case scenarios.
DESIGN LANGUAGE
Defining the design space
Leaning into the original design language of Google was a crucial decision we made to minimize a user's barrier to learning our new product.
Although Google's original design language largely guided our systematic and stylistic design choices, we had to think critically about how to expand them for our novel features.
Selected destination card
Unselected destination card
"Final" designs
The initial designs for this project received a score of 9.8/10 (evaluated by professor Pierce, 4x recipient of the Best Paper award) with comments remarking on the in-depth and detailed flow of the user experience.
1 /6
Create trip
My Trip is nested within the existing interface of Google Maps making it easy to find and access all of its features.
2 /6
Find destinations
There are three flexible ways to find destinations: Explore, Search Nearby, and Direct Search so you know what's popular in the area.
3 /6
Add to itinerary
The itinerary collects added destinations into a customizable timeline. Set a date or time to organize.
4 /6
Set transportation individually
My Trips now makes it possible to set different transportation methods for each part of your daily schedule.
5 /6
Swap Order
Easily switch the order of your destinations to view the most efficient schedule. My Trip's labeled map makes it easy to visualize where your next destination lies.
6 /6
Route and go!
Access your itinerary from mobile to bring it on your next adventure.
re-designs
Despite the high grade, I wasn't completely satisfied with the visual design post-submission and saw several areas for improvement.
POST-SUBMISSION redesign
Improving the visual design
Original itinerary design
Redesigned itinerary design
1 )  Clearer type hierarchy
Bigger titles & smaller subtitles. Strategic use of bold text emphasizes destination names over secondary info.
2 )  Intentional spacings
Standardized spacings opened up more breathing room for a cleaner look, even with more content.
3 )  Bolder CTAs
Primary & secondary buttons help direct attention to actionable features such as adding locations and routing.
NEXT STEPS
Measuring success
Since we didn't formally ship our product after completing it, we didn't have a way to formally measure its impact. Thinking towards the future, if My Trips were to replace Google's current planning product, My Maps,  we would measure:
1 )  Adoption rates & frequency of interaction
to assess the acceptance and integration of My Trips into users' traveling routines
2 )  Total time spent trip planning
to assess efficiency of trip planning and identify areas for improvement
REFLECTION
Learning to design within the system + a little creativity
Designing a feature is challenging. Not only did I have to design the feature itself, but I also had to consider how it fits in the existing product. While this system-based thinking was new and sometimes confusing, I truly enjoyed working within the structure and seeing it all fit together at the end.
Thank you to my team, Maggie Zheng and Jasmine Yuan, for all your hard work and guidance along the way! I had a wonderful time working with you!
🫶
If you have questions on any part of this project, I'm happy to share more about my design process. Feel free to reach out!
Context
The Waste Age
The Waste Age by Justin McGuirk is an environmental awareness essay that was written in conjunction to the exhibition 'Waste Age: What Can Design Do?' at the Design Museum in London. To reflect the urgency and depth of the article, I transformed the article into an interactive platform accentuating the severity of the waste issue.
Variations
Final designs
introduction
Following the title page is a list of the top ten types of waste found in the Pacific ocean in 2019 along with its total number collected that year.
Supplementary Context
A focal point of the article was centered around the effects of the consumerism era where single-use plastic became the marketing trend. To emphasize the contrast between modern ideologies with the past, 1950s consumerism ads and current ads are showcased throughout the article.
Styling
Consistent typography, spacing and bold statement color is used throughout the article to provide unity.
FULL VIDEO

CONTEXT
Post-pandemic search for friends on campus
Students are finally free from quarantine but they're faced with a new dilemma. How exactly do they make friends? The obvious answer might be to talk to someone, literally anyone, from class. But the situation isn't the way it used to be. Now, everyone hides behind their masks and scurries home right after class.
How might we create a meaningful, empathetic experience for college students struggling to find connection?

Project requirements
As part of the UW Design 325 course, we had two requirements:
- Produce a functional furniture prototype
- The furniture must sense and respond to human interactions
The rest was up to us to address an issue that was important to our team.
PROCESS
Week 1-2
Define
  • SLA Mapping
  • Process Flow
Week 2-5
Code
  • Learning Arduino
  • Coding
Week 6
Prototype
  • Mechanical Design
  • High-fidelity Prototyping
Week 7
Refine
  • Cover & Card Design
  • Physical Installation
  • Variations
define
scope
What is a buddy bench?
The Buddy Bench concept originated from 7-year old Christian Buck where "If a kid sits on the "Buddy Bench", other kids on the playground know they are looking for a friend to play with!".

We wanted to expand on Buck's heartwarming idea to design an interactive buddy bench system for college students. But while the original Buddy Bench was for a playground, we were designing for a 700-acre college campus.
sla mapping
Laying out the interactions
To begin, we defined the initiating action (sensor), responding processes (logic) and the feedback (actuation) of the experience.
Sensor
Ultra Sonic Distance sensor
Logic
One activated sensor = someone is looking for a buddy
Two activated sensor = buddies are matched
Acutation
LCD Display
Responsive blinking & steady Neo pixel lights
Card Dispenser (Servo motor)
PROCESS FLOW
coding
Arduino Coding
Challenges & Solutions
For this project, we essentially needed two Arduinos to work independently from each other (react and respond to the environment) and report back to each other.

As simple as this sounds, it's a LOT harder to code when considering the built-in hierarchy of Arduinos. When using I2C communication to connect two Arduinos, one is assigned to be a 'master' and the other is assigned as 'other'. This means that the 'master' Arduino controls the communication by requesting data from the 'other' Arduino. The 'other' Arduino can only respond when requested. This isn't ideal as our project wanted both benches to be able to initiate the blinking.

After several tries we were able to make it work by adding complex conditional statements and minimizing delays in the 'master' Arduino.
'Master' code
// Servo
#include <Servo.h>
Servo myservo;
int pos = 0;
// Ultrasonic Sensor
int distance;
const int echoPin = 9;
const int trigPin = 8;
// I2C communication
#include <Wire.h>
#define SLAVE_ADDR 9
#define ANSWERSIZE 25
#define response1 15
#define response2 25
// LED light
const int bluePin = 7;
int ledState = LOW;
unsigned long previousMillis = 100;
const long interval = 100;
//LCD display
#include <LiquidCrystal.h>
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);
//neopixel
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h>
#endif
#define LED_PIN 10
#define LED_COUNT 4
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
unsigned long pixelPrevious = 0;    
unsigned long patternPrevious = 0;  
int           patternCurrent = 0;  
int           patternInterval = 5000;  
int           pixelInterval = 50;  
int           pixelQueue = 0;      
int           pixelCycle = 0;          
uint16_t      pixelCurrent = 0;        
uint16_t      pixelNumber = LED_COUNT;

void setup() {
lcd.begin(16,2);
Wire.begin();
Serial.begin(9600);
Serial.println("I2C Master Demonstration");
pinMode(echoPin, INPUT);
pinMode(trigPin, OUTPUT);
myservo.attach(6);
pinMode (bluePin, OUTPUT);
//neopixel
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
 clock_prescale_set(clock_div_1);
#endif
strip.begin ();
 strip.show();          
 strip.setBrightness(50); // Set BRIGHTNESS to about 1/5 (max = 255)
}

void loop() {
 Wire.requestFrom(SLAVE_ADDR, response1 && response2);
 unsigned long currentMillis = millis();    
sendPing();
int duration = pulseIn(echoPin, HIGH);
distance = 0.034 * duration / 2;
distance = clamp(distance, 0, 50);

char f = 'X';
String response = "";
while (Wire.available()){
 f = Wire.read ();
   response += f;
}
if (f == 'F'){
  theaterChase(strip.Color(0, 0, 255), 200); // Blue
} else if (f == 'O') {
   digitalWrite(bluePin, LOW);
}Serial.println(response);if (distance <= 16){
Wire.beginTransmission(SLAVE_ADDR);
Wire.write('P');
Serial.println ("person");
digitalWrite(bluePin, HIGH);
Wire.endTransmission();
String response = "";  if(currentMillis - pixelPrevious >= pixelInterval) {      
   pixelPrevious = currentMillis;                        
   switch (patternCurrent) {    
     default:
      theaterChase(strip.Color(0, 0, 255), 200);  // Blue
       break;
   }
 }
}
else if (distance > 16){
Wire.beginTransmission(SLAVE_ADDR);
Wire.write('N');
digitalWrite(bluePin, LOW);
Serial.println ("nobody");
Wire.endTransmission();
               
 if(currentMillis - pixelPrevious >= pixelInterval) {    
   pixelPrevious = currentMillis;                        
   switch (patternCurrent) {
     case 7:
       theaterChaseRainbow(0); // Rainbow-enhanced theaterChase variant
       break;
     case 6:
       rainbow(0); // Flowing rainbow cycle along the whole strip
       break;    
     case 5:
       theaterChase(strip.Color(0, 0, 0), 50); // Blue
       break;
     case 4:
       theaterChase(strip.Color(0, 0, 0), 50); // Red
       break;
     case 3:
       theaterChase(strip.Color(0, 0, 0), 50); // White
       break;
     case 2:
       colorWipe(strip.Color(0, 0, 0), 50); // Blue
       break;
     case 1:
       colorWipe(strip.Color(0, 0, 0), 50); // Green
       break;        
     default:
       colorWipe(strip.Color(0, 0, 0), 50); // Red
       break;
   }
 }}
if ((f == 'F')&& (distance <= 16)) {
Wire.beginTransmission(SLAVE_ADDR);
Wire.write('J');
Serial.println('J');
for (pos = 0; pos <= 100; pos += 20) {
myservo.write(pos);
delay(1);
}
for (pos = 100; pos >= 0; pos -= 20) {
myservo.write(pos);
delay(1);
scroll_left ();

 if(currentMillis - pixelPrevious >= pixelInterval) {        
   pixelPrevious = currentMillis;                      
   switch (patternCurrent) {
     default:
      theaterChaseRainbow(50);  // Blue
       break;     
   }
 }Serial.println ("DONE");
Wire.endTransmission();
}
}
else{
scroll_right ();
Wire.beginTransmission(SLAVE_ADDR);
Wire.write('S');
Serial.println ("S");
Wire.endTransmission();
}
}void sendPing(){
digitalWrite(trigPin, LOW);
//delayMicroseconds(50);
digitalWrite(trigPin, HIGH);
//delayMicroseconds(10);
digitalWrite(trigPin, LOW);
}int clamp(int VAL, int min, int max){
if(VAL <= min){
VAL = min;
return VAL;
}
else if(VAL >= max){
VAL = max;
return VAL;
}
else{
return VAL;
}
}

void scroll_left(){
lcd.begin(16, 2);
lcd.setCursor (0,0);
lcd.print("We found you ");
lcd.setCursor (0,1);
lcd.print("a buddy! ");
delay(50);
for (int positionCounter = 0; positionCounter < 0; positionCounter++) {
lcd.scrollDisplayLeft();
}
}

void scroll_right(){
lcd.begin(16, 2);
lcd.setCursor (0,0);
lcd.print("");
lcd.setCursor (0,1);
lcd.print("");
for (int positionCounter = 0; positionCounter < 0; positionCounter++) {
lcd.scrollDisplayLeft();
}
delay(6);
}

void rainbow(int wait) {
 for(long firstPixelHue = 0; firstPixelHue < 5*65536; firstPixelHue += 256) {
   strip.rainbow(firstPixelHue);
   strip.show();
   delay(wait);  
 }
}

//neo_pixel no delay
void colorWipe(uint32_t color, int wait) {
 if(pixelInterval != wait)
   pixelInterval = wait;                
 strip.setPixelColor(pixelCurrent, color);
 strip.show();                          
 pixelCurrent++;                          
 if(pixelCurrent >= pixelNumber)          
   pixelCurrent = 0;
}

void theaterChase(uint32_t color, int wait) {
 if(pixelInterval != wait)
   pixelInterval = wait;                  
 for(int i = 0; i < pixelNumber; i++) {
   strip.setPixelColor(i + pixelQueue, color);
 }
 strip.show();                            
 for(int i=0; i < pixelNumber; i+=3) {
   strip.setPixelColor(i + pixelQueue, strip.Color(0, 0, 0));
 }
 pixelQueue++;                          
 if(pixelQueue >= 3)
   pixelQueue = 0;                        
}

void rainbow(uint8_t wait) {
 if(pixelInterval != wait)
   pixelInterval = wait;                  
 for(uint16_t i=0; i < pixelNumber; i++) {
   strip.setPixelColor(i, Wheel((i + pixelCycle) & 255));
 }
 strip.show();                        
 pixelCycle++;                    
 if(pixelCycle >= 256)
   pixelCycle = 0;                      
}

void theaterChaseRainbow(uint8_t wait) {
 if(pixelInterval != wait)
   pixelInterval = wait;                
 for(int i=0; i < pixelNumber; i+=3) {
   strip.setPixelColor(i + pixelQueue, Wheel((i + pixelCycle) % 255));
 }
 strip.show();
 for(int i=0; i < pixelNumber; i+=3) {
   strip.setPixelColor(i + pixelQueue, strip.Color(0, 0, 0));
 }      
 pixelQueue++;                      
 pixelCycle++;                          
 if(pixelQueue >= 3)
   pixelQueue = 0;          
 if(pixelCycle >= 256)
   pixelCycle = 0;                    
}

uint32_t Wheel(byte WheelPos) {
 WheelPos = 255 - WheelPos;
 if(WheelPos < 85) {
   return strip.Color(255 - WheelPos * 3, 0, WheelPos * 3);
 }
 if(WheelPos < 170) {
   WheelPos -= 85;
   return strip.Color(0, WheelPos * 3, 255 - WheelPos * 3);
 }
 WheelPos -= 170;
 return strip.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}
'Other' code
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif
#define LED_PIN 10
#define LED_COUNT 4
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
unsigned long pixelPrevious = 0; // Previous Pixel Millis
unsigned long patternPrevious = 0; // Previous Pattern Millis
int patternCurrent = 0; // Current Pattern Number
int patternInterval = 5000; // Pattern Interval (ms)
int pixelInterval = 50; // Pixel Interval (ms)
int pixelQueue = 0; // Pattern Pixel Queue
int pixelCycle = 0; // Pattern Pixel Cycle
uint16_t pixelCurrent = 0; // Pattern Current Pixel Number
uint16_t pixelNumber = LED_COUNT;
#include <LiquidCrystal.h>
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);
#include <Servo.h>
Servo myservo;
#include <Wire.h>
#define SLAVE_ADDR 9
#define ANSWERSIZE 5
const int bluePin = 7;
const int yellowPin = 13;
int ledState = LOW;
int distance;
int pos = 0;
const int echoPin = 9;
const int trigPin = 8;
String answer = "Buddy";
unsigned long previousMillis = 100;
const long interval = 100;
char found = 'F';
char nonexistent = 'O';
char x = 'L';

void setup() {
Wire.begin(SLAVE_ADDR);
Wire.onRequest(requestEvent);
Wire.onReceive(receiveEvent);
Serial.begin(9600);
Serial.println("I2C Slave Demonstration");
pinMode(bluePin, OUTPUT);
pinMode(yellowPin, OUTPUT);
pinMode(echoPin, INPUT);
pinMode(trigPin, OUTPUT);
myservo.attach(6); // attaches the servo on pin 6 to the servo object
//neopixels
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
clock_prescale_set(clock_div_1);
#endif
strip.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
strip.show(); // Turn OFF all pixels ASAP
strip.setBrightness(50); // Set BRIGHTNESS to about 1/5 (max = 255)
lcd.begin(16,2);
}

void requestEvent() {
sendPing();
int duration = pulseIn(echoPin, HIGH);
distance = 0.034 * duration / 2;
distance = clamp(distance, 0, 50);
unsigned long currentMillis = millis();
String response = "";
while (0 < Wire.available()) {
x = Wire.read();
response += x;
}
if (distance <= 16) {
Wire.write(found);
// Print to Serial Monitor
Serial.println(found);
digitalWrite(bluePin, HIGH);
if (currentMillis - pixelPrevious >= pixelInterval){
pixelPrevious = currentMillis;
switch (patternCurrent) {
default:
theaterChase
(strip.Color (0,0,255),200);
break;
}
}
} else if (distance > 16) {
Wire.write(nonexistent);
Serial.println(nonexistent);
digitalWrite(bluePin, LOW);
if(currentMillis - pixelPrevious >= pixelInterval) {
pixelPrevious = currentMillis;
switch (patternCurrent) {
case 7:
theaterChaseRainbow(0);
break;
case 6:
rainbow(0);
break;
case 5:
theaterChase(strip.Color(0, 0, 0), 50); // Blue
break;
case 4:
theaterChase(strip.Color(0, 0, 0), 50); // Red
break;
case 3:
theaterChase(strip.Color(0, 0, 0), 50); // White
break;
case 2:
colorWipe(strip.Color(0, 0, 0), 50); // Blue
break;
case 1:
colorWipe(strip.Color(0, 0, 0), 50); // Green
break;
default:
colorWipe(strip.Color(0, 0, 0), 50); // Red
break;
}
}
}
}

void receiveEvent() {
sendPing();
int duration = pulseIn(echoPin, HIGH);
distance = 0.034 * duration / 2;
distance = clamp(distance, 0, 50);
while (0 < Wire.available()) {
x = Wire.read();
}
if (x == 'P') {
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
if (ledState == LOW) {
ledState = HIGH;
Serial.println("person");
rainbow (10); // Blue
} else {
ledState = LOW;
digitalWrite(bluePin, ledState);
}
}
} else if (x == 'N') {
digitalWrite(bluePin, LOW);
Serial.println("nobody");
} else if (x == 'J') {
for (pos = 0; pos <= 180; pos += 1) { // goes from 0 degrees to 180 degrees
myservo.write(pos); // tell servo to go to position in variable 'pos'
delay(5); // waits 10 ms for the servo to reach the position}
}
for (pos = 180; pos >= 0; pos -= 1) { // goes from 180 degrees to 0 degrees
myservo.write(pos); // tell servo to go to position in variable 'pos'
delay(5); // waits 10 ms for the servo to reach the position
}
scroll_left();
Serial.println("J");
} else if (x == 'S') {
scroll_right();
Serial.println("S");
}
}

void loop() {
}
void sendPing(){
digitalWrite(trigPin, LOW);
//delayMicroseconds(50);
digitalWrite(trigPin, HIGH);
//delayMicroseconds(10);
digitalWrite(trigPin, LOW);
}
int clamp(int VAL, int min, int max){
if(VAL <= min){
VAL = min;
return VAL;
}
else if(VAL >= max){
VAL = max;
return VAL;
}
else{
return VAL;
}
}

void scroll_left(){
lcd.begin(16, 2);
lcd.setCursor (0,0);
lcd.print("We found you ");
lcd.setCursor (0,1);
lcd.print("a buddy! ");
delay(50);
for (int positionCounter = 0; positionCounter < 0; positionCounter++) {
// scroll one position left:
lcd.scrollDisplayLeft();
// wait a bit:
}
}

void scroll_right(){
lcd.begin(16, 2);
lcd.setCursor (0,0);
lcd.print("");
lcd.setCursor (0,1);
lcd.print("");
for (int positionCounter = 0; positionCounter < 0; positionCounter++) {
// scroll one position left:
lcd.scrollDisplayLeft();
// wait a bit:
}
delay(6);
}

void colorWipe(uint32_t color, int wait) {
if(pixelInterval != wait)
pixelInterval = wait;
strip.setPixelColor(pixelCurrent, color);
strip.show();
pixelCurrent++;
if(pixelCurrent >= pixelNumber)
pixelCurrent = 0;
}

void theaterChase(uint32_t color, int wait) {
if(pixelInterval != wait)
pixelInterval = wait; // Update delay time
for(int i = 0; i < pixelNumber; i++) {
strip.setPixelColor(i + pixelQueue, color);
}
strip.show(); // Update strip to match
for(int i=0; i < pixelNumber; i+=3) {
strip.setPixelColor(i + pixelQueue, strip.Color(0, 0, 0));
}
pixelQueue++; // Advance current pixel
if(pixelQueue >= 3)
pixelQueue = 0; // Loop the pattern from the first LED
}

void rainbow(uint8_t wait) {
if(pixelInterval != wait)
pixelInterval = wait;
for(uint16_t i=0; i < pixelNumber; i++) {
strip.setPixelColor(i, Wheel((i + pixelCycle) & 255)); // Update delay time
}
strip.show(); // Update strip to match
pixelCycle++; // Advance current cycle
if(pixelCycle >= 256)
pixelCycle = 0; // Loop the cycle back to the begining
}

void theaterChaseRainbow(uint8_t wait) {
if(pixelInterval != wait)
pixelInterval = wait; // Update delay time
for(int i=0; i < pixelNumber; i+=3) {
strip.setPixelColor(i + pixelQueue, Wheel((i + pixelCycle) % 255)); // Update delay time
}
strip.show();
for(int i=0; i < pixelNumber; i+=3) {
strip.setPixelColor(i + pixelQueue, strip.Color(0, 0, 0)); // Update delay time
}
pixelQueue++; // Advance current queue
pixelCycle++; // Advance current cycle
if(pixelQueue >= 3)
pixelQueue = 0; // Loop
if(pixelCycle >= 256)
pixelCycle = 0; // Loop
}
uint32_t Wheel(byte WheelPos) {
WheelPos = 255 - WheelPos;
if(WheelPos < 85) {
return strip.Color(255 - WheelPos * 3, 0, WheelPos * 3);
}
if(WheelPos < 170) {
WheelPos -= 85;
return strip.Color(0, WheelPos * 3, 255 - WheelPos * 3);
}
WheelPos -= 170;
return strip.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}
Prototype
Mechanical design
REFINE
Final bench design
Card design
Card dispenser
final video
REflection
My love for physical prototyping x10
I've always had a passion for hands-on tinkering and this project rekindled my love for it. I can't wait for future roles that involve combining both hard and software to design tangible interfaces!
Next Steps ➡️
If we had more time, we'd want to build a 'bench' from scratch. Our workaround of using the minimalistic chair allowed us to focus on the internal functions for the project but I'd love to bring in more organic shapes into the form factor. Another step would be to film in daylight. I LOVED filming at 3am but a little sunshine might help set a more fitting context :)
Thank you to Professor Muren for all of your feedback and encouragement throughout this project. There were more than several challenges throughout but your genuine enthusiasm and passion helped us persevere to the very end. And a big thank you to my partner, Jasmine Yuan, for all of your creativity and hard work. You always having an eye out for the bigger picture and kept us on track. It was so fun working with you!
🫶
If you have questions on any part of this project, I'm happy to share more about my design process. Feel free to reach out!
Objective
Showcase the principle of Simultaneous Contrast by making the same color look the same or the same color look different.
Prototyping
Materials
For the inside pages, we used thick, semi-glossy 270 gsm paper to ensure page durability for frequent tactile interactions. Short-end printing was used to precisely line up the front and back pages before cutting each page to the exact size. We then bound the pages into a flip book using Kettle stitch binding.
Page Templates
Cover Template
Final Design
THE Process
Week 1
Define
  • Site Map
  • Task Flow
  • Navigation & Layout
  • Heuristic Evaluation
  • User Interview
Week 2
Ideate
  • Sketching
  • Concept Generation
Week 3
Design
  • Design Language
  • Detail Variations
  • Prototyping
Week 4-6
Refine
  • High-fidelity Prototyping
  • Rapid Usability Testing
DEFINE
  • SITE MAP
  • TASK FLOW
  • NAVIGATION & LAYOUT
  • HEURISTIC EVALUATION
  • USER INTERVIEW
understanding Apple maps
Site Maps
I started off by investigating both the mobile app and web application of the existing platform of Apple Maps. To better understand Apple's information architecture, I organized interactive links by primary and secondary hierarchy.
Task Flow
How are users navigating through the current layout of Apple Maps?
I decided to focus on routing driving directions, visiting place websites and leaving a review for both the mobile and web to identify current strengths, limitations and pain points in the usability.
Navigation & Layout
To gain a deeper understanding of user flows, I documented how key user input actions triggered corresponding outputs. This exploration was crucial in providing analytical annotations that would launch my next steps into prototyping and testing.
Evaluating interactivity
Heuristic Evaluation
User Interview
IDEATE
  • SKETCHING
  • CONCEPT GENERATION
early concept development
30 Sketches
10 Concepts
DESIGN
  • DESIGN LANGUAGE
  • DETAIL VARIATION
  • PROTOTYPING
approaching seamless integration into existing ui
Design Language
vARIATIONS, VARIATIONS, VARIATIONS...
Detail Variations
DETAILS IN PROTOTYPING
Prototyping
REFINE
  • HIGH FIDELITY PROTOTYPING
  • RAPID USABILITY TESTING
Rapid Usability Testing
context
TripLog is a leading software development company specializing in automatic mileage and expense reimbursement.  As the product design intern, I led the development of polished notification pop-up screens for mobile, launched a full set of navigation icons and redesigned the home landing page to align with the updated brand identity.
Simple & Modern
Designs for the web homepage, aligning with the company's goal for an updated, clean, and contemporary aesthetic
Some parts have been removed for privacy protection.
Creative Assets
These graphics were designed to compliment Triplog's unique autostart options on the mobile home screen.
You can hover over these too
Notification Pop-ups
Developed individual UI screens with illustrated graphical elements to direct users to CTAs in the mobile app
Some work has been omitted for protection
If you'd like to learn more about my experience at Triplog, please contact me.
SEND ME AN EMAIL ->
context
Jeeva Health AI is a mental wellness platform tailored specifically for young individuals. Designed for and delivered by Gen Z, Jeeva Health AI offers peer support, guidance from AI chats and interventions by trained clinicians.

Following successful testing with 114 students across three U.S. campuses and a promising pre-pilot at a major public university in the Northwest, Jeeva Health AI is currently in development for official launching.
MY ROLE
As the UX/UI design intern, I undertook the development of the community chatroom page focusing on creating a space for individuals to share posts and react to other user's comments.
Content is top secret!
If you're curious about my experience at Jeeva Health AI, please reach out :)
SEND ME AN EMAIL ->
Context
Teague is a global design consultancy known for innovations in consumer products and aviation designs. Founded in 1926, Teague has partnered with NASA, Microsoft, Samsung, Google, Pringles and many more.

This time, Boeing came to Teague with a question.
How might Boeing visualize a compelling internal reporting tool that streamlines access to task management and resources?
DELIVERABLES
+ Visualization of an internal reporting tool
+ Presentation to Boeing stakeholders
+ Style guide and components library
key LEARNINGS
1. Designing for scalability and ease of maintenance after hand-off
Key visual decisions were made with careful consideration of the assets and resources available to developers.
2. Guiding conversations to discover the client's priorities
Asking the right questions was crucial in developing a design approach that empowered the client to identify and articulate their goals.
3. Proactively seeking feedback is essential for professional growth
The mentorship and collaborative support from Teague’s senior designers were instrumental in expanding my creative thinking and pitching skills.
Content is top secret!
Curious about the Boeing project? I'm one email away :)
SEND ME AN EMAIL ->

You may also like...