Digital Identities Interactive Exhibit

An interactive exhibit for Imagine RIT 2019 designed to allow visitors to visualize their individuality through personal expression and image abstraction.


This semester-long senior capstone project was designed and developed by Alex Kim, Shelby Mason, Caren Flohr, Erika Kallio, Ian Loomis, Matthew Freeberg, Patrick Bell, and myself.


January - May 2019


UI/UX, Development

Imagine RIT Recap

Imagine RIT


We were tasked with creating an interactive exhibit for the Rochester Institute of Technology's 2019 Imagine RIT: Creativity & Innovation Festival, and with a loose prompt of "Do Good", the possibilities for our senior capstone project were endless.


Adam Smith, of the New Media Design program, and Sten McKinzie, of the New Media Interactive Development program, collected short questionnaires from seniors of the two majors and divided them up into eight teams to work together on projects for the annual festival.

Meet the Team

The Team


Our team consisted of five New Media Design majors, two New Media Interactive Development majors, and one design student on exchange for the semester from Dessau, Germany.


After coming together to meet a few times to discuss what our project should be about, we made the decision to focus on individuality in the age of social media.



Research shows that "social influence is a powerful force in nature and society" and that, while useful in certain circumstances such as avoiding dangerous situations for animals or getting the best smartphone on the market, it can lead to "individuals [devaluing] their own personal information in favor of imitating the actions, or opinions, of others."


This idea is just as prevalent in social media. One article tells us that "differences between our “real” and online identities can shape not only how others perceive us but our self-perceptions, creating pressure to be more like the often idealized digital versions of ourselves and our peers," and another argues that the "shift in identity, from internally derived to externally driven, can't be good for us as individuals nor for us as a society."

Our Solution

Quiz Station

Taking the Quiz

Visualizing Individuality


In order to get away from the pressure to conform, we decided to provide visitors an opportunity to visualize their individuality through personal expression and image abstraction.


Visitors would answer a few questions about themselves and their personal preferences through an interactive survey and their answers were translated into an abstracted visual representation of what makes them unique.

How do we visualize identity?

February Mockup 1

February Mockup 2

February Mockup 3


After some initial color tests, we decided to go with a bright and neon type of theme for the project. We wanted people to be loud and proud when it came to their personality so we figured bold colors would help accomplish this.

March Mockup 1

March Mockup 2


Since our art was going to be generated using personality quiz answers, we had to create a design system that would look cohesive no matter what inputs were used. We played around with symmetry and asymmetry to give our concept art the feeling of generated art.

March Mockup 3

March Mockup 4


In order to create more visual interest in the portraits, we then focused on putting elements in the foreground, middleground and background to create a greater sense of depth.

March Mockup 5

March Mockup 6

April Mockup 1


Adding each of these elements together pushed our mockups in a direction that we were all super interested in, and hoped that our excitement would be passed on to our visitors.

Defining a Brand

Logo Iteration 1

Logo Iteration 2

Final Logo Design


Now that we had a visual style for the generated art, we started to build up the brand to support the project. Our early logo concepts reflected our early mockups but as the style developed, so did our brand identity.

The Quiz

Start Quiz

What is your name?

What is your birth month?


In order to create a unique portrait for each and every person, we had to come up with a list of questions that would influence the art in different ways for everyone. We decided that a good starting off point was a person's name and birth month.

Would you rather live in the city, suburbs, or country?

How does pineapple on pizza make you feel?

Are you a morning person or a night owl?

Do you prefer dogs or cats?


The next set of questions were more focused on how a person answers more preference-based questions such as where they would want to live, if they're a morning person or a night owl, if they liked cats or dogs more, or even how they felt about pineapple on pizza.

On a scale of 1 to 5, how messy or organized are you at home?

On a scale of 1 to 5, how likely are you to go out to a party?

Do you consider yourself more methodical or spontaneous?


These questions are more based on how a person sees themselves such as how messy or organized they think they are, if they're more introverted or extroverted, or if they consider themselves more methodical or spontaneous.

Review Your Answers

Unique ID


Once the user answers all the questions, they get a review of how they answered and then are assigned a unique ID number that is associated with their stored results on our backend server.



Google Firebase


We used the JavaScript library p5.js for our image generation for its full set of drawing capabilities that play nicely with HTML canvas elements.


Since we wanted people to take the quiz and view their generated art on different devices, we needed a way to transfer that data across platforms. To accomplish this, we used Google Firebase to store the answers from each quiz submission.

Displaying Letters

Creating Gradients

Variety of Shapes


Early on in the development process, we played around with how different elements would be displayed on the final artwork. We decided against using recognizable letters in favor of more abstracted shapes and gradients but needed something more deliberate than randomly placed objects.

Developed Mockup 1

Developed Mockup 2


As the designers of the group honed in on a more specific direction towards the final pieces, the developers started replicating their mockups in p5 so we had examples of how to create similar shapes.

Input Mockup 1

Input Mockup 2

Input Mockup 3

Input Mockup 4

Input Mockup 5


After starting to build up a code library of a variety of shapes and elements, we started to test which questions would affect the different portions of the art.

Generated Art Example 1

Generated Art Example 2

Generated Art Example 3

Generated Art Example 4

Generated Art Example 5


Finally in the nick of time, we finalized the image generation program and started going around to a small trial group to take the quiz and test it out so we could squash any bugs and make any final decisions about how the questions would affect the art.

What affects what?

Building the Platform

Homepage Mockup

About Page Mockup

Blog Mockup


We built our platform using React.js and WordPress to deliver a seamless experience to our visitors. The website would house everything from information about the project and blog posts with how things are going, to the actual quiz and image generator.

Quiz Page



When the user takes the quiz and submits their data, it's uploaded to our Firebase server and they are given their own unique ID code. When it comes time to generate their artwork, they can simply enter their code and then our p5 algorithm generates their personalized art.

Printed Banner

Designing the Exhibit

Exhibit Diagram


To take advantage of our space in the most useful way possible, we designed the space to introduce people to the project right when they walk in the door, prompt them to take the quiz, lead them to the projector where they can view a large version of their generated art and even take a picture in front of it, then be led towards swag in the form of stickers and glowsticks, and finally view the debrief where they learn about how their image was created.

Pictures with Portraits


We had a steady stream of people from all walks of life coming through our exhibit during the entire seven hours of the festival! With over 550 quizzes completed throughout the day, we were very proud with how things ended up. Check out some of the portraits we took during the festival on our Facebook page.

Taking the Quiz


Taking Pictures


The Digital Identities team was honored to have such a great outcome during Imagine RIT and would like to thank the following people for their support:

  • Basit Qaderi
  • Jess Wiltey
  • Joanna Burdett
  • Marci Martindale
  • Tanya Loomis
  • Ethelia Lung
  • John Pellico
  • Jacob Leighty
  • Susannah Stewart
  • Will Smillie

Group Photo

Survey Stats

Digital Identities

Check it out


Our exhibit was a one-time-only experience, but you can still see everything we made throughout the semester on the following pages:


If you'd like to take the quiz yourself, our website is the place to go. You can find the quiz page here and once you have your Unique ID Code, enter it on the generate page here.