A Deep Dive into NU’s Program Search Bar – A UX Case Study
Who is NU?
National University is a San Diego-based nonprofit founded in 1971 by retired U.S. Navy Captain, David Chigos. As the largest, private, nonprofit university in San Diego, our mission is to provide accessible, achievable higher education to adult learners. A pioneer in the digital space, we’ve offered online classes for more than 20 years.
What follows in this case study is an in depth look at the program search bar. With over 100+ programs at National University, finding the right program for a potential student can be daunting. Therefore, finding the right program must function flawlessly. A search must be clear and concise, and have artificial learning to bring up search results that users are excepting. I have documented the process, my thoughts, methods, wireframes, prototypes, results, and finally the live page. The design process I followed progresses through five stages of user centered design: Empathize, Define, Ideate, Prototype, and Test.
Diving into the Patterns of Search and Navigating
As a known UI pattern for several years, search has a couple of key features:
- Users who use search know specifically what they are looking for — often as specific as an actual product name.
- Search lets users control their own actions and find things they are looking for
- More users utilize search on a mobile device. Complex navigation seldom works well on mobile devices so users don’t typically use it. Instead they prefer to quickly insert the search word and go directly to the result page.
- Search is the user’s escape when they are stuck in navigation – when they can’t find a reasonable place to go next, they often turn to the search function.
Analyzing the above, the following conclusion can be made: each site should consider there are different types of users and a good user experience should appeal to all of them. Bad UX is when both search and navigation are too narrow or try to target only one group of users. Good UX would include functionality that has equal weight for both search and navigation. The image below presents this concept.
The original design for the hero section had a headline, a subheadline, and button that would go to the ‘College of …” page. From there a user would have to find their program by navigating through each college page, then department, then program, which is not a good experience. Users do not know the intricacies of programs and the departments they fall under, let alone the school.
Old user flow for finding a program
New user flow for finding a program
Now We Test
We wanted to test our research and see if it yielded the results we wanted. We set up a test through the testing platform, Optimizely. The idea for this project was to create several different designs for the homepage hero section and see which one preformed the best. The test was setup with the one control/original and five variances:
- Button Centered
- Search Only – Left
- Search Only – Centered
- Search & Browse – Left
- Search & Browse – Centered
An increase in traffic to program pages did not yield an increase to the conversion rate; therefore, the next step would be to run tests to improve program page performance, which we did. Tests were completed on the top five program pages all has an increase from 5% – 97%.
The Problem with Search Results on a Mobile Device
Although we had a strong understanding of the correct UI pattern and location for the search bar, in the mobile layout, the results, which auto-populate, get cut off by the keyboard. Users are only able to see the first few programs, and scrolling is somewhat of a challenge too because the list is not full-width. Because of that, there is the potential to scroll on the site instead of the list itself – a scroll within a scroll of sorts.
Problem with iOS keyboard cutting off search results
Research for Mobile
Smartphones continue to get larger, but our hands don’t. One-hand-operation of phones became more and more difficult. A great example is a hamburger menu, traditionally placed at the top left/right corners—this can be difficult to reach. Design solutions can ensure mobile interactions remain comfortable, quick, and easy on our thumbs.
In the analysis of 1000’s of smartphone users, Steven Hoober found about 75% of people rely on their thumb and 49% rely on a one-handed grip to get things done on their phones. On large screens (over four inches) those kinds of behaviors can stretch people’s thumbs well past their comfort zone as they try to reach controls positioned at the top of their device.
Ideation for Search Drop-down
When a user taps on the search bar, the site will display an overlay having the keyboard and search bar as the focus — ready to take the search string from user. Once the user starts typing their desired program, a list will auto-populate dependent on what the user inputs.
The UI goal is to see if there is a way of splitting up the title of the program and the degree level, area of study, or format. For example, instead of the search outputting “Master of Science in Higher Education Administration” the new output would be “Higher Education Administration – MS”.
The rationale behind doing this is to shorten the name of the results, and split them into two different fields, in order to give clarity to the user regarding what program they are looking at. The new layout will still follow all general brand/layout guidelines for the site to ensure a smooth transition from home page to other pages.
The big idea here is for the user to find their program on a mobile device with ease by improving the mobile experience. The new layout fixes this problem by putting the search box at the top within the header. When users type, results still auto populate, however, a full screen box appears and users are able to see more programs.
Low fidelity prototype for a mobile device
High fidelity prototype for a mobile device
Having the search results become full-width was the obvious winner. This variation had the highest increased conversion rate on the program pages. It was a 91.23% increase from the original design.