Hi, I'm Vivi Nguyen

An animator, illustrator, and UX designer based in the Bay Area!

featured work!

animation, motion design

animation reel

collection of 2d animation, motion design, and clips of my short animation.

animation, motion design, styleguide

adobe internship

video documentation style guide for Adobe's design system.

animation, visual development

shuffle

my thesis animation about a tired worker and dancing idols.

educational game design, ui design

two wins to win

a board game that teaches negotiation skills. chosen as a finalist for the GEE! awards.

more projects!

✿ Games

Some games I worked on!

visual development, ui design

bigger badder buggier

I developed the visual style of a web racing game in an interdisciplinary game studio

educational game design, ui design

two wins to win

a board game that teaches negotiation skills. chosen as a finalist for the GEE! awards.

producer, visual development, game design, ux design

to the core

a multiplayer soldering video game.

educational game design, ui design

flowerstory

a card trading game that jumpstarts conversations through sharing stories.

✿ UX design

UX and UI design for games and applications.

ux design

family care

a mobile app prototype that improves coordination between care givers and care receivers.

educational game design, ui design

two wins to win

a board game that teaches negotiation skills. chosen as a finalist for the GEE! awards.

producer, visual development, game design, ux design

bigger badder buggier

a multiplayer soldering video game.

✿ Animation

2D animated shorts, motion graphics, and 3D animations

animation, motion design

animation reel

collection of 2d animation, motion design, and clips of my short animation.

animation, visual development

shuffle

my thesis animation about a tired worker and dancing idols.

animation, visual development

on a walk

my 2020 animation. how can I express actions and objects with fewer lines?

animation, motion design, styleguide

adobe internship

video documentation style guide for Adobe's design system.

animation, visual development

free table

short animation of two roommates trying to move a table across town.

producer, visual development, game design, ux design

to the core

a multiplayer soldering video game. I 3d modeled and animated the characters.

Hi, I'm Vivi Nguyen

Thanks for stopping by! I'm an interdisciplinary animator, illustrator, and designer who loves to create joyful animations, user experiences, and games with others. I focus on color and motion to bring delight in simple moments.In my free time, I enjoy dancing, taking care of my chickens, and rewatching early 2000s anime.reach out...
resume
linkedin
instagram
youtube
vivinhun@gmail.com
currently working on...
'Free table' animated short film


Hi, I'm Vivi Nguyen

An animator, illustrator, and UX designer based in Bay Area, CA. I compiled my motion design-related work below.resume!

Adobe Video Animation Internship

2021 internship at Adobe's design system team, Spectrum. I developed a styleguide for video documentation from the ground up.
view my process here!

youtube tutorials

I create short youtube videos on my art process. I enjoy making fun, lighthearted educational content.

Animation Demo Reel 2022

A reel of 2D animations from 2020 - 2022. Made in Clip Studio Paint and After Effects.

"Shuffle" animated short

2022 animation.
view my process here!

"on a walk" animated short

2021 animation.
view my process here!

about me

Thanks for stopping by! I recently graduated from Carnegie Mellon University with a degree in 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 my free time, I enjoy dancing, taking care of my chickens, and rewatching early 2000s anime.reach out...
resume
linkedin
instagram
youtube
vivinhun@gmail.com
currently working on...
'Free table' animated short film

✿ Free table

Work in progress!
Skills: Storyboarding, Visual development, Environment design, Animation

Work in progress for a short film about roommates trying to move a table across town. I focused on creating different environments and using color to depict the time of day and locations. I'm animating in Clip studio paint, Unity, and After effects.

Color script

Environment backgrounds

Character design

Animation (work in progress)

Animated in Clip studio paint. I'm testing out parallax in Unity and compositing in After effects.




✿ Adobe Video documentation internship

Summer 2021
My role: Video Animation Intern
Team: Spectrum

I worked on the Spectrum team, Adobe’s design system, which provides components and tools to help product teams work more efficiently and make Adobe products more cohesive.With a growing complex design system, video documentation allows us to explore a different medium to educate people about various concepts in a more visual way.My project was to create a style guide and document what Spectrum’s video documentation should look and feel like.

Styleguide

I created a video-style guide that combines Spectrum’s principles with motion and learning principles.Consistent: It uses motion templates.
Accessible: It has a voice-over and closed captions.
Simple: It uses a limited color palette and no unnecessary decorations.
Multimedia: It uses transitions to connect concepts and examples together.
Coherent: It breaks down topics into smaller sections and summarizes information in a simple way.

Instructional design plan

To create the typography video, I examined Spectrum’s typography guidelines and worked with the Spectrum team to compile common typography questions that users ask. I wrote a script that was revised by my mentors PJ Buddhari and Jess Sattell. Then I developed an instructional design plan to encompass the learning objections of Spectrum’s large audience, which consists of both Adobe employees and the public. There are different levels for video documentation, ranging from beginner, intermediate, and advanced. Each video has two to four learning objectives.

Storyboarding

Splashscreen

Templates and animation

Based on the storyboarding, video styleguide, and learning principles, I created motion templates. Below are some snippets of animation from the full video.

This typography video and styleguide is just a starting point for future Spectrum video documentation. Throughout this internship, I learned so much about design systems, motion design, and documentation. Special thanks to my mentors PJ and Jess for their amazing support and guidance!

✿ To the core

Spring 2022
My role: Producer, Game designer, Concept artist, 3D artist, UI artist
Team members: Angela Zhang, Jasper Lessiohadi, Boyang Lin, Sebastian Gutierrez

'To the core' is a multiplayer, asymmetric game about soldering robots trying to reach the core. I was the producer, concept artist, game designer, UI designer, and 3D artist for BANJOS, a team of five. I led meetings, delegated tasks, developed the game's visual style, created character models, and made UI elements.

Story

Set deep in the forest, lies the core, which connects the clone’s consciousness. All the clones are stuck doing meaningless tasks: repairing connections by soldering, collecting parts, and cleaning the area. A bug allows a few clones to gain their consciousness, becoming “variants”, who want a way out of doing repetitive tasks. The variants strive to reach the core to learn more about their purpose. Meanwhile, the overseer of all the clones, “creator” tries to protect the core and deactivate the variants by sending clones after them.

Concept art

I did visual development for the environment, props, and characters. The game has two views, an isometric view of the forest and a bird-eye view that looks like a circuit board.

3D model + Animation

I made a turnaround in Illustrator and After effects. Then I modeled, rigged, and animated the character in Blender.

UI design

I designed screens and UI elements. I worked with the programmer to implement this into the final game.

✿ BroodX Emerging CD single

Fall 2021
Skills: Graphic design, Illustration, Screenprinting

When I lived 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.

CD booklet

A four-layer screen print.

Cicada photocards

A four-layer screen print. The photocards are packaged in a plastic sleeve and can be decorated with stickers.

Exhibit

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

Spring 2021
My role: UI designer, Game designer
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.

The problem

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

Our solution

We created a low-risk game environment where players would be able to practice negotiation skills comfortably.

Learning objectives

  • 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

Experience goals

  • 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

Initial prototype

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.

Playtesting

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.

FeedbackSolution
Roleplaying is the most interesting aspectChanged gameplay to spark negotiation
Negotiation tips not well integratedAdded negotiation tips onto cards
Difficult to prompt negotiationAdded scripts to the tip cards
Difficult to keep track of pointsPoints shown on board and cards, a slider on the offer card
Points are unbalancedCoded and ran a program to calculate a balanced point system
Modifier cards are restrictiveGot rid of modifier cards and replaced it with cards with tips

Revised prototype

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.

Final prototype

We finalized the final design and point system. I worked on iterating and finalizing the card design. I designed the tip and interest cards to be distinct from each other.

Board

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.

Tip cards

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.

Interest 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.

✿ Flowerstory

Fall 2021
My role: Game designer, Illustrator
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.

the problem

Game conventions bring together people from many different backgrounds, interests, and experiences. For some folk, it can be difficult to converse with so many new people. How can we encourage and help people connect and get to know each other?

our solution

We focused the game mechanics on how to jumpstart a conversation and create personal bonds through sharing stories. Our goal is to help people at game conventions meet someone unexpected.

Initial prototype

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.

User testing

Regarding this prototype, we received insightful feedback from our professor.

FeedbackSolution
Petals will be hard to carry aroundCreate a petal card holder
What is the time limit for the gameThis is a timed event
Explore other activities besides icebreaker questionsUse flower language as a prompt

Revised iteration

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.

User testing

We did playtesting in class with this prototype and received a lot of great feedback and suggestions.

Player experiences

  • 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

Advice

  • 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

Final prototype

Based on our playtest feedback, 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 added a closing ritual where players can share contacts in the end. I designed and printed the final cards with a risograph.

✿ Family Care

Spring 2020
My role: UX/UI designer
Team Members: Virginia Qian, Kristy Tsai

Family Care is a mobile app prototype that helps coordinate caregiving within a family, including health-related responsibilities as well as general family tasks.

the problem

Most Caregiving apps focus on Caregiver responsibilities and don't allow much agency or feedback for the Care Reciever.

our solution

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.

Research

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:

Caregiver wants

  • medication reminders

  • doctor appointment reminders

  • easy way to coordinate between multiple carerecievers

Care Reciever wants

  • more input taking care of themselves

Wireframing

We started with three main sections: home, calendar, and chat. The homepage has two screens: the dashboard and the profiles.

Features

  • Reward system for Care Recievers

  • Request help system for Caregivers

User testing

We gave tasks for users to complete. and instructed users to think aloud about their process while they navigated our prototype.

FeedbackSolution
Users thought that dashboard & notification were too similarSimplify and combine dashboard and notifications
Users wanted a clear distinction between Care Reciever and CaregiverDistinguish homepage for Care Reciever and Caregiver
Users felt like the app was more of a calendar app, and not focused on caregivingAdd features related to medication and caregiving tasks

Color prototype

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

  • Caregiver

  • General Family Member

Revised features

  • 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

Final screens

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. This provides incentive and allows the Care Reciever to have more agency in taking care of themselves.

CareGiver screens

Care Receivers and Caregivers can switch between and manage different groups. Caregivers can see updates and requests from their Care Receiver and other group members. This feature improves coordination between multiple groups and members.

CareGiver screens

Caregiver can view and manage events from all group members.

CareGiver screens

Caregiver can view and update group member's profiles. They can manage health trackers and view achievements.

✿ Animation Demo Reel 2022

A reel of 2D animations from 2020 - 2022. Made in Clip Studio Paint and After Effects. Watch my full short animations below!

✿ Shuffle

Fall 2021 - Spring 2022
Skills: Scripting, Storyboarding, Visual development, Animation, Compositing

My senior short animated film. I storyboarded, developed, and animated the entire animation by myself, with feedback from faculty and peers. 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.

Thumbnails

Character art

Style guide

Color script

Animation process

✿ On a Walk

Fall 2020
Skills: Storyboarding, Visual development, Animation, Compositing

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.

Concept art

Storyboard

I revised the storyboard many times and cut out many scenes. Furthermore, I found ways to depict objects and actions with fewer and fewer lines.

Animatic

I worked with Michael Wong on sound design and music. I noted the timing of the sound cues.

✿ Illustration

Collection of illustrations from 2020 - 2022.

Figure drawings

Screenprint and Risograph

Character design

✿ Bigger Badder Buggier

Spring 2021
My role: Concept artist, UI designer, UV texture artist
Team: Buggy Builders

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. 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.

Visual developement

Characters and props

UV textures

UI screens