Without My Hero
Without My Hero
Paradigm
Duration
3 months
Tools
Adobe XD
Webflow
Premiere Pro
Adobe Photoshop
Role
UX/UI Designer
Visual Designer
Video Editor
Deliverables
Overview
Paradigm was a design project for an educational website on the history of time travel. Our mission was to provide a clean, concise, and interactive platform for our users, one that does not currently exist on the market. Straightforward and comprehensible to all ages, Paradigm was intended to create a new experience of a story that has been told throughout various cultures for more than 2000 years.
Deliverables
Desktop Prototype
Pen & Paper
Webflow
Front-end web development
Tools
1 year
UX/UI Designer
Visual Designer
Role
Duration
Research
We started our research by collaborating with Gisella Bustillos. She is the director of "A Brief History of Time Travel", a documentary that explains different historical, cultural, and scientific aspects of time travel. She provided to us her research, including transcripts from the interviews she has conducted. We also used her documentary as the basis for how the information architecture of our website would work.
Alice Ko Persona (2020)
Defining the Users:
In our research, we found those who would be interested to use a time-travel history website:
-
General Audience
-
Educators
-
Time-Travel enthusiasts
-
Creators/Artists
Based on these archetypes, we looked into what these users would want out of a time travel website through interviews and surveys, reflected in the user persona here. Users want to file and sort through the information on the website, which is why keeping the interface simple with consistent controls is an important aspect to have. As we moved forward with our design, we want to prioritize these features:
-
Interactive visuals/aesthetic designs in chronological order
-
Clear and consistent controls
-
Simple interface design
-
Content filtration (pop culture, scientific, cultural contexts)
Design
Many websites we found about time travel history are very dry, with giant blocks of text that can be overwhelming to a first-time visitor. One thing we wanted to accomplish with this design was to break up the information in a more dynamic way. To accomplish this, we decided to add a unique feature: a parallax scrolling effect on the z-axis.
Inspired by BeerCamp’s website from 2011, we wanted our users to scroll through the site using parallax scrolling, recreating the experience of diving into space. In essence, the user will feel as if they are traveling through time and space.
Using Webflow, I created our first prototype of the website that functions on the z-axis scrolling in order to understand what the code organization would have to look like in order to achieve this effect. Click the button below to view it (double-click the view button in the top-left corner if the parallax scrolling does not work upon opening).
Using that prototype, I collaborated with another designer on our team to use HTML, CSS, and JavaScript to create the parallax effect of the site with the logic we learned from Webflow for this design. Check out the code for this in my GitHub account!
Prototyping
Note: We originally intended to film the video prototype, but with the pandemic, we were not able to meet up for production.
As an alternative, we decided to animate the illustrations of our storyboard.
