Square 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
The surest path from an ambiguous design problem to a viable solution is empathy & understanding for the solution’s users. As such, a typical product design process for me begins with research and empathy-building, so that subsequent work may be guided by needs rather than assumptions. With the brief time allotted for this exercise and its hypothetical context, however, I'll rely on the following atypical assumptions in lieu of insights about needs and behavior that would arise from a real-life 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 technology and society have solved these problems. The product may implicitly find 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 for the sake of small scope, 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 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 and work (configurable in settings), and a favorite.
Location search ("Where to?") earns the #1 slot in the view’s visual hierarchy and occupies the most easily accessible screen real estate.
Wouldn't a user want quick access to multiple favorite locations?
With a small UI change, the home screen’s “favorite” button leads to a configurable list of favorite places. Programmable locations like home and work are listed, followed by favorited locations, followed by frequently visited locations from a user's history.
The search box begins to orient towards discovery, with 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 makes a critical oversight more apparent. Optimizing for existing design patterns (a conventional map view) has brought my focus away from the user needs specifically associated with this design problem.
Existing 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 a user’s current location offers little value in the outlandish context of a teleportation app, where one can travel any distance for the same travel time and cost, and doesn’t need to be picked up . 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?
Iteration 3: focus on discovery
A redesigned home screen marginalizes current location (top-center) to highlight curated destinations and focus the experience around 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 simply and easily, place curation and discovery are the interface’s real means for offering value.
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 affords 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 a destination’s name, city, and most recent 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 and ratings from other apps like Google Maps, TripAdvisor or Yelp (configurable in settings), and allows a user to view more info in the connected 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 friction that a "confirm" dialog prior to teleporting would create.