Role: Sole Visual Designer, UX Researcher and UX/UI Designer

Timeline: ~4 weeks

Tools: Adobe Illustrator, Figma, Wix, Velo by Wix

Who Are You
Interactive Website

PROBLEM

Identity is often thought of as something that is informed directly because of your culture and ethnicity. However, you have to consider the complexity of intersectionality, as many aspects of your life come together to be combined into forming your self-conception.

GOALS

  • Design an interactive website to reassure those who are still finding who they are, and challenge those who are sure of their identity

  • Recount my own personal journey of finding my identity

1. DISCOVERY

COMPETITOR RESEARCH 

When conduction research to find out if this project had been explored before, this is what I found:

  • Although the concept of identity had been explored before, there hasn't been a website developed to explore it

  • "Who Am I" is an app project developed as an interactive social experiment and gallery found in the Apple App Store. It allows people to write about themselves, and explain what the question "Who Am I" means to them.

PROCESS

I wanted to create a project that challenged me into understanding and exploring my identity while improving my web design, digital illustration, and animation skills. Unlike other projects, I found it interesting to find that I followed a completely non-linear process, as I kept going back and refining aspects of the project.

STORYBOARDING

To brainstorm ideas on how to properly illustrate my story and animate it accordingly, I did some small sketches and storyboarding to 

IMG_7635.png
2. INTERACTION DESIGN

USER FLOW

After brainstorming, I mapped out a user flow to understand the path the user would take. It also helped me identify which section had to be coded. I noted which inputs the user had to enter, and how it would output them as well.

DIGITAL ILLUSTRATIONS

After drawing some sketches, I moved on to create these digital illustrations to represent the different stages of my story. I used my Wacom tablet and adhered to the color scheme on the style guide.

MICRO-ANIMATIONS

To add interaction to the site, I created some micro-animations to some of the illustrations using Adobe After Effects with the purpose of bringing my story and illustrations to life.

suitcase.gif
volleyball.gif
4. VISUAL DESIGN

SITE PERSONALITY

The color palette for the site was one of the aspects of this project that I kept changing the most. I wanted to create my site using a dark-mode color palette while adhering to the color contrast and accessibility guidelines.

mockup1.png
mockup3.png
5. NEXT STEPS

The next step I would take to continue improving on my design would be to add more micro-animations and interactions throughout the site to create a more engaging and personalized experience for the user. Additionally, I would like to refine the rendering of some of the GIFS, as some didn't export properly.