If teleportation existed

A UX design exercise

The Challenge

Teleport Me. Design an application that allows the user to travel from anywhere on the planet to another instantly (you can presume the backend exists!)

Let’s look at Wikipedia’s intepretation of teleport:

Teleportation is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them.

Design Process

  1. Context: Problem/Goal, Constraints/Assumptions
  2. Understanding Users: User research, Competitive Review
  3. Setting the Stage: Requirements, User Flow, Brainstorm
  4. Design: Wireframes, Interactions, Feedback Iterations
  5. Final considerations: Edge cases, Next Steps, Last Thoughts

Timeline

I decided to time-box myself to finish everything within 1 day over the weekend so that I could focus on getting the job done and use limited resources to complete this design exercise.


Problem/ Goal

Sounds exciting! This is a special design exercise for me as it might seemed far fetched but it is interesting to see what can I come up with a futuristic challenge.
The goal is to design an application that effectively allows the user to travel from anywhere on the planet to another instantly.

Constraints/Technology

As I had to create an application, I chose to design a mobile app as it is portable and serves as a medium for users to teleport by selecting places.

Users can travel to public areas (they can’t teleport to private property) and was not restricted by any country’s visa immigration laws. There would not be any collision between space when two users travel to a spot at the same time as the teleportation technology had already solved this concern.

Assumptions

  1. Assume that users of the product are tech-savvy and had a basic knowledge on how the teleportation concept works before using the product. Conduct user testing to verify product intuitiveness after briefing on our hypothetical assumptions and requirements to get their feedback.
  2. Assume that the app earned money for each teleportation. One of its business goal was increase in profit margin. Design should be as easy enough to navigate to drive bookings.
  3. Assume that the app uses teleport credit as a teleportation currency. The distance of user’s current location to the destination decides on the amount of credit charge. Design should should convey the credit charges clearly to the user.
  4. Assume that the business goal for this project is to provide better customer service. We focus on retention and the design should be provide enough information for users to understand without overloading them.

User research

As there’s no available users who have tried teleportation, I probed around with the question on “what are the behaviour of people who travel from one place to another?” The focus was to understand what are their priorities and concerns.

The regular

Regulars always have a routine route (eg. to work, to school, to their favourite bars). They know where are they heading and the frequency of them going to the same place is high. On mobile, they want to go to their place fast by the click of a button with their saved location without much searches need to be done again.

The explorer

Explorers are open to accept to any suggestion on where they should go. They do not mind spending a longer time in discovering the places they want to go. On mobile, they will engage with filters or searches first before deciding in their next destination.

Competitive Research

As there was no teleportation product in the market (bummer!), I looked at current transportation apps like Grab, Uber and also location guidance apps like Google Map and CityMapper as indirect competitors.

With apps, I was able to get insights on existing design patterns in creating clear communication between destinations and giving exploration ideas to users.

Requirements / User Flows

I wrote down the possible user flows to travel from current place to their destination so that I can have a structural flow to design.

User flow: choosing a destination for teleportation

Brainstorming

By working on the user flow, I could see how it could be broken down into task flow and able to design the screens to cater for the tasks.

User flow: Make a teleportation booking

Task 1: Go to my destination (new destination/saved place/ previous destination) 
The regulars wanted to go to their places as quick as possible and they were aware of the location beforehand. Provide short-keys for regular travelled destination and a history list.

Explore page (btw the top right is my teleport icon)

Task 2: Explore and go to recommended place
For the explorers, users were unsure where to go so they might need some clues or information as suggestions.
Provide visual representation and brief description of the places to guide them.

Task 3: Show credit charges clearly 
Users wanted to know about booking charges based on the their current location. It is important to state charges in the app as our users had to be confident in using our product to keep using it. Clear indication on the credit charges throughout the entire app.

Initial Wireframes

Task 1: Go to my destination 
(new destination/saved place/previous destination)

The regulars could type their destination in the textfield if the destination was known. Users could either tap on the previous destinations or tap on the saved place. There would be a history of users’ teleportation to tap on.

Task 2: Explore and go to recommended place
The explorers could choose to explore the public places on the map or tap on explore button to display a list of recommendations. Users were shown with places based on themes (eg. Christmas getaway, Singapore foodie heaven). The places could be curated based on trending hashtags. When users click on the a place, a confirmation pop-up showed the place’s details like description, temperature, weather so that users were aware of the place’s conditions for safety concerns.

Task 3: Show credit charges clearly
Users are able to trace back to their credit usage based on the history list and saved places. However, no credit is shown for the saved places on the main page as they serve as shortcuts and the design should be compact. Before user decides to make a booking, their current credit is clearly shown and the credit charge for the destination is stated as well.

Final Wireframes

Overall screens for final wireframe

I managed to conduct 2 session of user testing based on the initial wireframe and collected constructive feedback after explaining the teleportation assumptions. In this iteration, I focused on the visual details and made amendments on the info architecture to increase the booking conversion.

  • Bring out the Explore feature
    As the Explore feature was a crucial factor in driving bookings (the more users explored suggested places, the more likely they would make a booking), I decided to bring out the explore functionality at a higher level for more visibility.
Note: Images were taken from Instagram search results.
  • Display more information to encourage users to make bookings
“I like to view a lot of pictures about my destination so that I know what to expect.” — users

At the explore page, I increased the image size and displayed them like a magazine layout from the feedback. Ratings and comments of each places were added to give more insights for user to decide on where to go.

“What if I teleport to a winter country with my tropical clothes without prior realisation? That would be a surprise.” — user

I added a screen to display the destination details. For information like temperature and weather to user as traveling from one places might pose a great risk for them if the contrast were drastic.

  • Hashtag searching to explore places

Users were able to search through themes or events that they wanted to visit. The hashtags were used as labels for locations to define events or places descriptions. By keying in hashtag in the search bar, users could see the information curated according to popularity of the location. 
Action: Retest this again with users to see how they respond

In action

https://www.youtube.com/watch?v=0_3NhnsNmdA

Edge cases/ Last Thoughts

The next task would be another round of user testing on the latest wireframes. Many things are not covered such as error pages, loading times, announcements, and also the payment flow.

Teleportation might be far fetched at the moment but it was interesting to see how the interface and experience changes when we are no longer bound physically and travel time duration. I enjoyed the process of practicing my creativity in such a setting.


Amy Cheong is a software engineer who is also interested in keeping herself busy with personal projects. Here is her Twitter, LinkedIn and personal website.