Role(S)
Designer
Story-writer
Responsibilities
Web Design
Personality Test
User Interface Design
TOOLS
Figma, Illustrator, Procreate
timeframe
May 15-18, 2024
(3 days)
Personality Test Design
TEST LINK
00
Introduction
WHY THE TEST?
This is a passion project between my friend, Shayne (Drew) York and I– two friends that love taking personality tests
… so why not make one?
Take the test HERE
+ Test is way better on mobile btw (˶˃ ᵕ ˂˶) .ᐟ.ᐟ
Scan here to take my personality test
view work
OBJECTIVE
Create an interactive personality test website by my senior show date – May 18.
VALUE
I wanted to have something fun that visitors can interact with at my senior show booth.
Project Roadmap
Here's the process for how we created our test.
04
Illustration
01
The Research
02
Storyboarding
03
Wireframing
05
Character Design
06
End
How did we do it? Scroll down to view our research :)
After some brainstorming, we felt that
superpowers
had the most potential
and variety. We felt that the topic is fun, interesting, and well-known.
Why superpowers?
Kitchen Appliances?
Animals?
#@!
Nahh...
Anime?
01
The Research
After deciding on doing superpowers, we had to pick and organize potential powers that were going on our test.
Creating a perceptual map with different power archetypes helps with sorting personalities.
Super Power
Archetype
Heroic Archetypes
Villainous Archetypes
Mythological Archetypes
Everyday Archetypes
Telescopic Vision:
attention to detail, observant, bystander.
Accelerated Healing
caring, motherly, protector, selfless,
Animal whisperer
Caring, good intentions, good with socializing
Plant-Whispering
Caring, DIY, slow & steady, good intentions,
Super Strength (the jock)
Somewhat dumb, gigachad, not bad or good, doesn’t make good decisions, protector
Time-travel:
practical & logical, structure is important
telepathy
manipulative, drama-queen, looks through your phone, a b*tch
9 lives
the daredevil rahhhh, someone that is a risk-taker
Invisibility
evasive, secretive, outlier
cupid
loves social connection, finds energy from people
Pictomancy
creative.. literally lol, the artist, introverted
Shape-Shifting
creative, makes unique choices, brave, confident,
Dream-walking (entering one’s dreams)
manipulative, creative, devious, trickster
atmokinesis
mooooody, can create hell for everyone, if this person loses their vape, everyone is gonna have to stop what their doing and find it.
Pyromancy (Firebending)
Innately bad(?), evil characters, save themselves before others, hot-tempered
Necromancy (communicating with the dead)
Loners, rather be by themselves, makes weird decisions, outliers
The Hero (superhuman)
the leader, truly good, honest, selfless, good at communicating & executing decisions
Super Villain
self explanatory(?), just likes being in control, doesn’t like hearing from others
Teleportation
efficiency first, law is right, model citizen, busy
neutral
good
bad
note:
this indicator was only used to determine what archetypes are associated with the superpowers. i.e. accelerated healing is normally associated with good.
We decided to use the Myers–Briggs Type Indicator Test personalities (MBTI) to sort the powers, thus creating 16 superpower results. Here’s the chart we used to organize the personalities and powers.
INTJ
INTP
ENTJ
ENTP
INFJ
INFP
ENFJ
ENFP
ISTJ
ISFJ
ESTJ
ESFJ
ISTP
ISFP
ESTP
ESFP
Name
Popularity
Description/
Summary
Potential Superpower
The Architect
(Introverted, Intuitive, Thinking, Judging)
The Logician
(Introverted, Intuitive, Thinking, Perceiving)
The Commander
(Introverted, Intuitive, Thinking, Perceiving)
The Debater
(Extraverted, Intuitive, Thinking, Perceiving)
The Advocate
(Introverted, Intuitive, Feeling, Judging)
The Mediator
(Introverted, Intuitive, Feeling, Perceiving)
The Protagonist
(Extraverted, Intuitive, Feeling, Judging)
The Campaigner
(Extraverted, Intuitive, Feeling, Perceiving)
The Logistician
(Introverted, Sensing, Thinking, Judging)
The Defender
(Introverted, Sensing, Feeling, Judging)
The Executive
(Extraverted, Sensing, Thinking, Judging)
The Consul
(Introverted, Sensing, Thinking, Perceiving)
The Virtuoso
(Introverted, Sensing, Thinking, Perceiving)
The Adventurer
(Introverted, Sensing, Feeling, Perceiving):
The Entrepreneur
(Extraverted, Sensing, Thinking, Perceiving)
The Entertainer
(Extraverted, Sensing, Feeling, Perceiving)
2.1%
3.2%
3.3%
1.5%
1.8%
4.4%
13.8%
2.5%
8.7%
8.8%
8.1%
12%
4.3%
11.6%
5.4%
8.5%
Strategic and analytical, INTJs are innovative thinkers who excel at solving complex problems and implementing long-term plans.
Curious and analytical, INTPs are innovative thinkers who love exploring new concepts and ideas, often challenging conventional wisdom.
Strategic and assertive, ENTJs are visionary leaders who excel at planning and executing complex projects, often taking charge and inspiring others to achieve their goals.
Inventive and resourceful, ENTPs are quick thinkers who enjoy debating ideas and challenging the status quo.
Visionary and empathetic, INFJs are insightful and idealistic, driven by a strong sense of purpose and a desire to help others.
Idealistic and imaginative, INFPs are passionate and values-driven individuals who seek harmony and authenticity in their relationships and pursuits.
Charismatic and empathetic, ENFJs are natural leaders who inspire and motivate others, often driven by a desire to make a positive impact.
Charismatic and creative, ENFPs are enthusiastic and empathetic individuals who are passionate about exploring possibilities and inspiring others.
Practical and responsible, ISTJs are systematic, detail-oriented individuals who value order and structure.
Compassionate and dependable, ISFJs are nurturing and loyal, often placing others' needs above their own.
Practical and organized, ESTJs are assertive leaders who value efficiency, structure, and tradition.
Sociable and conscientious, ESFJs are nurturing and supportive individuals who prioritize harmony and social connections.
Adventurous and pragmatic, ISTPs are hands-on problem solvers who thrive in challenging situations and enjoy exploring new ideas.
Creative and spontaneous, ISFPs are artistic and empathetic, valuing personal freedom and authentic self-expression.
Energetic and adaptable, ESTPs are action-oriented individuals who thrive in dynamic environments and excel at navigating challenges.
Enthusiastic and spontaneous, ESFPs are fun-loving and social, valuing experiences and connections with others.
Dream-walking
Necromancy
Super Villain
Shape Shifter
Telepathy
Weather Control
Super Hero
Cupid
Telescopic Vision
Accelerated Healing
Time Travel
Animal Whisperer
Nine Lives
Pictomancy
Pyromancy
Power Mimicry
We also used this website to determine the best and worst matches for the MBTI types.
After we had all the powers and personalities figured out, we needed to create a narrative for the test– something fun,
something fantastical
02
Storyboarding
Storyboarding
Since we used MBTI as the foundation for this test, we studied what each of the letters meant, and arranged the questions according to the four categories: introversion or extraversion, sensing or intuition, thinking or feeling, and judging or perceiving.
We created 3 questions per category. Each question consists of 2 answers, determining the letter indicator for the personality type. The trait is assigned based on the predominant response chosen.
Here is the diagram we used for our outline.
question 1
Extroverted
Introverted
question 5
Extroverted
Introverted
question 9
Extroverted
Introverted
question 2
N(intuition)
Sensing
question 6
N(intuition)
Sensing
question 10
N(intuition)
Sensing
question 3
Feeling
Thinking
question 7
Feeling
Thinking
question 11
Feeling
Thinking
question 4
Judging
Perceiving
question 8
Judging
Perceiving
question 12
Judging
Perceiving
I wrote a fantasy, choose-your-own-adventure story to guide our users through the sorting process.
Extraversion vs. Introversion
It’s a nice sunny morning, you wake up, yawn, roll over, and notice an envelope on your nightstand.
1
A letter? I wonder what it is. You open it with excitement
Hmm.. I wonder what this could be... You open it with caution
I(N)tuition vs. Sensing
Before you can open the envelope, it flips around and says “I’ve been waiting to meet you, hero.”
2
I don’t care if this is a dream or not I’m soooo ready for this.
Is this real? What is even going on??
Thinking vs. Feeling
What are you waiting for hero? Are you ready to join us?
3
Hold on, I have to go to work, feed the cat, brush my teeth…
I have to tell my mom and my friends, wait...
Judging vs. Perceiving
The envelope grabs your hand and brings you through a portal.
4
OMG, Where am I going? How is this even possible? I’m gonna get a headache from this.
No way! This is so cool!
You are brought to another world with lush green fields and purple skies. You look around and notice the envelope is gone, but you see two people nearby.
Extraversion vs. Introversion
You walk towards them and notice they are humanoid cats! They notice you and approach you asking if you need a guide. You agree and you choose:
5
Haru, a chatty and friendly cat.
Boo, a silent and honest cat.
I(N)tuition vs. Sensing
As your guide is taking you around the town, you realize the city is pretty far. What transportation do you choose?
6
A unicorn, I don’t know how to ride one yet, but it looks fun and I’m sure I can figure it out.
The car, I know how to drive one and I can get to the city ASAP.
Thinking vs. Feeling
You reach your destination and you see a garden and a castle, which one do you choose?
7
The castle duh! I need to figure out what all this is about.
The garden, I wanna meet new friends and explore the beautiful land.
Judging vs. Perceiving
After choosing, you look around a bit and end up seeing a troll. What do you do?
8
Approach him and quickly ask him to tell you where to go.
Kindly ask him where you should be headed and take your time chatting with him.
Extraversion vs. Introversion
The troll tells you that you must enter through a cave to find what you are looking for.
9
I can’t wait to see what’s waiting there for me, perhaps a magic sword?
A cave? Is there no other way?
I(N)tuition vs. Sensing
You start going down the cave and see a sleeping bear, with what seems to be a glowing scroll, what do you do?
10
Take some time to figure out the best possible solution to take the scroll without getting hurt
Take the scroll as quietly as I can and book it.
Thinking vs. Feeling
Before you make your move, the bear wakes up and growls at your presence. What are you doing?
11
Running and fighting
Hmmm... the bear is kind of cute. I will try my best to reason with it.
The bear pounces on you and you blackout.
Judging vs. Perceiving
You wake up in your bed. You look around and see that the envelope is in your hand.
12
That had to be a dream right? I’m glad I’m out of it.
OMG, I’m glad I’m back, I wonder what the envelope says…
You open the envelope...
With the story and answers completed, we were then able to test the questions on a couple of friends to ensure that the test would achieve somewhat accurate results.
Since we were on a time crunch, we only tested this on 10 people and attained an 80% accuracy score.
03
Wireframing
Wireframing
We wanted the test to be straight-forward and easy to follow, so I designed a minimal, mobile website.
Question
answer A
answer B
01
illustration
question cards
result cards
How did the final result look like?
04
Illustration
Illustration
I chose to have a colorful, sketch-y illustrative style for the test.
The envelope
Haru
Boo
The Troll
The Bear
Haru & Boo are actually based off real cats :)
Here are the question cards:
05
Character Design
Character Design
My goal for this section of the project was to create something simple, bright, and memorable, thus creating colorful icons for each superpower.
Superpower characters with MBTI
SHAPE-SHIFTING
ENTP
NECROMANCY
INTP
DREAMWALKING
INTJ
SUPERVILLAIN
ENTJ
TIME TRAVEL
ESTJ
ANIMAL WHISPERER
ESFJ
NINE LIVES
ISTP
PYROMANCY
ESTP
ATMOKINESIS
INFP
SUPERHERO
ENFJ
CUPID
ENFP
TELESCOPIC VISION
ISTJ
TELEPATHY
INFJ
ACCELERATED HEALING
ISFJ
POWER MIMICRY
ESFP
PICTOMANCY
ISFP
I was heavily inspired by the Taiwan Design Expo Personality Test when designing the ending cards.
I chose to create cards as it easily shareable, engaging, and fun to look at. The phrases and adjectives are used to describe both the archetype of the power and the personality of the associated MBTI.
Here are the result cards:
06
End
so... what was the outcome?
One of the goals of this test was to have this done by my senior show date: May 18-19, 2024. I wanted to have a fun interactive element for my show booth.
view my highlights
me setting up lol
my booth
my interactive q&a wall :)
Recognition:
Tiktok by @graceshin68
view video
Tiktok by @stephikuma
view video
Tiktok by @ttawanyn
view video
article by Prestige (Sara Yap)
view article
+ TikTok Comments from viral videos of my test.
Conclusion
Overall, this was a fun project to work on. Despite being extremely last-minute, we pulled it off! :) The research and creative process of creating this test was fascinating—if I had more time, I’d love to create another one. I'm satisfied with the results and thrilled that people are enjoying it. As of June 8th, 2024, we have reached over one million users! Thank you so much <3