[Project Proposal] Interactive Quiz Website – Chloe Jeong


Who are hUe is an online quiz that will interpret your Myers Briggs personality traits through color.

This quiz not only provides you your Myer’s Briggs personality type by examining your individual traits but also provides a visual aspect to personality. This quiz uses color psychology to match your personality traits to a designated color. The quiz has 10 questions where the user is able to answer using a spectrum. As the program gets a sense of the user’s personality the spectrum changes color.

Screen Shot 2018-03-21 at 11.41.50 PM.png

Phase 1: Define

There are tons of personality tests that defines the user. The Myers Briggs defines users into 16 personality types and offers am extensive analysis. Most analysis are only given through written statements. Most written statements become redundant and boring. I want to create a more unique experience for the user through:

  1. Providing visual representations of personality traits
  2. Using color psychology to determine the colors of a specific trait
  3. Using a minimalistic aesthetic approach to prevent users from distractions


Phase 2: Shape

Throughout the design process of this website, I looked at other personality test sites such as 16personalities to examine the design and user experience. I found that these personality tests often provided too much at once and made it easy for the user to get distracted. I think that when taking any kind of quiz, distracting elements are not helpful. I chose to focus on the purpose of a quiz and went for the most minimalistic approach I could do. The quiz is created primarily with simple text and focus on color.


Phase 3: Prototypes

Stage 1: For the first stage of prototyping I chose to focus on proof of concept by making a paper prototype of what the project would essentially be. The original idea was to make this quiz a downloadable app. Where the user would take the test and be given a dynamic visual.


Stage 2: For the second round of prototyping, I began to create a digital interface of the app. This round of user testing brought up questions if they would download this app and also the visual aspect of the app. The answers varied however because of storage issues and having to search for the app, the convenience issue would drive users away. Also the colors presented throughout the app create a bias-like structure.

Screen Shot 2018-03-22 at 2.56.35 PM.png

Stage 3: For the third round of prototyping, I changed the interface of the project and decided to make it a website that would solve accessibility and convenience issues. I did another round of paper prototyping and changed the color spectrums to be able to transform to match the user’s personality as they answered the questions.


Stage 4: For this round of prototyping, I started to develop the digital/final prototype of the app and I had questions for my user regarding the end results of this quiz. Because I wanted t continue with the minimalistic approach to the quiz, I asked if they user would prefer to see a simple color analysis instead of a dynamic visual. I did get mixed responses however in the end I decided to go with a simple color analysis to avoid the unnecessary elements most quizzes have.

Screen Shot 2018-03-22 at 3.06.16 PM.png

Final Prototype:

After the rounds of user testing, I continued to revise my website prototype to fit the needs and wants of the users. I used Sketch to create the interface of the website and used Principle to animate the app to create the final user flow.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s