Porter

Porter

iOS App

A fictional app allowing a user to instantaneously teleport themself from one location to another. Completed as part of a design challenge, I designed Porter over the course of a few days.

Prototype Link
Launch Prototype »

Year
2017

porter-all-screens

The Prompt

Design a mobile iOS app that uses teleportation to transport you from one place to another instantaneously. I chose to design a product that utilized the new Face ID authentication feature on iPhone X.

Defining the Problem

My first step was to start defining the problem I would be attempting to solve. Since the prompt gave very few limitations I listed out my questions and assumptions, as well as a definition of the product and how it would potentially be used.

definition
assumptions

Some assumptions, like the user being cleared to travel to a foreign country, meant that I wouldn't need to show edge cases or error states. Instantaneous travel also meant I wouldn't need to design any sort of waiting queue or surge pricing—all travel would happen immediately.

questions
considerations

Many of my questions and considerations impacted the final set of designs. Major ones included verifying your identity via Face ID, teleporting to public or private property and utilizing Google Map's GPS Plus Codes to teleport to locations without names or addresses.

Concepts like utilizing private receiving rooms or a restroom as the teleportation destination never materialized. This issue arose from not always having a direct line of sight to your destination. Conscious of my time, I decided to assume the destination location was a pre-existing device or a obstruction-free set of exact global coordinates.

One of my favorite concepts was being stuck "in limbo" if you had bad service, your device's battery died or you had insufficient funds at the exact moment of teleportation. I didn't have time to design this edge case but I loved the idea of your physical body needing to be put in a temporary holding location while the issue was resolved.

sitemap
wireframe-home
wireframe-location
wireframe-history

I sketched out a few screens that demonstrated user flows I knew I wanted to demonstrate. My wireframes showcased these flows and I started to flesh out some of my earlier concept considerations.

The primary way I expected users to interact with this app was similar to how they might use a ridesharing app. Two main use cases emerged: infrequently visited locations would already be known and simply need to be entered while frequently visited destinations like work or home would be automatically suggested as shortcuts on the home screen.

Wireframes

I knew I would be iterating on many of my concepts as I increased fidelity so digitizing my sketched wireframes was a simple process. This my first time designing for iPhone X so I would need to cater to a taller screen with new top notch and bottom home bar areas.

wireframe – home
wireframe – eiffel tower
wireframe – history

Branding

At this point started sketching out some ideas for a product name and app icon. During my research I had come across a quote from J.K. Rowling about her use of teleportation portkeys in the Harry Potter series. She said her word "portkey" came from the French word "porter" which meant to carry or take somewhere.

I decided to name the product "Porter" and use a literal yet minimal representation of a hotel or train station porter for the app icon.

porter-app-icon
frame-loading

Home

Utilizing color and fonts from my branding I continued to increase the fidelity of my screens to a higher fidelity. Red tones from the porter's cap became a primary part of the color palette.

Precise destination imagery for any location worldwide could be pulled in from comprehensive satellite mapping services like Google Earth or Apple Maps. Drones and public CCTV feeds could also be utilized to provide a live view of popular destinations.

I added a way to access a map on the homescreen, realizing that not all locations would be easily searchable or have human-readable addresses. Locations in the middle of a forest, ocean or disputed territory may require a user to physically drop a pin to navigate.

frame-home

Frequent Destination

Locations a user often teleports to can be saved via a star icon in the top right corner. Saving a place boosts its ranking on the search bar and generates a shortcut card on the homescreen.

This particular destination is a private residence which means a user needs to receive access from the verified property owner to teleport here. Highlighting popular public destinations nearby gives users who are visiting friends or family suggestions for things to do or see with them. Since the destination address is within the United States there are no Visa requirements or visit length restrictions.

Face ID authenticates the identity of the user wishing to teleport and instructs them to hold on to their device. Face ID can guarantee that only one person is teleported at a time and that the authenticated user is legally permitted to access their desired destination.

frame-grandpa
frame-face-id
frame-face-id-verified

Infrequent Destination

Contextual information for locations a user may not visit often is extremely important. Things like the time and weather but also local language, currency and visiting restrictions become more relevant.

In this instance the destination is also public, meaning there are no restrictions on which users can access this location. Partnering with other platforms and services like Facebook or Eventbrite can help feature upcoming events that may be happening near this location.

Porter could utilize platform APIs and pull in information like a place description from Wikipedia and Plus Code GPS coordinates via Google Maps to enable easy location sharing to other users.

frame-eiffel-tower

Navigation

I presumed this app would be used similarly to a ridesharing service like Lyft or Uber. In these products, a user typically knows the exact location name or destination address they are trying to navigate to.

While Porter's home screen displays frequent or saved locations in the form of cards, a user can also quickly search for named locations or addresses when supported by a service like Google or Apple Maps.

A side menu allows a user to access less frequently visited parts of the app, such as a chronological history of past places visited.

frame-menu
frame-search

History

This view allows the user to scroll through a chronological timeline of every destination they have teleported to with an exact time and price. Tapping on a row would navigate to a more detailed view where a user could see more contextual information like how a price was calculated or give them the ability to file a complaint if there was an issue while teleporting such as an incomplete transfer of matter.

frame-history

Prototype

To better demonstrate how a user could interact with the app I created an interactive prototype. It connects the screens from this case study and can also be accessed from a mobile device.

Encompass

Next up:

Web App