UI / Research


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.


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.
side 2
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.


Hyper Masculinity
Power Dressing
Hyper Femininity
Blue vs. Pink
Androgynous Fashion
Read my research in detail

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
User journey map


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 *

This initial iteration follows a transition wherein I initially used Dora.run to construct my website. Unfortunately, it crashed two weeks before the deadline, leaving all my work uneditable. This iteration marks the beginning of organizing all my elements in Figma. Utilizing Figma this time proved to be quicker since I had already surmounted the learning curve and was acquainted with most of the tools. Drawing from my existing knowledge in Figma, I effectively integrated a loading screen, animated page transitions, and most importantly, circumvented confining myself to a single-scroll page.

Find out more about how I managed to get through the last minute transition here!
side 3
Pre-user testing landing page
Pre-user testing dressup panel


Below is a screenshot of my Figma prototype connections
Figma prototype connections
user testing
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.

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 intro
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.
RE-VISION on a laptop

more work*