Tab Menu

Overview

Our student support staff and marketing consultants found our users have difficulty finding information in the program sub-pages. The web team designed, tested, and implemented a tertiary navigation menu to redirect users to the program sub-pages, which contain specialized information about tuition, courses, and admission.

‍

Design

Before the tab menu, the only way to find the other program pages was through a series of links at the bottom of the page (which don't indicate the user's position within the pages) and a small dropdown hidden in the in the breadcrumb menu.

I decided to use elements from the main navigation to reduce the SCSS bloat and to keep the component styling for navigation tightly knit. I ensured it was clear the navigational element connected users to pages within the same program, so I used a tab menu to indicate the position of the user within the group of pages.

‍

AB Testing

I used google analytics to A/B test 2 version of the site; one with the tab menu and one without the tab menu. I set the test to perform on the three most popular programs on the site to ensure that we got a wide variety of data for each test. At first, I individually tracked the views for each page. I later realized that the most important metric that I should be tracking is the collective amount of views for the sub-pages and that I was missing pages which had a tracking URL appended. Once I fixed this issue by targeting all URL's with a "/" (for example, online.missouri.edu/mu/vettech/) I found that there were more views with the tab menu rather than without the tab menu.