Mobile App Navigation

Team Mobile App Navigation Upgrade

Project Overview

The Team Mobile app is Viewpoint’s flagship mobile app. It is a powerful app that handles several aspects of construction project management. However, it had a fatal flaw in its navigation. The navigation required the user to go through several pages to get to where they want. Also, in the primary or hamburger menu the user was very limited with what they could do. After a major customer complained to the mobile lead I was tasked with updating the navigation.

If a user wanted to navigate from the home page to an RFI they would have to click the Logs button at the bottom of the screen. They would be in the Logs landing page, they would then have to click RFIs which puts them into the RFIs list and finally they would click the RFI they wanted to see.


My solution was to move everything to the hamburger menu, this would allow the user to navigate from any part of the site to any other with the minimum amount of screens. While moving everything to the hamburger helped streamline the navigation the users had grown accustomed to using the bottom of the screen for navigation purposes. We did not want to take that away from them shift the paradigm so much that they wouldn’t know what to do. I decided the best idea would be turning the bottom area into a “favorites” section. This would allow users to still use the bottom and take advantage of the “magic thumb zone” but also further streamline their app usage. Not every user needs every part of the app, now they could have up to 4 favorites and move from section to section even quicker.

Process        

The project was broken down to 3 phases:

  • Discovery
  • Design
  • Usability Testing

Discovery
While this was far from my first architecture or navigation project, this was my first one for a mobile application, especially one with a strong user base. I was lucky I had a developer with over 10 years of mobile experience who I was able to work with. I also sat down with the mobile lead to discuss customer concerns. After the initial customer complaint she took it upon herself to speak to several customers and found out several others were very unhappy with the current navigation structure. She had gathered all her notes and shared them with me. Once I became familiar with all the concerns I became good friends with Google and read up as much as I could on mobile navigation patterns. Doing that helped me understand the necessity for the magic thumb zone on the bottom as well as have a singular location for all the sections.

Design
For this project it wasn’t necessary to do any pencil sketches or wireframes as I had been doing design updates on the app for a while so I had all the elements and a sketch library. I put together the concept of the hamburger menu containing all the possible links. Also, the bottom navigation of favorites was recreating what currently existed.

Usability Testing
The screens and the step by step flows were completed so it was time for InVision prototypes (link below in project elements). I created a two part prototype, one used the original navigation and the other was the new concept. I had the user run through the same series of navigation tasks in both versions. I wanted to have them go though the original so they could have an accurate comparison to the newer version. I tested some users in person and other remotely over Go To Meeting. The best set of tests was when I was able to travel to Nashville and test users in the field, this lead to a discovery that will be detailed below. Thankfully I scored a 100%, every user preferred the new version to the original.

Project Elements        

Prototype  If you go through the prototype, click in the upper right corner and you can return to the table of contents.

User Test The document is set up to be printed and filled out during a live test.

 

Results

Hamburger Menu

The updated hamburger had links to every section of the app. The sections were either global (Notifications, Assigned to Me, Settings, etc) or project based (Submittals, RFIs, Issues, etc). This made it easier to move from section to section.

Hamburger Menu

Update Notification

We wanted to users to know about the navigation changes and the ability to set their favorites. After 2-3 weeks of email warnings, when the new navigation went live users were greeted by this roadblock. It took users to the navigation favorites set up or allowed users to escape by hitting close. If a user did not set up favorites they would be reminded 2 more times over the next week before the roadblock would no longer appear.

Update Notification

Updated Home Page

This is a view of the updated home page with favorites set up.

Updated Home Page

Set Navigation Favorites Part 1

When a user first arrives at the favorites set up they have the ability to select the stars on the right or drag and drop the navigation options into the target area.

Set Navigation Favorites Part 1

Set Navigation Favorites Part 2

View of a favorites set up.

Set Navigation Favorites Part 2

Set Navigation Favorites Part 3

A user can set the order of the favorites on the bottom through drag & drop.

Set Navigation Favorites Part 3

Set Navigation Favorites Part 4

Re-ordered favorites

Set Navigation Favorites Part 4

Daily Logs

The original Daily Logs list had the old bottom tray navigation and did not have the hamburger menu. This new version allows easier access to other parts of the application.

Daily Logs

Contacts

The original contacts page did not have access to the hamburger menu or a bottom tray navigation.

Contacts