Unboxing iOS Google Maps

A few of the many unboxing app series that I am going to write about.

The reason I want to start this series is because in a lot of the Design interviews, I got asked about different apps. Hence, this is to extend mine and your knowledge about apps and their design.

Font

Helvetica Neue vs Roboto

Google maps app screenshot, Helvetica Neue, Roboto

I was unsure at first which of these 2 fonts were being used because they are so similar except that there are minute moderations in a few of them. But after spending sufficient amount of time looking at both these fonts closely, I realized that the ‘i’ in Helvetica has a square dot where as the ‘i’ in roboto has a circular dot. Hence, Google maps iOS app font is Roboto.

Landing page

• You can see where you are currently at with a blue dot representing you.
• Now, I was wondering what the blue circle with some opacity around it means. Also, the tiny arrow attached to it. After some research, the blue circle around it which changes in size is 68% confidence interval which means, you could be located in that space as well. And the tiny arrow is the directions in which you are going. Although, it doesn’t seem to be very accurate.
• The landing page has Google’s material design with the floating search bar, action buttons and icons. The sizes of these can be found in Google material design guidelines — metrics and keylines.
• The icons are standard Google material design’s.

• There is an explore tab at the bottom which takes you to the page where you can see the nearby restaurants. The same page can also be got to by going to the hamburger icon or by tapping on the search bar and clicking ‘explore’. So, three options to get to the ‘explore’ page.
• The offline areas can be got to from the menu bar and by tapping on the search bar and scrolling to the very end. So, two options to download the offline areas.
• The search bar and directions icon leads you to 2 different pages with the same purpose — Enter destination and choose a place from history. But the succeeding page to directions icon has different modes of commute and saved places. Where as the search bar has the explore option, generic spots, nearby places from history and the ability to download an offline area.
• The search bar has a light grey text for prompting you to type something similar and a microphone icon for voice command.
• Lastly, there is a ‘target’ button that zooms into the map and shows you a 3D view of the buildings. Good use if you want to know if there is a building near you.

Menu tab

• The menu tab opens up on the left as expected and has options to go to account, saved places, explore, your contributions, offline areas, different track views (traffic, public transport, biking, satellite and terrain), settings, add a missing place and help & feedback.
• The traffic and biking view is self explanatory. The public transport view doesn’t have any changes what so ever in the maps. The terrain view makes all the buildings disappear. Not sure why I would use a satellite or a terrain view. My research and asking people around led me to believe that nobody knows.

Succeeding page from search bar

• It has a card type layout with 8px space between each cards. Each card has 2px elevation casting a shadow in the z axis. The elevation shadows for different components selected and resting can be found here.
• The icons are all on the right and each line of text is divided by a thin barely visible line which doesn’t divide the icons.
• In each card, the name of the place is in black and the rest of it’s address is in light grey with a smaller font size. ‘Additional’ results is in bold grey letters. Not sure why ‘explore’ and ‘offline areas’ are in blue text. A lot of attention is being given to these 2 options in the app.
• There is a microphone on the search bar here with a back sign.
• Somehow this page aligns itself when you go back to the landing page, zoom out to an entire state almost and go back to the page. Now, you don’t see the explore or the generic places card. This is replaced by a set of icons for food, drinks, bars, gas station, etc. Very strange.

Succeeding page from the directions icon

• This page can be got to by tapping on the search bar -> selecting/typing a place -> hitting the go button. Although now the destination comes pre-loaded which you obviously can change.
• This page has a lot of other features for going to a particular place.
• This page pretty much has the same design as the succeeding page to the search bar but with a few alterations such as the blue section on top where you can select from and to locations and how you are planning to commute.
• The ‘from’ bar comes pre-loaded with your current location. The ‘to’ again takes you back to the succeeding page after the search bar. Without the explore, generic places and offline areas but it has an additional, ‘choose on map’ option.
• The car, walk and biking cards are arranged as more from recent history, saved places and more from history. Although the public transportation has a different arrangement with saved places, public transport, more from recent history and more from history.
• There is a reverse places icons next to the to and from bars.

Succeeding page once you select the location

• The top input part of the previous page remains exact except that the reverse icon moves inside revealing an options ‘kabob’ icon.
• And the bottom part gives you the path on the map.
• The footer gives you the number of miles to the destination with the scheduled time.
• There is also 2 fabs — one to zoom in to the starting point and one to start the navigation. The navigation button stands out because of the blue color.
• The options icon reveals a tab for sharing directions, adding a stop, showing traffic, satellite and terrain view and route options. So, 2 ways to get to satellite or terrain view and I still don’t know why we would use that view.
• There is an extra icon now in the modes of transport bar — for getting a lift or hailing a cab. Also, each of the icons show the respective times it takes to reach the destination.
• In the same page, you can see the time it takes to reach the destination in 2 different places.

The map

• A lot going on in the map! The most important feature in the app! Obviously.
• It shows you the starting point with that blue dot and the destination with a bright red marker on a white circle.
• The path and ‘time taken to reach destination’ text is blue if the traffic is normal, orange is there is some and red if there is heavy traffic. There are multiple grey paths to suggest alternate routes.
• There are dialog boxes scattered around the map depicting the time it takes to reach the destination, an alert to depict traffic and a box for showing the difference with other paths.
• Clicking on the grey path, changes it to the blue chosen path of travel.

Go!

• Now it zooms in to your current location with a blue arrow on a white circle to tell you which direction you need to head in. The white filled circle has a slight opacity.
• The top green header gives you the directions using text. Also, there is a search icon opens up a opaque page that fills the screen with shortcut icons to generic places and a blue search icon which takes you to the succeeding page when you click on the search bar in the landing page.
• Below the header is the option for voice control and compass.

What I learned from this observations

• Give multiple paths to important pages or tasks of the app.
• Show the purpose of your app in the landing page. It doesn’t have to be a sign in page. Unless of course, it is an app where you need to access your account first hand.
• Choose 2 colors other than the background color, white, black and use them wisely.
• Highlight important buttons with different color or capitilization of text.
• Follow material design guidelines.
• Don’t loose focus of the app. Every extra feature can be tucked in and opened only if the user needs it.
• Think of all possible scenarios and users.

Please leave any feedback or questions that you might have below. Please recommend and follow if you found this article useful. Thanks!