Duration // Feb 2023
Tools // Figma
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.
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.
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.
Try out the Figma prototype here!
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.
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.