RE-VISION
UI / Research
Tools:
Figma | Illustrator | Photoshop
Collaborated with:
A Personal Project for a Course
This project is an interactive web experience about how the influence of 80s science fiction costume design contributed to the evolution of gender expression. In this project you will get to a chance to re-vise these 80s costume pieces based on how you want to express yourself.
IDEation
Captivated by the role of fashion in 1980s movie costume design, especially within the realm of Science Fiction, my exploration delves into the cinematic landscape and its far-reaching societal implications. When exploring science fiction, my mind instinctively conjures images of film directors attempting to predict a future shaped by advanced science and technology.
RE-VISION landing page
try it yourself!
Below is the interactive site. Explore all pages and discover the story behind its creation here!
this is how I made it *
user research & findings
My research highlighted the reflective role of costume design, unveiling a stark absence of varied representations in feminine power.
Research paper
This research demonstrated how costume design echoes the broader societal norms of the 1980s, where power predominantly aligned with masculine attributes and evolved to what we see today. As I utilize costume designs as a reflective tool to explore 5 themes under this topic, this data becomes compelling evidence of the impact these themes have had on shaping our own perceptions of gender.
Themes:
Hyper Masculinity
Power Dressing
Hyper Femininity
Blue vs. Pink
Androgynous Fashion
Read my research in detailThemes:
Hyper Masculinity
Power Dressing
Hyper Femininity
Blue vs. Pink
Androgynous Fashion
User journey
After conducting user testing, I needed to make adjustments to my user journey to better communicate my research and modify the hierarchy and priorities accordingly.
User journey map
Manuscript
Each section, consisting of a top piece and a bottom piece, was prototyped separately and edited individually. I followed the initial user journey as designed for my design. Overlays were edited and prototyped for each piece, curated from a collection I gathered on Google Docs, following a manuscript.
Screenshot of the manuscript
initial Iteration *
Go THROUGH MY FULL PROCESS JOURNEY
Prototype
Below is a screenshot of my Figma prototype connections
Figma prototype connections
User testing feedback notes and checklist
User testing
Once designed I sent my prototype to for user testing to multiple people and received so much feedback that allowed me to make final touches to the site. This allowed me to make it interactive and pinpoint minor prototyping + copy errors.
These are some but not all of the feedback I've received from both design expert peers and non-design peers.
These are some but not all of the feedback I've received from both design expert peers and non-design peers.
Final design *
Landing Page and Movies
Below are some of the panels in the landing and exploration sections of the selected movies you will experience on the interactive site journey.
Landing and Movies Panels
Dress up experience
The dress-up experience is truly phenomenal. You can click back and forth to change the top and bottom pieces separately, while hovering over each piece reveals not only the movie it's from but also its related theme and significance. Each overlay features a "Buy it" button, allowing you to purchase the item if you're interested. Clicking on the button will redirect you to a buyer's page where the piece is originally from. This feature served as a solution for referencing images within the website.
Dress up experience from my screen
Research Pages
These pages enable me to provide context for my entire interactive site. They highlight selected and significant research behind it, provide context regarding why I chose this topic, and also include a reference to my paper for readers. This allows people to understand the purpose of this site while experiencing it.
Research panels
Takeaways *
Final dress up page
Final TV channel Setup
One key takeaway from this experience is the importance of resilience. Despite encountering setbacks, such as losing my work few weeks before deadline, I persevered and ultimately created something meaningful. Additionally, I learned the importance of understanding my target audience and tailoring my design choices to suit their needs and preferences. While this was challenging it also strengthened my project.
Looking ahead, my next steps involve enhancing the gamified section of the site by adding more image choices and referencing more 1980s movies. Furthermore, I aim to transition from a prototype on Figma to a live website, potentially by either developing it myself or coordinating a developer handoff. This transition will mark the culmination of this project and the beginning of its broader accessibility to users.
Looking ahead, my next steps involve enhancing the gamified section of the site by adding more image choices and referencing more 1980s movies. Furthermore, I aim to transition from a prototype on Figma to a live website, potentially by either developing it myself or coordinating a developer handoff. This transition will mark the culmination of this project and the beginning of its broader accessibility to users.
RE-VISION on a laptop
.webp)