top of page

Apple Maps (iOS) interface redesign

Tools used: Figma, Protopie

Problem Statement

The Apple Maps for iOS smartphones has been growing steadily but still is far away from what Google Maps has achieved. Although Apple maps provide the basic functionality of searching for a location, the steps after that to start a journey amount to a rather unnecessary amount of clicks. For example, if the user needs to start the journey directly, the GO button is not present. If the user needs to schedule their journey, the scheduling option CTA is not properly presented with the user also going through multiple clicks to set the date and time of the journey.

Now, if you look at these images, you will find the following issues clearly shown:

  • Lack of a GO or START button to start the journey immediately.

  • Journey scheduler CTA is not presented properly.

  • Upon tapping the "leaving soon" CTA, another pop-up card pops up, which takes up the whole screen real estate. 

  • The whole user journey involves many clicks by the user to get to the final step.

My Solution

I propose a solution to the above-mentioned problem by redesigning the maps interface with proper UX. For this use case, I redesigned the sections which now require the user fewer amounts of clicks to achieve the desired outcome. 

  • Adding the "GO" CTA to the results page, thus saving one click.

  • Upon tapping the "DIrections" CTA the user is greeted with a redesigned journey scheduler card, which is inherently present, allowing the user to search for the source and destination.

  • The journey scheduler also has a less intrusive pop up for date and time selector which doesn't take up the entire screen.

These are the visuals designed in Figma of the redesigned screens,

Although I have tried to prototype the designs as much as possible so that it feels like an actual app, there are certain limitations to it, which cannot be covered unless it is properly coded (or maybe I haven't figured it out yet).

In this case, the user cannot navigate the map and due to this just being a prototype, I request the readers to search for "Anglia Ruskin University" as it is predefined in the prototype. The date and time selector is static as I just wanted to give the users a feel of how the user journey looks like.

As an open-source for everyone to view and edit the prototype according to their usage, I have provided the links for the source file, the cloud browsing, and the QR code to get started on your smartphones immediately.

Note: You need to have Protopie installed on your computer to edit source files.

Or scan this code from the Protopie Player App in your phone.

bottom of page