Making it easy to get tech help.
Redesigning the UCLA ‘Service-Now’ website.
The problem:
No one was using the UCLA IT department’s online help-request website.
A number of issues with the site’s original design made trying to submit a help request online confusing and unpleasant:
The old design:
When beginning the redesign of the site, I identified three key problems with the current design:
Problem 1 - Lost in grids
The original design featured a collection of static buttons arranged in a grid layout. The grid of buttons failed to create a visual hierarchy, and thus it was not obvious where the user could access the affordance of requesting tech help.
Problem 2 - Mental-Model mismatch
The options the buttons presented did not match the mental model of a typical user in need of technical support. The buttons asked the user to choose based on the nature of assistance needed: request, problem, etc. However, when someone needs tech support, they tend not to think of what kind of help they need, they think of what thing they need help with.
Problem 3 - Inconsistent next steps
The options offered by the buttons in the grid varied widely. Some buttons would take you directly to a specific trouble ticket form, others would take you to lists of available forms. This was problematic because the uniform appearance and layout of the buttons communicated that the buttons all offered the same type of result.
The Redesign:
Matching customer language. In my experience, one of the best ways to discover how people really think about a piece of technology is simply to look at the language they use to talk about it. Examining the language of our IT customers was my primary approach for figuring out what our customer’s mental model of getting IT help looked like.
When looking at how people usually ask for tech help, it becomes clear that almost every spoken request begins with defining the kind of thing they need help with. For example: “I need help with my printer.” As such, I felt that matching this focus on categorization in the information architecture of the home page.
The redesign of the homepage attempts to address all three of the previous design’s major shortcomings. The new page design is centered around a menu of product-categories which dynamically updates to reveal specific help items within each. This dynamic menu addresses each of the problems outlined above:
Successful changes introduced by the redesign:
- Neatly ordered options
Upon loading, the page now presents a single column of categories to choose from. These categories are aligned to the left of the page, with the sub-items for each appearing aligned to the right of the page. This creates a nice consistent flow of the user’s attention and action from left to right.
2. Mental-Modelled
The information heirarchy on the page now more closes matches the users’ mental-model. When a user reaches the page, they have in mind what sort of thing they need help with, be it a printer, application, etc. Thus, the first options users are presented with are now product-categories. This makes it easy for users to match the category choices with what they know they need help with.
3. Consistency
Each level of menu now offers only one type of information. The top-level categories menu only includes category choices. Selecting any of the category options brings up a group of only specific form options. This type-consistency makes navigating the menu hierarchy predictable and understandable for the users. Additionally, the options that previously led to a secondary form-list page have been removed. This means the number of pages a user must traverse to submit a help ticket has been reduced from 3 to 2!
Thank you for taking the time to read this!
If you have thoughts of your own on this design, feel free to get in touch.
Twitter: @evan_sullivan
