Visualizing Yourself and Others
Project Type
Frontend Web
Year
2017
Client
General Assembly (Final Project)
Tools
Visual Studio Code, GitHub Enterprise, Chart.js
Overview
What I Did
HTML, CSS, JS, Visual Design
Project Type / Duration
Front-end Web Design/Development,
3 weeks
The Challenge
Structure, design, and style a site with HTML and CSS
Use JavaScript and jQuery to make the site interactive
Combine technical and design skills to create a responsive website that is compatible with mobile devices
The idea
Empathy is an important aspect of design, especially in UX and Service Design. The essential process of unfolding the true “colors” of others has always been a topic of interest.
With that, similar to my Thinking Cap Project, the inspiration for this project stems from color being attributed to personality.
It all starts with understanding who you are, so that you may be able to adapt how you communicate to/with others.
High-level Goal
To build an interface that enables the user to visualize their (or other people’s) color personality in real-time.
The Solution
The main call-to-action on the page is to select personality traits that resonate with the user. As traits are selected, a pie chart visual adjusts respectively.
Problem-solving
I wrote pseudocode for this project to gain a better understanding of interactions and order of operations. After some trial and error, I had to refactor some of the code (with the help of my instructor) to improve the flow of the experience. That involved reducing the number of interactions to keep everything on a single web-page, as well as using Chart.js to control the pie chart visualization.
What I learned
Javascript and jQuery = Not easy
How to build a front-end experience from scratch
How to design with more consideration of engineers and developers