Design Exercise | Teleportation
Teleportation is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them. It is a common subject of science-fiction literature, film, and television. You’ll be designing a mobile iOS app that uses teleportation to transport you from one place to another instantaneously.
1. Your sketches should show us both the overall navigation of the app as well as workflows related to the requirements below.
2. The app should be able to take you to places you go often (work, home, etc).
3. The app should be able to take you to places you infrequently visit that are
farther away (Eiffel Tower, Egyptian pyramids, etc).
4. You should be able to view places you've teleported to in the past.
5. Express some complications that arise from not having a line of sight to where you’re going.
6. Highlight how other apps or OS-level features could be integrated.
Strategy & Assumptions
When ambiguity defines a design problem, empathy for the end users is the surest path to clarity. With the brief time allotted for this exercise, however, I'll rely on the following assumptions in lieu of insights about needs and behavior that would arise from a real-life product design process:
- I am a representative sample of all users, and my design intuition reflects the preferences of the product's users.
- My best guesses about user needs and behavior reflect reality.
- The scope I choose for this solution is the product's ideal scope.
Due to the ambiguity surrounding the technology, there are some technology-related questions that I will also answer with assumptions in order to design a solution:
- Does teleportation require an ancillary device like a portal at origin or destination?
- No. Teleportation requires only your phone.
- How do we account for complexity surrounding arrival (from the prompt: "complications that arise from not having a line of sight to where you’re going")? For example, how does the product choose a specific endpoint without a portal? How does the product assure nothing and no one is already occupying the space where one will arrive? How can collisions be avoided?
- I will assume that that technology and society have solved these problems. The product implicitly finds an unoccupied spot close enough to your destination to deliver you to; popular destinations may have designated arrival areas; etc.
- Can the app take you anywhere in the world? Is distance a factor for travel time or price?
- The app can take you anywhere on Earth, instantly. I'll also assume that distance has no effect on price. We could imagine a teleportation company would charge more for further distances – but why place economical limits on a hypothetical experience? Instead, let's imagine the app is a subscription service that allows you to travel anywhere in the world for a flat rate.
Ideate, design, iterate, prototype...
How might we create a simple tool for changing physical location with minimal effort?
My initial concept took hints from utility-oriented apps like Google Maps, Uber and Lyft. In the background, a map-based interface shows a user their current location. Navigation buttons afford trip history and settings to a user at the top of the screen. Navigation buttons are clearly differentiated from action-oriented buttons, which are visually prioritized and placed right in the thumb zone for easy access.
With one tap, a user can instantly teleport to one of a few locations that are used often: home or work (configurable in settings), or a favorite.
Location search ("Where to?") is afforded first priority by size and spatial location, occupying the most easily accessible screen real estate.
Wouldn't a user want quick access to multiple favorite locations?
A small UI change communicates that the favorite button leads to a list of favorite places. Programmable locations like home and work are listed, followed by favorite locations, followed by frequently visited locations from a user's history.
The search box leads to a menu of suggested locations (keyboard not pictured), giving users access to popular, trending, and recommended locations in addition to the regular favorites list.
Designing in higher fidelity highlights a critical oversight. It appears I could have focused more on user needs and context instead of optimizing for existing design patterns. Transportation-oriented apps like Uber, Lyft and Google Maps prioritize a map view on launch so users can see what's nearby, and make sure the app's understanding of their location matches their physical location before pickup.
But current location offers no value in the context of a teleportation app, where a user can travel any distance for the same travel time and cost. Who cares what's nearby when you can go anywhere in the world? Who needs to make sure the app has correctly guessed your departure location when you can depart from anywhere?
A redesigned home screen marginalizes current location (top-center) to highlight destinations and discovery.
In order to minimize scope, I initially assumed this app should be a simple tool for transportation rather than a content-heavy, discovery-oriented product. But if an app can take you anywhere in the world without limitation, wouldn't the ability to suggest the best places help you get the most out of it?
The new home screen offers curated suggestions to lift the burden of choice from users who aren't sure what they want.
The search bar retains first place in hierarchy, but an extensible curation system shows horizontally scrolling lists that could include popular destinations, trending cities, themes (beach, food, architecture), etc.
A tap on the history button at top-left pulls up a list of recent trips. Here, expanded cards show the same information from location cards on the home screen, with the addition of your trip date. A user can tap a trip card to view the corresponding location.
Tapping a location card from home or history brings a user to the location view.
Here, a user can add or remove a location from their favorites with a tap on the heart icon (top-right), or tap the call to action at bottom to teleport there instantly.
A card shows location info an ratings from other apps like Google Maps, TripAdvisor or Yelp (configurable in settings), and allows a user to view more info in the corresponding app with one tap.
A tap on the "Teleport Me" button brings up a full-screen destination view during the teleportation process. A cancel button allows a user to call off the trip during the first few seconds, without the additional steps associated with a "confirm" dialog.