Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Role
UX/UI Designer
Graphic Designer
Tools
Figma
Photoshop
Illustrator
Team
Yeana Song

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Role
UX/UI Designer
User Researcher
Tools
Figma
Photoshop
Team
Yeana Song
Jasmine Yuan
Maggie Zheng

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Client
Boeing
Role
UX/UI Designer
Mentors
Adi Azulay
Bryan Mamaril

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Client
Teague
Role
Interaction Designer
Tools
Figma
Blender
After Effects
Photoshop

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Role
UX/UI Designer
Tools
Figma
Team
Yeana Song

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Role
Product Designer
Physical Prototyping
Coding
Tools
Figma
Arduino
Team
Yeana Song
Jasmine Yuan

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 weeks
Role
UX/UIDesigner
Tools
Figma
Team
Yeana Song

Aura

an IOT system for older adults to share communal dining experiences with loved ones
Duration
6 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.
Trusted by over a billion users monthly, Google Maps excels in accuracy and cross-device compatibility. However, Google Maps' inability to support planning complex, multi-day trips with multiple destinations reveals an opportunity for improvement.
How might we evolve a familiar navigation tool to support travelers in planning and navigating complex trips?
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.
How might 3D AR navigation orient and guide novice civilian astronauts to find stored equipment in zero gravity space stations?
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
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!
The space station can get confusing, especially as a civilian astronaut with just a fraction of the training real astronauts get. So as you get used to floating around, Polaris will be your one-stop place for finding equipment and navigating throughout the station.
01
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.
01
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.
02
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.  
03
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.
03
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.
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.
TIMELINE
WK 1-3
Research
Secondary Research
Competitive Analysis
DITL
WK 4-5
Concept
Concept Ideation
Systems Design
SME Review
WK 5-7
Prototype
Wireframes
3D Prototyping
Animations
WK 8
Refine
Hi-FI Screens
Live Demo
Final Presentation
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
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.
prototyping
Exploring novel navigator designs
Low-fi sketches, physical prototyping and iterations in Blender and After Effects 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
Top secret content!
Curious about the full process? I'm one email away :)
SEND ME AN EMAIL ->
THE SOLUTION
Google My Trips
My Trips integrates key travel tools—destination search, itinerary planning, and navigation—into one platform.
Everything you need in one place
No more jumping between notes, searches, maps, or blogs.
Turn endless destinations into easy-to-follow travel plans
Saved lists let you collect all your travel destinations without needing to finalize the details upfront.
Tailor to your own planning style
Day-to-day pages help you drill down the details, as much or as little as you want.
Tailor to your own planning style
Day-to-day pages help you drill down the details, as much or as little as you want.
process
01
Discovering with trip planners
USER INTERVIEWS
Hearing directly from trip planners
We conducted three 45 minute semi-structured interviews to understand their approaches to planning multi-day trips
"I have 20 open tabs. Timestamps, commute times, open hours and reservation links ... Everything’s everywhere. "
- Sabrina, 26
Key insights
What did participants struggle with?
01
Interrupted Flow
Participants moved between an average of 4 platforms for trip planning, leading to confusion, distraction, and longer planning times.
02
Restrictive organization
Each participant reported that existing planners limited their workflow by restricting them to inflexible sequences.
03
Lack of clear visuals
Participants reported that choosing when to go somewhere required clear visuals on where it was relative to other destinations.
02
Learning through research
COMPETITIVE ANALYSIS
Comparing the most popular trip planners
01
Wanderlog
Top Strength
Collaborative editing allows multiple users to contribute
    Main Pain Points
    No native navigation feature. External sync to Google Maps is required.
      02
      Roadtrippers
      Top Strength
      Gives overview of time until destination, distance and finance
        Main Pain Points
        Inability to add destination directly from explore increases required user interaction
          03
          Tripit
          Top Strength
          Destination recommendations enhance workflow efficiency
            Main Pain Points
            Detached itinerary from map makes visualizing distance between destinations difficult
              Heuristic evaluation
              Why does Google My Maps struggle to compete?
              Despite it's release in 2007, My Maps is rarely recognized for its trip planning features. Main pain points of My Maps are highlighted.
              03
              Designing the experience
              WIREFRAMES
              Ideating solutions through wireframe sketches
              Low-fidelity wireframes drove the exploration of solutions based on the strengths and pain points discovered during research.
              USER JOURNEY
              How might the design accommodate varying planning styles?
              From the minimalists to the detailed, optional customizations allow planners to choose how much (or little) they want to plan.
              ITERATIONS
              Incorporating feedback into the final design
              Through a series of user tests, variations in the itinerary layout began to take shape and were incorporated into the final design.
              04
              Final Solution
              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
              Creative Assets
              These graphics were designed to compliment Triplog's unique autostart options on the mobile home screen.
              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 confidentiality.
              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...