mockup1buddyupimg

Let's Go Back

Totally You

Totally you is my Senior Thesis project that combines the skills I learned at college, from Visual Design, to User Experience Design, and even Exhibition Design.

UX DesignApp Design
ExhibitionPrototyping
TOOLS

Photoshop / Webflow / After Effects

ROLES

UX/UI Designer / Visual Designer

TIMELINE

Spring 2025 / 8 Weeks

Product Example Picture

Several people have visited and taken my personality quiz. Here are some quick stats:

600+

Website Visitors

100+

Users on opening night

30% 

Total bounce rate

DESIGN PROCESS

I put my work into sections in order to keep myself on track while making it easy for others to digest my process.

Intro

Research

Ideate

Develop

Build

Result

INTRO

Introduction

As a child I would navigate my own identity and the world around me by using Zodiac Signs, MBTI, and any personality test I could get my hands on. These tests gave me a sense of belonging, and was always a great way to start a conversation with other kids. For my last year, I wanted my thesis to be personal yet showcase all I have learned from my undergraduate years. Scroll down to see my journey!

How Accurate are Personality Tests?

I was struggling with what my thesis project should be. I desperately wanted to do something UX related but with my background in graphic design. I agonized over the perfect case study, but decided to go to something I had a previous obsession with.  

As a kid and even through high school, I believed personality tests were the absolute truth. Now I realize basing my own personality on how a random test says I should act was pretty silly. Even the most "scientific" and popular personality test (MBTI) is not truly based in hard science.

Solution

Instead of focus on scientific results, focus on social results and making something enjoyable. I thought it would be fun and a good challenge to create something that got people to talk about their own self and my work at the same time.

RESEARCH

Personality Tests

In order to make my own personality test, I either had to create a whole new personality test or base it off an already existing model. As a designer, I did not have the credentials or knowledge to create an accurate personality test. I decided to create my own version of a personality test based off of the enneagram personality test. This allowed me to create 9 unique personalities, a number that was neither too big nor small. 

Design Tests

I already had inspiration from other already existing design tests. One was the Adobe creative tests personality test, and another was from the 2023 Taiwanese Design Exposition. I looked at these two tests as well as personality tests for enneagram, MBTI (Myer-briggs personality test), and the Big 5 test.

For my own quiz, I wanted these characteristics:

  • Characteristics to already existing personality tests
  • A strong digital and physical design identity
  • Collecting data from my users
  • Having my audience be engaged

IDEATE

Mood Board + Visual Identity

I already had an idea for the visual design for my website. I was heavily inspired by pediatric waiting rooms. These were fun, playful settings that would prepare kids for the scary unknown of having to face the doctors. I think the same can be said with more fun personality tests. It is fun to get to know yourself on the surface, but facing a deeper level and reflecting on yourself more can be daunting.

With this in mind I wanted to make my test and exhibition clinical, but childish and playful. Two seemingly opposite vibes, but I make it work. 

Low Fidelity Sketches
I researched the Enneagram personality types and wrote down the main characteristics of each personality type. Essentially I created my own version of the Enneagram personality test. I wanted each type to be humorous and make my users laugh, even if there were negative characteristics.
RESULTS CHARACTERISTICS
Type 1 - The Perfectionist
  • wake-up and grind
  • “you’re doing that wrong”
  • “erm actually...”
  1. will tell you if there is something in your teeth
  2. if you need something done, they are the guy
  3. speed reading master
Type 2 - The Nurse
  • mom core
  • did you drink enough water?
  • I’ll help!
  1. Always has the item you were looking for
  2. Amazing gift giver
  3. Social butterfly
Type 3 - The Mastermind
  • Smiles while plotting your downfall
  • I have to be better than everyone
  • "Why not me?"
  1. Crafty
  2. Determined
  3. Always wins at baking competitions
Type 4 - The Hermit
  • "Do we have to?"
  • "ohhh that looks pretty"
  • let’s go to a cafe!
  1. decor master
  2. a natural at most hobbies
  3. pretty lucky
Type 5 - The Investigator
  • Emo
  • Night owl
  • Likes Bingo
  1. Most likely to survive apocalypse
  2. Straight-forward
  3. Unique
Type 6 - The Guard
  • Meh
  • Chihuahua
  • how about we just leave?
  1. Has 20 back-up plans, and then 10 more
  2. mind reader
  3. team player
Type 7 - The Entertainer
  • What was the homework?
  • down to clown
  • let’s go shopping!
  1. Protective of friends
  2. Protective of friends
  3. Loves to socialize with others
Type 8 - The Boss
  • 20 step morning routine
  • “we gotta get at least 10,000”
  • #girlboss
  1. Amazing public speaker
  2. Can handle big dogs
  3. Always won at field day events
Type 9 - The Peacemaker
  • do you want to try yoga?
  • Empathetic
  • “I understand both sides...”
  1. Always knows the best places to eat
  2. Good with Instruments
  3. Studious
LO-FI ReSULTS 
I wanted to make the results page clear and concise. Going back to the pediatric/ doctor theme, I wanted users to get a "folder" for the results. Below are some options for results for my quiz.
Mid-fi ReSULTS 
Here are mid-fi designs for the results, experimenting with the tabs and layout. I had to make sure my designs were responsive, so I experimented with desktop layouts as well as mobile.
I wanted the result page as a recreation of a doctor's folder with a patient's results; there would be tabs at the top of the page where users could click between the different folder pages.
User Interface
Sketches for my questions: 
Example of Phone UI:
Script

As mentioned previously, my quiz is based on enneagram. I needed a script for my test, aka questions that guided my audience through a tale. I knew that for each question I would have only 2 options for an answer. Each option would have a different personality result attributed to it. I based my questions around following a journey for my users, keeping them engaged for what happens next while having fun. Once I had this drafted, I tested the questions before even coding or developing my quiz. 

First IDEATION OF QUESTIONS
I first had 12 questions, but I lowered it to 7. As mentioned before, I had people go through the questions before the website was developed.
  1. You wake up in the middle of the forest
     a. Look around and try to figure out where you are (type 5, 6, 7, 3) 
    b. My head hurts…and I feel like I am missing something important (type 9, 2, 4, 8, 1)
  2. You hear a noise and suddenly, a deer appears before you. It is staring and waiting for your next move. What is your first feeling? 
    a. Spooked, you clutch a hand to your chest. (type 4, 9, 6, 2, 3)
    b. Curious, where did he come from? (type 5, 8, 7, 1)
  3. The deer starts walking, looking back at you as if it wants you to follow. You decide to follow the deer, thinking to yourself…
    a. I wonder where we will go? (type 5, 7, 8, 6)
     b. Does this deer want my help? I should follow it… (type 2, 9, 4, 1, 3)
  4. The deer takes you to a beautiful clearing with a gorgeous sky view. The forest you are in is almost otherworldly.
    a. Wow… what a waste of time… and none of my questions are being answered! (type 1, 8, 5, 6 )
    b. Wow… it is so gorgeous here…where is my phone to take a photo? (type 4, 9, 7, 2, 3)
  5. You see a fox sitting in the clearing, and you approach him. He brings out a deck of cards and tells you to pick a card
    a. You go for the one in the middle: front and center as you want to be (type 1, 3, 7, 8)
    b. You go for a card on the side, preferring to be a fly on the wall (type 2, 4, 5, 6, 9)
  6. He tells you that he has been practicing his magic tricks and was excited to test it out, but forgot what to do after you pick a card 
    a. Advise him that he should practice a bit more before asking strangers to do his tricks (type 1, 3, 5, 8)
    b. Laugh and tell him that it is okay and that you enjoyed the trick anyway (even if you are lying) (2, 4, 6, 7, 9)
  1. A bus comes driving through the clearing, stopping in front of you and the fox
    a. Ask if he needs help onto the bus (type 1, 2, 3, 4, 9)
    b. Look at the bus and try to see who is inside (5, 6, 7, 8)
  2. You get on the bus, notice the forest is clearing out, and arrive in a city. The buildings are peculiarly shaped, and the language on the signs makes no sense to you. What do you do?
    a. Try to figure out a pattern and see if you can figure out where you are (type 2, 4, 5, 7, 9)
    b. This place looks weird… are we supposed to be going somewhere? (type 1, 3, 6, 8)
  3. The bus stops, and everyone files out, including the bus driver. What is your next move?
    a. Where is everyone going? I better get out and see what is going on!! (type 1, 3, 4, 7, 8)
    b. Maybe I should stay and wait… something might come up (type 2, 5, 6, 9)
  4. Before you can get out of the bus, a tiger walks on. How do you react?
    a. WHAT??? WHAT DO I DO??? WHERE DID THIS TIGER EVEN COME FROM?? (type 2, 3, 4, 6, 7, 9)
    b. Look around for a weapon!! Look for an escape!! (type 1, 5, 8)
  5. The tiger pounces and opens its mouth…
    a. Your life flashes before your eyes, and your final thoughts are, “I could have done so much more if I just didn’t stare at walls all day” (type 2, 3, 4, 5, 7)
    b. Shit… there has to be a way out of this! (1, 8, 9, 6)
  6. You wake up to your alarm clock blaring and the sun blinding your eyes 
    a. What a cliche ending… (type 7, 5, 6, 4)
    b. What a strange dream…I guess I need to start the day now (type 1, 2, 3, 8, 9)
These questions were too long, unclear, and unintuitive. I later changed them as I did more usability testing.

DEVELOP

Usability Testing Pt. 1

I needed people to take my quiz before the quiz was visually developed, that way I can get a sense of what people were thinking without the distraction of visual elements. I used the quiz maker website uQuiz and input my questions and drawings. I asked my roommate to take the test, and asked him about initial feelings, wording of the questions, and how he felt while taking it.

Main Issues:
  • Too long
  • Grammar mistakes
  • Too similar answers for questions
  • Confusing - the storyline did not make sense
Drawings - Results

All of my drawings were created on Photoshop

Type 1 - The Perfectionist
Type 2 -  The Nurse
Type 3 -  The Mastermind
Type 4 -  The Hermit
Type 5 -  The Investigator
Type 6 -  The Guard
Type 7 -  The Entertainer
Type 8 -  The Boss
Type 9 -  The Peacemaker
Drawings - Questions
Animation - Questions
I animated each question using Adobe After Effects. Some questions have two illustrations to provide engaging storytelling for the user.
There were a total of 9 animations created for the questions.
Below are some examples: 
Website Building
I used Webflow with custom Javascript in order to make my website. The custom code had to make a point system where each user starts with zero points, and based on the choices will gain points towards a personality type. The issue with this was that sometimes personality types would tie. In order to attempt to get rid of any bias in my data, I changed my code to randomly pick a result from the highest scoring types.

I incorporated the randomness as a solution, but also hinting towards how personality tests are mostly a fake science.

With my test fully coded and ready, I was ready for a second round of usability testing.
COLLECTING DATA
I wanted to be able to see what my users were picking for their options and what results they were getting. Webflow has the ability to connect to the app Zapier. Zapier allowed me to get my Webflow data into an excel sheet, where each question and result from each user would be collected.
Excel sheet of people's results
Excel sheet with people's results
Usability Testing Pt. 2
Questions Usability
For my second usability test, I did not use someone my age. I used someone older from a different age demographic: my dad :)
I knew that older people would show up to my exhibition, I needed to make sure they were included too!

Some major changes were made previously from my first round of questions:
‍
1. 7 questions instead of 12. My plan for the exhibition night was for people to take my quiz and show a visual dataset of what personality people are. The quiz needed to be short.
2. Making sure the two options had clear, concise, differences. The options had to be clear opposites; one answer being more extroverted, the other more introverted.
3. Making sure the story made sense. Some of the questions were worded strangely, so I had to reword it.
After changing the questions, I had multiple people test my quiz. As I watched them take it, I noticed something peculiar. People would see the page with the name of their result and think that was the only thing shown! I would have to tell people to click the tabs at the top because they would put their phones away as soon as they finished the quiz.
‍
It was not visually engaging enough to earn the user's click.

I decided to not over complicate the design; the results show up immediately once the user clicks done. No one has time to click around these days right?  

BUILD

The Physical Exhibition
This exhibition was not only a digital experience, but I physical one. I enjoy information visualization, and it is a skill every designer needs to know.

I knew I wanted people to take my test and to show-off how many people are what result. A simple data visualization would be a bar graph. Rather projecting live video or using a television, I wanted my bar graph to be more physical and interactive.
Initial sketch
Creating The Information Visualization Box
My dad building
First working of the information visualization box
With the help of my dad, we created a wooden box that held 9 tubes. The idea was that people would put tokens into each tube. Each token would represent one user and make the bar graph.

The biggest issue with tokens was that it would not stack perfectly, and would potentially cause the tubes to be filled top fast. I solved this by using pompoms instead, a relatively cheap alternative that would help color coordinate each tube.

I knew that the pom poms would not be an effective counter, but the more a person was a certain result the more full the tubes would look. I also had other ways of collecting data.
FINAL BOX
The box had hinges at the back so the top part could be lifted up and down. This allowed users easy access when putting pom poms inside. The top row of pompoms was later took off because it was redundant to have, plus if the wood was lifted the pom poms would be obstructed.
Thesis Show Photo - process
Creating The Dataset Collection
Now I needed containers for the pompoms. My idea was that I needed containers below the box aligning with each tube so people are able to pick a pompom and put it in the corresponding tube.

I also wanted people to wear pins around the exhibition. Once they leave my exhibition space, they are able to see other people with similar personality types.
Sketch of thesis wall
Sketch of Exhibition Wall
Pom pom colors
Initial Pom Pom Jars
Pom pom container first iteration
Initial Pom Pom Jar
pom pom pins
Pom Pom Pins
My initial pom pom jar was a little cheap looking (I was on a budget...) but luckily this was around my birthday and I got Amazon gift cards!! 

All that was left was cutting out my drawings and gluing them on glass jars, putting safety pins on pom poms, and then actually setting up my work.  
Container for pom poms final
Containers for pom poms
Upgraded Pom Pom Jars

RESULT

Putting It All Together
BEFORE EXHIBITION NIGHT
I would say the biggest difficulties for my thesis project was coding it, but also planning out how my design will exist in physical space.

I was essentially building stations for people, where they take the test, take a pin, then give their result. I only had one wall, so space was limited. In a design show of 40 people, I was nervous my work would be looked over.

I only had a week to assemble my wall so I had to work extra hard to make it happen!!  
Thesis Show Photo - process
My exhibition wall before I put anything up, it was around 12 feet wide by 14 feet high.
Box drilled to the wall
DURING EXHIBITION NIGHT
As I mentioned in the beginning, my site got over 100 users and results from just the exhibition night. I would say this is a big hit, because there were around 100 in attendance.

It felt so great to see my peer's work and see so many people enjoying my work. People were very drawn to my exhibit, I think the iPads and colors helped attract more people.  

While it was exciting and people loved it, there were also moments of confusion from my users.

As the night passed, there were many people at my work. A line formed behind the iPads.  
Thesis Exhibition Night Photo 3
Thesis Exhibition Night Photo 2
Thesis Show Photo
AFTER EXHIBITION NIGHT
Here are some photos after the exhibition was done. Throughout the days of the exhibition I actually had to take out some pom poms to make room for more, I just reused them. But for the pins, I left them to be empty. As you can see in the photos, the green and orange pom poms were the highest. I am unsure if my code was biased or because there were so little questions a trend was forming.

REFLECTION

Successes
1. People were attracted to my project + High return rate
‍People stayed around for an average of 5-10 minutes for my exhibition. It was not just people taking their time with the quiz, but conversing with friends and family on the results they got.

I saw people coming back to my work with their friends and making them take the quiz. This was positive, because it was entertaining enough that people were coming back and sharing it with others.  
2. Easily understood by audience
I saw people taking my test and not needing many instructions. It made me relieved because I had a fear people would not understand what to do. But people took to it like a fish in water!  
3. Positive Feedback
My goal was for people to talk to one another and enjoy my project. This was a huge success, as people were talking and laughing with the results they got. People would tell me the personality result was accurate, and if it was not accurate they would point out the parts that were.
What Could I have done better?
1. A stronger & more cohesive design language‍
Something I wish I did better was making my designs more cohesive. As of right now, the design language of the results page and the illustrations are a little too separate. I think next time I will just use vector art instead of combining vector with non-vector. This would make the design language more cohesive.
2. Thinking about the physical as well as the digital realm
People rely heavily on intuition, this applies digitally and physically.  
While people easily understood how to navigate through my online quiz, people had a harder time with the physical stations. People would not read the signs and would go through my work just based on instinct. For example, they would go left to right, see a pom pom that was meant to be worn, but then put it in the tube. This is because of the left to right motion and how people have been doing this since birth.

Another thing I noticed was that people did not take the test on their phones, and lined up to go on an iPad. There were so many people the QR code was covered (I was suffering from success).

Also, the iPads were so close to each other sometimes were afraid to go towards the middle iPad.
3. Marketability & Business Perspective
I wish I better incorporated an online presence with my work. Perhaps a quick fix would be a "share" option at the end of my quiz where it will prompt a user to open an app like Instagram and share it on their story. For the future, I will think of marketing and sharing my projects to make a strong online presence.  
What is next?
1. Working on my own marketability
I would like to share my work online and gain more of an audience for creating these fun tests! 
2. More coding + design, UX design, and having fun
I really enjoyed combining my skills with coding and design/ illustration to create an interactive work. I hope I can strengthen my my user experience and user interface design skills to create more work. I still have much to learn about design in general, and I am excited to do so.

Hey!

Thank you for visiting my website!
If you would like to get in contact with me, click on the icons to the right!
Find me here!