Retro2Future

Role // Hackathon Group Project
Duration // Feb 2023
Tools // Figma              
I branded and designed a website mockup for Retro2Future: a 3D modeling program that renders 2D VTI medical files (ie. X-rays) in 3D space. This project won “Most Disruptive Technology” at TartanHacks 2023

Ideation

Design Inspiration

TartanHacks 2023 theme was “disruption,” and my team and I wanted to emphasize this in our modeling program.

I first boiled down what our product’s purpose was at its core: transitioning 2D into 3D - turning old into new. Immediately, I thought of “Y2K” and its resurgence in popular culture. The 2000s were over 20 years ago, yet its aesthetics have bleed into current day, shaping into something new. 

As I did more research into the original Y2K movement, I learned that it served as a “positive disruption”. Its bright colors and shiny metallic clothing contrasted an extremely pessimistic atmosphere of 9/11 and “The Year 2000 Problem”. Since our product “disrupts” 2D renderings by making them 3D and thus more readable, I sought to highlight as a “positive disruption.”

I also came up with the name of our product: Retro2Future, in reference to Retrofuturism, which has ties to Y2K and represents an optimistic future painted in the past. 

Initial Sketches

To launch our product, we resolved to create a website that provided necessary background info, our program in an easy-to-navigate format, and a contact page.

Before working on our prototype in Figma, I created sketches of each website page. I wanted to emphasize Y2K themes throughout and make it clear how it connects to our product. I also drew out how users would navigate our website with various arrows. 


The Mockup

My team member Yujun and I worked on the Figma prototype. We decided on a general metallic purple, gold, and silver color along with futuristic fonts for a cohesive Y2K aesthetic. 

We wanted the transitions between pages on the website to be seamless for the user, so we created a quick-fade every time the user clicked on a page. Moreover, to highlight when the user was hovering over a clickable button (ie. the start button on the homepage), the button would appear in a slightly darker color. 


Final Product





Try out the Figma prototype here!


What I Learned
1. How to use Figma‘s prototyping features, creating my first interactive UI!
 
2. A product can be powerful on its own, but branding is what makes a product significant. 

3. The feedback and brainstorming when working in a team is really great for developing new ideas.
Next Steps
1. Tinkering more with prototyping features (ie. scrolling, carousel images, etc.)

2. Creating full-fledged “contact” and “model” pages for a more realistic user interface.

3. Becoming more involved with the technical aspects of the product (ie. code) to have a better grasp of the product overall.