Bottom Navigation, 2023

Mobile Design
User Research
UI Design
Visual Design
Prototyping & Testing

Reconstruct’s Capture App is used to capture videos and images for construction projects and monitor progress on-the-go.

Bottom tab navigation in mobile design plays a crucial role in enhancing user experience and usability. By placing bottom navigation tabs, users can easily access the most important and frequently used features of the app with their thumbs, which is the most comfortable and natural position for one-handed mobile interaction. This is especially important for our users who are on the field, holding many items in their hand. In order to improve accessibility of the Capture App, as well as user satisfaction and engagement, we wanted to provide a way for users to quickly orient themselves within the app with fewer clicks.

The Problem

Too many clicks

Users are having to click too many times to get to where they need.

Unintuitive user flows

The current user flows are not simple and visible enough for users to quickly navigate through the app.

Business Problem

Decrease in user engagement

Users cognitive load is increased due to unintuitive user flows, which leads to users not wanting to use the product.

Less opportunities to win customers

Users possibly not being able to find “hidden” features due to unintuitive user flows, which leads to us losing out on sales opportunities.

Goals

User goals

Discover features that previously may have been “hidden” due to unintuitive user flows.

Make it easy for new and returning users to quickly find and get to where they need.

Reduce cognitive load through consistent a navigation experience.

Business goals

Increased usage of the Capture app.

More consistent experiences across our product through intuitive navigation UX.

Selecting Visual Icons

The most used and core functionalities of our Capture app were:
- Projects
- Uploads & Downloads
- Camera Connection
- Settings

My first task was to define in what position they would be arranged and which visual icons would represent each functionality.

Icons for Uploads & Downloads and Settings already existed in our product, so we decided to keep them the same for consistency. After putting together different variations of icons for Projects and Camera Connection, I worked together with our Lead Mobile PM to receive feedback on icons, as well as icon badges for different states.

Once approved, I created icon components to be used throughout the design. This would help me later when presenting my design decisions to stakeholders and in later iterative processes.

Design

Less clicks

Many of our core functionalities in the Capture app had too many unnecessary clicks and took more time than needed. For example, if users wanted to connect a camera to the Capture app, it previously would have taken them 3-4 clicks. However, with the newly designed bottom navigation bar, it now takes users 1 click to get to camera connection.

*A constraint I had here was not being able to re-design the existing “Camera Connection” userflow. I would have re-designed and taken out the “Continue” button and breadcrumbs design, if more time and resources were allotted.

Increased simplicity & visibility

To help users discover features that previously may have been “hidden” due to unintuitive user flows, it was important to make buttons more visible. As seen on the left, the “Uploads & Downloads” button is small and not as visible. It is less noticeable when there is no icon badge. The design on the right includes the “Uploads & Downloads” feature in the bottom navigation and is much more noticeable.

Icon badges

It was important to include icon badges since there could be multiple updates happening at the same time. Previously, there was no clear way to know whether or not a camera was connected to the Capture app or if a capture was uploaded properly. We wanted to provide real-time updates to the user in a clear visual manner, so we used color-coded icon badges to provide important information to the user.

Increased simplicity & visibility

Icon badges

Feedback & Testing

Using a prototype, I presented my designs to our Advisory Council to receive feedback on clarity, intuitiveness, and overall visual design and consistency. After receiving feedback, I iterated on and finalized the designs.

Less clicks & steps

Uploads icon badge

6 out of 6 people mentioned that the red and orange-yellow dots to indicate "upload/download error" and "uploading/downloading" was intuitive and easy to understand
Having a visual cue that the user’s capture was successfully (or unsuccessfully) uploaded helps the user have ease of mind

Camera connection icon badge

6 out of 6 people mentioned that the green dot is intuitive enough to know that it means that the "camera is successfully connected"
6 out of 6 people like that they can easily know and be reassured that their camera is properly connected before or during a capture
Having a visual cue that the user’s camera is properly connected before or during a capture helps build user’s reliability and trust in our product

6 out of 6 people mentioned that they loved the design because it is much more simple & does not have many steps/clicks
Users become frustrated when there are too many steps/taps and if the process of “getting the job done” takes too long

Uploads icon badge

6 out of 6 people mentioned that the red and orange-yellow dots to indicate "upload/download error" and "uploading/downloading" was intuitive and easy to understand
Having a visual cue that the user’s capture was successfully (or unsuccessfully) uploaded helps the user have ease of mind

Camera connection icon badge

6 out of 6 people mentioned that the green dot is intuitive enough to know that it means that the "camera is successfully connected"
6 out of 6 people like that they can easily know and be reassured that their camera is properly connected before or during a capture
Having a visual cue that the user’s camera is properly connected before or during a capture helps build user’s reliability and trust in our product

Less clicks & steps

6 out of 6 people mentioned that they loved the design because it is much more simple & does not have many steps/clicks

Users become frustrated when there are too many steps/taps and if the process of “getting the job done” takes too long

Takeaways

Summary

Lessons Learned

This project reminded me that an improved user experience doesn’t always require major design updates or changes to a product. With the implementation of a simple bottom navigation bar, users’ experience of our Capture app improved immensely. Less clicks/taps, improved user flows, and clear visual cues can all improve a user’s experience and increase user engagement. It was also the second project I worked on with our new Lead Mobile Developer and I had a great time communicating and collaborating with him and our Lead Mobile PM on this project to improve our Capture app!

Once the design was finalized, I presented the new bottom navigation experience as a prototype during our sprint demo. The design was well-received by everyone on the team and the whole team loved its simplicity, ease of use, and intuitiveness. Since its launch, multiple customers have commented to our PMs and CS team that they like using the bottom navigation and feel that it is a much improved update to our app.