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
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.
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.
COMPLETED SITE
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.