Paradigm
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.
Role: UX/UI Designer, Visual Design, Video Editor
Responsibilities: Ideation, Visual Design, Prototyping, Development
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.
Defining the Users:
In our research, we found those who would most often use a time-travel history website:
-
Generalized users
-
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, reflecting it in a user persona here. Users generally want to file and sort through the information they will learn on the website, which is why keeping the user interface simple with consistent controls is an important aspect we wanted to have. As we moved forward with our design, we wanted 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)
Alice Ko Persona (2020)
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, 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, we created our first prototype of the website with the z-axis scrolling in order to understand what the code organization would have to look like in order to achieve this effect.
Using that prototype, we used HTML, CSS, and JavaScript to create the parallax effect of the site with the logic we learned from Webflow for this visual design.
See pgs. 2-5 for Paradigm-specific code
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.
