Without My Hero
Without My Hero
Background_edited.png
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.

ABriefHistoryOfTimeTravelImage.png
AliceKo_PersonaCard.png

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)

Z-axis_Scrolling.png

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.

Webflow_1.png

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!

paradigmwebsite_version3.gif

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.

Storyboard

Video Prototype

Let's connect!

  • linkedin
  • YouTube Channel