Mobile Menu Redesign

UX Case Study • Eastern Kentucky University • 2022

Introduction

The goal of this case study is to present the redesign process of a mobile menu in Wordpress. This project was completed in 2022 as part of a content management system migration from Modern Campus OmniCMS to Wordpress for a group of university websites.

Role: UX Designer, Front-End Developer
Team: Web Services (Communications and Brand Management)

Problem Statement

When a site migration timeline was unexpectedly moved up, the mobile menu redesign became an urgent task when the themed content management system menu interface did not meet the needs of the university community userbase.

The mobile menu was confusing and frustrating for users across personas. The default design lacked clarity, intuitive design elements, and institutional branding. It was difficult to navigate and lacking in accessibility standards. My goal was to redesign the mobile menu to improve the user experience, increase engagement, and improve accessibility standards.

Project Constraints

Limited menu item modification: We have a limited number of menu items that we can modify due to various constraints such as content availability, stakeholder feedback, and timeline limitations. We need to work within these constraints while still prioritizing user experience and institutional imperatives.
Restricted timeline: Because of unexpected changes to the timeline, the total duration allotted for the project was limited. Strategic use of time and resources, especially in the research and design process phases, was crucial for success. This shapes the scope of the project and the extent in which feasible and flexible solutions can be implemented within the broader migration project.

Research & Analysis

User Persona

Given the limited time for research, we established a user persona that aligned with the recruitment goals of the institution.

User Flow

The original EKU mobile navigation design features a dropdown menu that expands to reveal the site's main navigation with a hamburger icon. The dropdown menu is designed with a clear background color, and the menu items are separated by a horizontal line, making them easy to distinguish. However, the original iteration of the menu lacked the architecture found on the desktop menu, primarily with the ability to navigation through discrete menu headers rather than a long stack of all menu items. The EKU menu is too large to simply be translated into a stacked layout without headers and dropdown views.

The user flow (Whimsical) assumes the ideal engagement of our established prospective undergraduate persona. One of the key indicators from user research was the need for visual cues to break up the text and reducing the need to learn multiple organization system to navigate the website, removing unnecessary menu items (such as address and donation links) to reduce visual clutter.

Established Objectives

Improve structural clarity in navigation: The initial mobile menu design was cluttered and cumbersome to navigation. It lacked a clear hierarchy and did not reflect the desktop menu structure. I wanted to create a more accessible, intuitive and user-friendly navigation to help all users locate resources and information.
Prioritize visual organization: Working within the constraints of limited menu item alterations, it was important to address the visual organization of menu item and improve user experience. Replicating the grouping structure from the desktop menu and incorporating visual elements presents a more logical and intuitive interface for users.
Improved branding: The current mobile menu did not align with the university brand standards, particularly in regards to color, font, and feel. I wanted to incorporate design systems to make a more cohesive and on-brand mobile menu to improve brand awareness.

Tyler Jackson

17 / High School Student

Goals: Tyler is excited about the prospect of attending Eastern Kentucky University (EKU) and wants to apply as soon as possible. He needs to find out more about the admissions process, requirements, and deadlines.

Technology: Tyler is comfortable using his smartphone and tablet to access information. He prefers to use his mobile devices for convenience and accessibility.

Challenges: Tyler is a busy high school student with a lot on his plate, including schoolwork, sports, and volunteering. He wants to make sure he's accessing accurate information about the admissions process, but finding the time to research schools is a challenge, and needs quick solutions.

Design Process

Too Many Items, Too Little Space

Throughout the project, a key concern was the limited amount of space for a mobile menu on a handheld device. Finding a method to accommodate a large site navigation with multiple flyouts, headers, and menu items presented a challenge. The original menu design removed the structure of the desktop menu and created stacked menu item blocks that have to be navigated by scrolling through all items. To reimagine this section, I turned to the visual hierarchy that users were already familiar with in the desktop site. Using headers, flyouts, and buttons, we attempted to replicate the horizontal desktop menu into a vertical form on digital devices. In feedback, this was successful because doing so eliminated an additional navigation element to learn how to navigate. The headers on the desktop navigation were replicated in mobile navigation, which streamlined the ability to quickly and accurately navigate a large menu regardless of device.

Iterative Design: Visual Toggling

While developing toggle indicators for the mobile menu, I engaged in an iterative design process aimed at guaranteeing that the interface was intuitive, visually distinct, and user-friendly. Since the desktop menu was already structured by flyouts and headers, it was most intuitive to replicate this experience in the mobile navigation. However, the method of engagement moves from clicks to taps with the device. I wanted to create a visual cue that indicated how to engage with the menu was with a toggle button.

It was also important that users were able to understand the visual cue presented by the button. Not only did their introduction to the menu help users to understand how it engage with the interface, it also communicated that there were menu items nested under the headers. A plain button could not achieve this goal. In the first iteration of our design, we created basic toggle buttons that had a simple on/off state with color. This had multiple issues, namely accessibility and meaning.

In the second iteration, I added visual markers to communicate the ability to expand or close menu headers. My initial proposal was to use contextual guidance found elsewhere on the migration site in accordions and tabs with an 'x' icon to signal expand and '-' icon to signal collapse. However, after testing, this did not adequately capture the user experience of navigating the menu. Instead, because of the verticality of the mobile menu, up and down arrows to signal the vertical expand/collapse toggle for menu items were selected as the appropriate marker for optimizing user experience. In feedback, we found this component helped to improve user engagement with the interface and distinguish menu items more clearly.

Brand Identity

While the primary imperative behind this project was one of function, it was also an opportunity to incorporate design systems established as part of the migration project into the Wordpress CMS. Working with the Visual Identity Guide, our team identified typography and a color guide that customized the navigation to the institutional brand standards.

Wireframes & Mockups

sets of buttons of various design and color, including maroon, yellow, and grey

Solutions & Results

The implemented solution followed the wireframe and organization plan outlined in the design phase of the project. The resulting design meets the project objectives:

Improved Clarity and Functionality: While a reorganization of menu items and structure was not feasible given the constraints of the project, the new redesign echoes the architecture of the desktop menu, streamlining the navigation process for user experience between devices. This addresses the problem of having two navigation system to learn and successfully replicates the same header-item organization across devices.
Visual and Brand Identity: A key imperative of the project was not only to improve navigation, but to create consistent look and feel for brand identity across web products in the migration. The inclusion of the EKU maroon as a visual indicator of tap and header expansion/contraction accomplishes both goals of improving visual organization and maintaining brand identity.

Reflection

Beyond the need for stakeholder involvement in reorganizing and simplifying menu items, further accessibility and technical improvements are needed. Future work includes better semantic HTML, improving tap areas and keyboard navigation, and Wordpress menu walker that incorporate accessibility improvements, such as buttons for menu headers.