top of page
PastPort
What if you can travel through space and time for the ultimate immersive experience? Watch Mozart perform. Eat on a food tour in ancient Athens. Watch the Moon landing in person.
With PastPort, you can experience history.
Time Travel Made Effortless.
OVERVIEW
DETAILS
Company
Protothon 2024 - Online UX Hackathon
Time
28 hours
Team
5x UX/UI Designers
Tools
• Figma
• Figjam
• Photoshop
• Premiere Pro
• Discord
CONTEXT
Protothon 2024 is an annual UX hackathon organized by the University of Washington that’s open to the public. You form a team of up to five and have 28 hours to take one of four tracks and test your rapid prototyping and design thinking skills.
My team consisted of 5 early career UX designers, who didn't know each other beforehand. We weren't limited by what’s actually possible, so as a fans of sci-fi, the Space & Time Travel Track most intrigued us.
PROBLEMS
Our task is to design a mobile app that lets a user:
-
Discover events and places they could consider time traveling to.
-
Initiate and complete a time travel journey either to the past/future.
SOLUTIONS
Our answer is to design an app that lets you discover and book curated tours throughout history that let you experience events such as hearing Mozart live, taking a food tour in ancient Athens, or watching the Moon landing in person. Once you book a tour, our app teleports you to that time and place, and be led by a tour guide from that era for the ultimate immersive experience.
DELIVERABLES
We are to present a slide deck that showcases how a user will use your mobile app and all the features we want to highlight that address the problem. Judges will only look at the presentation for a total of 5 minutes.
PROBLEMS
Protothon (https://protothon2024.webflow.io/) is an annual UX hackathon organized by the University of Washington that’s open to the public. You form a team of up to five and have 28 hours to take one of four tracks and test your rapid prototyping and design thinking skills. You are not limited by what’s actually possible, so as a fan of sci-fi, the Space & Time Travel Track most intrigued me.
UNDERSTANDING THE PROBLEMS
CONSIDERATIONS
With anything involving time travel, you have to set up many rules and consider many issues to prevent the butterfly effect where a minor action made in the past by a time traveler affects the future. This provided a fun and interesting challenge in problem solving.
Protothon provided some of the issues we had to consider:
01
What are the constraints and rules of time travel you wish to establish?
02
How does a user decide when and where to travel to?
03
How does a user initiate a time travel journey?
04
How do they get recommendations for historical events, iconic locations, and scenarios they should check out?
05
How do users overcome language barriers while traveling through time?
06
How do users learn more about an individual they are meeting or seeing in time travel?
07
Can users save favorite memories and share memories?
08
What security and safety rules are there if any?
PROBLEMS
PROBLEMS
Protothon (https://protothon2024.webflow.io/) is an annual UX hackathon organized by the University of Washington that’s open to the public. You form a team of up to five and have 28 hours to take one of four tracks and test your rapid prototyping and design thinking skills. You are not limited by what’s actually possible, so as a fan of sci-fi, the Space & Time Travel Track most intrigued me.
Protothon (https://protothon2024.webflow.io/) is an annual UX hackathon organized by the University of Washington that’s open to the public. You form a team of up to five and have 28 hours to take one of four tracks and test your rapid prototyping and design thinking skills. You are not limited by what’s actually possible, so as a fan of sci-fi, the Space & Time Travel Track most intrigued me.
IDEATE
BRAINSTORM
Our team first brainstormed what we wanted to do with an app like this and how to answer these questions.
We each came up with ideas and people were most excited about curated time travel tours led by a tour guide.
With the idea of an app, now we have to problem solve those questions.
We wanted to protect the timeline and safety of our users, so we wanted our users to be non-corporeal and invisible to the people of that time. That way the traveler can’t affect things they encounter and vice-versa, keeping them physically safe.
The idea behind having a local tour guide is to guide the user, be able to communicate in their language, and make sure users stay on the tour and not venture off to possibly damage the timeline. The tour guide can see the travelers and can send users back to the the present in case they are in danger or are harassing others
But if you are non-corporeal, how do you experience food? We came up with the idea that if you pick up something, you can make a copy with which you can interact. Pick up a piece of food and you can taste and feel it! But if you were to let it go, it would disappear. This prevents people from taking things home.
COMPETITIVE ANALYSIS
We looked at Airbnb Experiences to get an idea of how apps display tours and what information might be relevant to our users. We wanted our app to behave similarly, just with the added dimension of time.
JOURNEY MAP
Through the use of a journey map, we empathize with what our users would experience as they go through a tour, possible pain points, and the value propositions of our app.
Due to time restraints, we didn't fully get to flesh it out completely. We wanted to sort our ideas, make sure we answered the core questions, and then move on.
USER FLOW
From this, we made a user flow to determine how the user would go across making their decisions, how to book and go through a tour, and determine what pages we need to highlight. For our team, we used this to determine what processes each of us would focus on.
User flow showing the process between first launching the app, finding a tour, booking the tour, experiencing the tour, and then returning to the present.
HOW MIGHT WE...
With these in mind, we wanted to make sure our app addresses the problem statement by considering:
-
How might we help users discover tours?
-
How might we keep the user and the timeline safe?
-
How might we allow users to really experience the tours through their senses?
PROTOTYPE
MINIMUM VIABLE PRODUCT (MVP)
For our MVP, we wanted to have the user go through onboarding, search for a tour, book a tour, and then experience the tour.
BRAND IDENTITY
For our style guide, we wanted to incorporate a lot of yellow/brown/red tones since that gives a feeling of history. We liked the idea of stamps to go with the passport theme from our name.
I created the accompanying graphic assets for thumbnails. I wanted to keep it fun and have a visual contrast the time traveler and the era they're visiting, so I went with a cartoony look to the figures and added a glow to show they're transparent.
1/5
Examples of thumbnail art
LOW-FIDELITY WIREFRAMES
We made some wireframes to make sure we're on the same page on the visual hierarchy. Since we're all working on different sections, this was important for consistency.
The Home page and Discover pages were used as examples of formatting and Hierarchy.
HIGH-FIDELITY PROTOTYPES
Because we had teammates on East and West Coasts, we had the west coast people work on making sure the v1 of high-fidelity screens, links, and all graphical assets were ready for the east coast members to continue work on the high-fidelity prototypes and make the sections consistent.
If you are interested in a certain period, there's a timeline view so you can search for what tours are available during a certain century.
We want to be able to let users search by both location and era.
If you are interested in Vienna, you can select that area and see what tours are available in what year.
You can save tours that interest you.
Let’s say you’re a fan of classical music and want to hear Mozart himself play. You can get the details of a Mozart experience tour, read up on the context of the tour, and then book the tour. You also get recommended tours based on this one.
Before the tour begins. we remind them of the time travel rules.
One of the main pain points we have to consider is discoverability. When you consider ALL the events in history that you could visit, it can be overwhelming. The home page has trending tours so you have vetted trips ready. There are also filters for highly rated tours.
PRESENTATION
CREATING THE DECK
We each worked on different slides for the presentation deck then tied it all together and make it consistent. In hindsight, we should've assigned this to one person and had them start it earlier.
One problem with the way we approached making a deck was since we all worked on different pages, we weren't able to have a linking story throughout. That might have helped the audience relate to this app.
IMPROVEMENTS
We followed one of the examples they offered, and I think this is where we could’ve improved. Our slide deck primarily focused on problem-solving and not enough on the user journey. We looked at an example that focused on pain points, which caused us to overly focus on pain points.
The winning presentations were able to incorporate storytelling that connected you to what the app has to offer. We could’ve made a persona and talked about their wants and goals and how they used the app. That would’ve resonated more.
CONCLUSIONS
OVERALL IMPRESSIONS
This was a lot of fun and I greatly enjoyed working on this prompt and with my teammates. 28 hours is not a lot of time, and I’m proud of the product we made. I liked that we didn’t have to consider what was actually possible in making into a product but they gave us some issues to consider to give some structure during ideation.
DIFFICULTIES & LEARNINGS
I was impressed that some teams were able to do user research or usability testing. Our team was working on the prototype and then immediately working on the slide deck so we didn’t have the opportunity to do user studies. In the future, we’d probably ask a few friends ahead of time if we can interview them.
I was also impressed how much storytelling the winners incorporated into their decks. The winners used enough screenshots of the app to get their point across while focusing more on tone, story, and value propositions. This really painted a story and made their product more relatable. I’ll be using that as inspiration for my presentations in the future.
Next Case Study:
bottom of page