Navigation structure

Organizing, structuring, and labeling content in an effective and sustainable way to help customers find the information they need the first time.

In order to comply with my non-disclosure agreement, I have omitted and obfuscated confidential information. All information presented here is my own and does not necessarily reflect the views of SafetyCulture (SC).

Understanding the problem

TeamTrain (TT) is a video training app used to empower frontline workers and training managers. The web platform focuses on the training managers. Here they can invite people, create groups, create courses and assign people to courses. They can monitor their team’s progress, course completion rate and much more. The mobile platforms focus on the trainee’s experience, allowing staff to take a lesson anytime, anywhere.

As the product evolved and incorporated more features the labeling and navigation structure started to become confusing. We had some customers struggling to find what they were looking for and feeling lost specially under the Manage section.

We were about to add the create course capability to the Android and iOS apps and we decided to review the product's information architecture (IA) before it got too complicated.

Defining the scope

Project goal and success indicator:

  • Goal: create an intuitive and coherent navigation design

  • Success indicator: A/B test to identify the best navigation structure

We decided to do 2 tests, Card Sorting and Tree Testing, to better understand our product navigation and define its information architecture.

The Card Sorting aimed to understand how people think our content should be organized and the Tree Testing aimed to evaluate the product hierarchical category structure, or tree, by having users find the locations in the tree where specific tasks can be completed.

Exploring potential solutions

First, I did a Card Sorting with 10 users to find out how they thought our content should be organized. Then, I had a meeting with my team to discuss the Card Sorting results.

similarity matrix
Card sorting: similarity matrix

After exploring some ideas we decided to test two navigation structures (A/B test). I used Treejack, a Tree testing tool, to validade the two concepts. I ran 20 tests per concept (10 tests with training managers and 10 with frontline workers).

The training managers tasks were the following:

  • Task 1: you are a training manager and you have just identified a course you could create for your organisation. Where would you go to create a new course?

  • Task 2: you need to make sure all your staff has completed a certain course. Where would you go to find who has/hasn't completed that course?

  • Task 3: You think this app would be a good fit for your organisation. Where would you go to invite a new person to try out this app?

treetesting
Training managers treetesting results

The frontline workers tasks were:

  • Task 4: You have just joined a new company and your manager said you must complete a couple of on-boarding courses. Where would you go to find courses your manager assigned to you?

  • Task 5: Your manager sent you a course request. She thinks you are an expert and she wants you to create a new course. Where would you go to find details about that course requested from your manager?

  • Task 6: You are about to do a task that you haven't done in a while. You remember that you have done a course on this task before. Where would you go to re-take this course?

treetesting
Frontline workers treetesting results

The concept A performed better than the concept B. However, it revealed some inconsistency on the navigation bar labels and hierarchy.

A/B test
A/B test

I presented the results to the team for discussion and a potential solution taking into consideration the tests results. The team pointed out its pros and cons and suggested some changes.

After a couple of iterations I did another Tree testing to validade the new navigation structure. The results were positive and the participants where able to complete all assigned tasks.

Delivering final solution

We updated the web platform and release the mobile apps (Android and iOS). The new navigation strucure brought clarity to our product. Customers felt engaged and confident with the labeling and site navigation.

The new navigation structure has 4 main sections: Learn, Request, Create and Manage. The mobile apps are targeted for frontline works and don't have the manage section.

  • Learn: this is the landing page. It is split in 3 sections:
    - To do: list of courses assigned to users that they must complete
    - Completed: list of all completed courses
    - Explore: other courses in their organisation that were not assigned to them

  • Request: when managers request users to create a lesson a message will be display in this page. This is the crowdsource section of TeamTran.

  • Crate: here users can create new courses and edit existing ones
    - To do: list of courses assigned to users that they must complete
    - Completed: list of all completed courses
    - Explore: other courses in their organisation that were not assigned to them

  • Manage: in this section users can manage and monitor their teams progress and course completion rate.
    - People: invite and manage people
    - Courses: create, edit and manage courses
    - Teams: create and manage teams

TeamTrain ia
TeamTrain navigation on iOS