♥ Hi, I'm Vivi Nguyen, a UX designer and artist in Bay Area
♥ Hi, I'm Vivi Nguyen
Thanks for stopping by! Currently, I'm a fourth-year at Carnegie Mellon University studying Time Based Media Art and Human-Computer Interaction.I love to create fun, transformative user experiences and games with others. I focus on color and motion to bring delight in simple moments.In Summer 2021, I worked as an intern on Spectrum, Adobe's design system, to develop a style guide for Spectrum’s video documentation.In my free time, I enjoy dancing and taking care of my chickens.
✿ BroodX Emerging CD single
Graphic design, Illustration, Screenprinting
When I lived and studied in Pittsburgh, I was surprised by how loud the cicadas were. Since these cicadas come out every 17 years, I imagined that they are a boyband making a comeback after a long hiatus. I designed and screen printed 10 CD albums and over 200 cicada photocards.
A four-layer screen print.
A four-layer screen print. The photocards are packaged in a plastic sleeve and can be decorated with stickers.
I displayed the photocards in a group exhibit where visitors decorated and kept their own cicada cards. It was a very joyful activity, and I chatted with some actual avid cicada fans.
✿ Two Wins to Win
Roles: UI design, Game Design
Team Members : Daniel Noh, Ham Siripanichgon, Amanda Piccolini, Haley Carter
Two Wins to Win is a two-player cooperative/competition board-based card game, where players figure out how to apply negotiation strategies to achieve their interests and maximize their benefits. Our game was chosen as a finalist for the GEE! awards.Our game is designed to aid players in learning and practicing negotiation strategies and terminology. The two players roleplay as a recruiter and recruit, trying to achieve an offer fit to their best interests while maintaining a win-win situation. Our target demographic is current college students, recent graduates, or any job seekers. In this prototype, there is one set of personas, a HoverCraft Designer, and a job recruiter from HOVER, Inc.©, a hovercraft company.
From our research and conversation with peers, we found that there was discomfort when it came to negotiating job benefits. When we mapped the process from interview to accepting the offer, we identified some problems that our target audience could face.
Job candidates are not considering the monetary value of benefits outside salary
Job candidates are not sure which benefits can be negotiated
Job candidates are not aware of negotiation techniques and strategies that can be used when attempting to counter offer
Job candidates are not familiar with commonly used negotiation terms
Job candidates do not know what a BATNA is
We created learning objectives and experience goals in order to address the problems. We wanted to create a low-risk game environment where players would be able to comfortably practice negotiation skills.
LO1: Identify concepts associated with the practice of negotiation and the role they play (ie. logrolling, anchoring effect, BATNA)
LO2: Identify negotiable benefits commonly include in a job offer (salary, signing bonuses, PTO, work location etc..)
LO3: Identify and implement negotiation strategies (Interest-Based Negotiation, Logrolling)
LO4: Role-play as human resources professional to better understand the role of the company representative
EG1 Semi-competitive: Negotiation is about working together with your counterpart and creating a win-win situation
EG2 Problem Solving: Players should reach a resolution where they agree on the final deal
EG3 Role-playing: A low-risk environment where players can familiarize themselves with the salary negotiation process
EG4 Humor: We encourage humor into roleplay so players can enjoy the game
EG5 Information Disclosure: Players keep hidden information from the other player as their top priority
We brainstormed negotiation strategies and potential card mechanics. Our initial prototype included:
Action Cards: Modifier Cards (currently Tip Cards)
Passive Cards: Personas
Wants and Needs: Wants and Needs Cards (currently Interest Cards)
Priority Tokens: Top, Mid, Low Priority Slots (currently Top Priority Slot)
The gameplay in the initial prototype featured a back and forth of “Modifier Cards” (e.g. add $10k salary, increase/decrease PTO by 10 days, etc.) in an attempt to come to an agreement on a final offer package. We made our prototype in playingcards.io.
We conducted playtests with those who fall into our target audience: individuals who are or will be searching for employment and are likely to find themselves in the position to negotiate a job offer.From our first playtest we noticed a fair amount of issues that we needed to tackle to create a remotely playable game. We came up with the following solutions:
|Roleplaying is the most interesting aspect||Changed gameplay to spark negotiation|
|Negotiation tips not well integrated||Added negotiation tips onto cards|
|Difficult to prompt negotiation||Added scripts to the tip cards|
|Difficult to keep track of points||Points shown on board and cards, a slider on the offer card|
|Points are unbalanced||Coded and ran a program to calculate a balanced point system|
|Modifier cards are restrictive||Got rid of modifier cards and replaced it with cards with tips|
We integrated playtesting feedback into our revised learning goals, experience goals, and prototypes. The biggest changes we made to the initial prototype were:
Action Cards: Change Modifier Cards to Tip Cards that incorporate Negotiation Tips and a script
Wants and Needs: Change Wants and Needs Cards to Interest Cards with points on them
Offer Cards: Changed offer cards to a long card with a slider to keep track of the current offer
Priority Tokens: Have one priority slot
Extra Benefits: Integrated Extra benefits into the board design
We made a revised prototype on Figma before we integrated it into playingcards.io.
We finalized the final design and point system. I worked on iterating and finalizing the card design.
The two players draw 5 tip cards and 3 interest cards. The offer cards in the middle allow players to keep track of the current offer. There is a slider for both players to move when they change their offers. There are extra benefits around the board that players can offer in order to gain points.
Players draw 5 tip cards. Whenever they want to modify the offer, they must place down a tip card and negotiate. This allows us to introduce roleplaying and humor since players can improvise how they choose to read out the cards.
Players draw 3 interest cards that are hidden from the other player. This mimics how the interests of negotiation parties are not disclosed in the beginning. Players choose one card as their top priority and keep the rest hidden in their hands. If they achieve their top priority they gain extra points.
Graphic design, Game Design
Team Members : Chelsea Liu, Yinru Sun, Nadia Susanto
Flowerstory is a trading card game to help players connect with others by sharing photos and stories related to flower languages. Our goal is to help people at game conventions meet someone unexpected. We focused the game mechanics on how to jumpstart a conversation and create personal bonds through sharing stories.
In our first prototype, we focused on the verb "exchange". Each player has a unique set of flower petals with ice breaker questions on them. In order to exchange petals, players must answer the icebreaker question on the petal. The goal was for players to end up with different colored petals to represent the different people they spoke to.
Regarding this prototype, we received insightful feedback from our professor.
|Petals will be hard to carry around||Create a petal card holder|
|What is the time limit for the game||This is a timed event|
|Explore other activities besides icebreaker questions||Use flower language as a prompt|
One of our most important design decisions was to use flowers as a prompt rather than a prop to hold questions. Flower language is rich and intricate and can spark interesting conversations. In our revised prototype, we still kept our main verb of "exchange". Players start with 10 of the same flower cards with the name of the flower. The goal is for players to trade flower cards with other players by exchanging a story and image that relates to the flower language on their card.
We did playtesting in class with this prototype and received a lot of great feedback and suggestions.
Moments of quiet space where players are waiting to find a partner to talk with
Players tend to share the same story
Too many cards to keep track of which flower card to exchange
Have players wear a pin to signify they are a player
Have players start with different cards rather than the same type
Change the incentive to meet people rather than collect cards
Include a closing ritual for players to exchange contacts
Based on our playtest feedback, we made changes to address issues players encountered. We changed the context of the game to occur throughout the entire game conference to allow players to have better, meaningful conversations. Players start with three different cards for more variety. We changed the player's goal to connecting with many people and sharing stories. We added a closing ritual where players can share contacts in the end. I designed and printed the final cards with a risograph.
✿ Family Care
UX, UI design
Team Members : Virginia Qian, Kristy Tsai
Family Care is an app prototype that helps coordinate caregiving within a family, including health-related responsibilities as well as general family tasks.While most existing apps focus on Caregiver responsibilities, our app allows the Care Receiver to have more agency in taking care of themselves. In addition, our app will make it easier for Caregivers to manage multiple groups and Care Receivers. This will foster better coordination among family groups.
We conducted online interviews through phone calls and Zoom. In addition, we did a competetive analysis.
These were are main takeaways from our interviews and competetive anaylsis:
doctor appointment reminders
easy way to coordinate between multiple carerecievers
Care Reciever Wants
more input taking care of themselves
We started with three main sections: home, calendar, and chat. The homepage has two screens: the dashboard and the profiles.
Reward system for Care Recievers
Request help system for Caregivers
We gave tasks for users to complete. and instructed users to think aloud about their process while they navigated our prototype.
|Users thought that dashboard & notification were too similar||Simplify and combine dashboard and notifications|
|Users wanted a clear distinction between Care Reciever and Caregiver||Distinguish homepage for Care Reciever and Caregiver|
|Users felt like the app was more of a calendar app, and not focused on caregiving||Add features related to medication and caregiving tasks|
After the first user testing, we implemented design changes for our color prototype.We redefined three targeted users in the family group.
Care Reciever who has medication needs
General Family Member
Distinquished home screen for Care Reciever and Caregiver
Added health trackers for caregiving focus
Care Reciever homepage displays health tracker and achievements
Caregiver homepage displays health updates and events
Caregiver manages and appoints health trackers
Care Reciever Screens
Care Reciever can update Health Trackers and view their Achievements. Care Reciever can respond to mood trackers set by the Caregiver and earn daily rewards
Care Recievers and Caregivers can switch between and manage different groups. Caregivers can see updates and requests from their Care Reciever and other group members.
Caregiver can view and manage events from all group members.
Caregiver can view and update group member's profiles. They can manage health trackers and view achievements.
✦ Animation Demo Reel 2021
Fall 2021 - Spring 2022
Scripting, storyboarding, visual development, Animation
My senior short animated film. I focused on creating a visual style that utilizes light and color to express emotion. Emi, a tired worker, dances and listens to music to stay awake to finish a project. She eventually falls into sleep paralysis and is frozen while her surroundings are magnifying and overwhelming.
✦ On a Walk
Storyboarding, Visual development, 2D Animation
This was my 2020 Fall animation project. It follows a character living in a space who finds a sparkly item that grows plants. My main goal for this project was to develop a style that matches the themes of the narrative. I kept the lineart simple and reductive because wanted to explore how much I can convey with fewer lines. The use of empty space expresses the character's feeling of living alone.
I worked with Michael Wong on sound design and music. I noted the timing of the sound cues.
Screenprint and Risograph
a zine about forbidden food accompanied with handmade do not eat packet filled with flower seeds
✦ Bigger Badder Buggier
Visual development, UI design, UV texture
Bigger Badder Buggier is a web racing game that celebrates over 100 years of Buggy History at Carnegie Mellon University. I was the Concept Artist for Buggy Builders, an interdisciplinary class-based indie studio. I developed the game's visual style, created concept art, made textures, and drew screens for the UI.We wanted the art direction to be different from the Buggy Allstars game last year. So I went with a brighter color palette and bolder shapes. Since the game this year is more surreal and imaginative, I explored how to exaggerate the environments. I drew backgrounds, characters, and props with simple shapes overlayed with some soft grainy textures. I chose this visual style since it was easier to transfer to the final 3D environment. The final game used low-poly models with hand-drawn textures to mimic the concept art.