[Prototype] Interactive Website – Chloe Jeong

For my interactive prototype, I want to explore color psychology and how color matches with certain personality traits. My prototype would be a Meyers Briggs personality test that not only gives the user a personality type but also color interpretations of their personality.

[Research]- most of the research for this project is for color psychology and how colors relate to certain traits. For the prototype I will be using my own MBP results (INFJ). INFJ personality has traits such as creativity and insightfulness. I did some research to find what colors represent such traits. The colors I found were oranges, reds, and yellows.

[Protoype 1]-Proof of concept, Paper

For the first round of prototyping I made a paper prototype for an app where the user will take the test and will be given a moving color interaction at the end of the test where the little animation would move to the user’s heartbeat.


After user testing, I realized that the finger print aspect was too much and just unnecessary. I also had the question of if this were to be a mobile app would they download it. The question of storage and usage came up. This test seems to be a one time thing so having an app downloaded would turn the user away. The color palette was also questioned. Because there was a set color identity, the user believed that that created some kind of bias which I completely agree with.

[Protoype 2]- User Experience, Paper

Taking into consideration from the previous testing, and decided to change the original idea into a website. This way the user doesn’t feel the obligation to download an app. I also made the colors to change as the test proceeds and it gets a glimpse of the user’s personality as they take the test. IMG_4955.jpg

So after this round of user testing, I got a better response from the user. They liked the idea of the bars changing colors. I asked the question if at the end there should be a moving image and they said it may not be necessary but could be cool to have.

[Prototype 3]- User Experience and development, digial

From the paper prototype I started to move on to the development of the digital prototype. This time I focused more on the aesthetic appeal of the website and went for a minimal look. I decided to change the moving image to just a color analysis. This makes it less confusing for the user on why there is a moving image.

Screen Shot 2018-03-07 at 3.54.54 PM.png

During the user testing, I asked if a question a page was too much and some users said yes some didn’t so now I have to decide on how to fix this problem. I got a pretty good response from the testing and will now proceed with the digital prototype and proposal.

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