Introduction
Role
I worked as a user experience and interface designer on a team of 2 (myself and the lead designer) and was the primary designer for this project. As a team, the lead designer and I brainstormed frequently on how the search should look and function.
Contributing independently, I produced nearly all of the visual design work, conducted many hours of research and user testing, and detailed all attributes of the new design in an 8-page design specs document.
Tools
Sketch for creating wireframes, mockups, and some of the testing prototypes. InVision and Adobe XD for creating testing prototypes and interface animations.
Process
My design workflow typically follows the traditional design thinking framework - Empathize, Define, Ideate, Prototype, Test.
Structure
This project changed and evolved every step of the way. We knew for sure that the search needed a redesign, but how it should look and work wasn’t completely clear from the start. As the lead designer and I worked through existing problems, we also encountered new problems we either had not anticipated or had created for ourselves.
I have structured this case study as a series of the problems we encountered and the improvements we made.
Background
The 10 global Missionary Training Centers (MTCs) of The Church of Jesus Christ of Latter-day Saints host over 30,000 volunteer missionaries each year in their preparation for missionary service.
MTC Tools is an internal business web app that serves the employees of these 10 MTCs. It serves as the interface of an assortment of management tools for the database of the 100,000+ missionaries that are actively stored in it.
Pain Points
MTC Tools changed a lot over the last few years as more MTC employee departments utilized MTC Tools and as legacy apps were and continue to be consolidated into the internal web app. The main search feature of the app became complicated and slow as users’ needs changed and more functionality was added. By the time I joined the team, it had become more of a secondary Custom Search (MTC Tools’ advanced search page).
Simply stated, these are the users’ pain points that we knew of before conducting research:
The search is information overload, so it can be hard to find the target person
Customizing search options is more time consuming than it needed to be
The actual search is slow
Old version of the ‘quick’ search
Research
I began by identifying the different departments that would use the search, then sent out e-mail questionnaires to employees from each department to identify their needs. Though it wouldn’t be possible to perfectly meet all the needs of each department, I wanted the search to be as inclusive as possible.
Additionally, I researched other websites to gain a better understanding of what existing quick and advanced searches are doing, and what the biggest differences between them are.
Over the duration of the project, I performed several rounds of research with users, using interactive prototypes to test our design choices. Most often, this testing validated the designs, and sometimes identified key areas for improvement.
The Goal
Where a majority of the employees that use MTC Tools use the search feature daily to complete a variety of essential tasks, a better quick search would positively impact hundreds of employees’ daily workflow. In order for this to happen, the new search needed to be fast, simple, and intuitive so that users could spend as little time on the search as possible - ideally 30 seconds or less per interaction:
1. User opens search (1-3 sec)
3. User scans and selects desired result (5-15 sec)
2. User enters query (5-10 sec)
4. User is taken to target page
Early Exploration
These are some of my sketch pages for working out what the search should look like.
Content Organization
The old search used a table format that was informative but overwhelming.
The new search utilizes visual hierarchy to prioritize the most important data types and organize them to be processed quickly. Images are larger and easier to see. The name is largest and darkest, and other info is lighter and smaller. Text that matches the search criteria is bolded, and all info is organized into a compact row, rather than in a table format.
The image gallery below includes some of my early explorations for creating organization and data hierarchy.
Custom Missionary Search Link
In some use cases, the stripped-back capabilities of the quick search would be insufficient to return the results the user is looking for.
We changed the old Custom Search button to a more subtle link that is only present when relevant: on the recent searches page, with the missionary category header, and when no results are returned.
Custom search button in the old search
The image gallery below includes some of my explorations of how to implement the custom search link. The last image in the group is the design we selected for the final version.
Streamlined Search Process & Additional Page Types
Previously, it was only possible to search for either missionary or employee profiles, and only one type at a time. We discovered through user testing that it would save users a lot of time in daily tasks by making more page types searchable than just missionary and employee profiles.
The new search returns all relevant results of all search types simultaneously in an organized and navigable way. I included a breadcrumb trail for pages with menu parent groups to improve wayfinding across the website.
Search Category Navigation
This was a problem we created for ourselves. Where multiple result types could now be searched simultaneously, it was necessary to have a way to navigate through all of the categories and results quickly.
Each section header displays the number of results returned, and each category shows a maximum of 15 results before displaying the “View All Results” text button, which expands the full category within the search.
Final Product
We worked painstakingly with the developers to ensure that the coding and the interface would cooperate to make the new search fast. Queries on the old ‘quick’ search that literally took over a minute to return results now take a fraction of a second.
Recently Viewed page, displayed before search query is entered
Desktop example query
Mobile for the same query
I did a small amount of mobile design for this project. The previous appearance of the mobile version of the search didn’t change drastically, since it was much simpler to begin with, but I worked to unify the design specs for desktop and mobile - meaning simpler code for the developers, and a consistent experience on any device for users.
Searching results match for both primary and secondary attributes to provide search flexibility
Measuring Impact
In controlled test settings where the search functioned as intended, all of the users loved the new, clean design, and found it to be intuitive to use. However, my time on the design team came to a close shortly after the new search was released to production, so I do not have data to measure its impact.
If I were still on the team, I would use a mixture of both qualitative and quantitative methods to measure the new design’s success and impact:
Seeking verbal or written feedback from users
Tracking website navigation - whether users use the website menu or quick search links for navigation. Where it was not previously possible to do much navigation through the search, any increase would denote improvement.
Tracking what type of search users use. An increase of using the quick search and a decrease of the custom search would indicate that it is helpful and efficient.
Tracking how much time users spent performing searches. An increase of searches with a decrease in time spent using the search would indicate that the new design is more efficient.
Twist Ending (dramatic symphony noises)
A few days before the new search was released to production, last-minute development changes were made and our design team did not get to review them thoroughly. Once released, the search did not function at all like we had intended. Many users were forced to figure out frustrating and time consuming work-arounds for daily tasks that were previously simple and quick.
The lead designer and I worked to repair as much damage as possible with a quick solution. I conducted testing with as many users as I could within a week’s time to make sure that the addition of a filter menu would address users’ pain-points intuitively. Thankfully, we saw some improvement once the band-aid feature was implemented.
The downside is that the filter menu contained the same search options that the old search had, when they didn’t have to be there. It was a really discouraging situation for our design team. Rather than making a clean break from the old search to the simpler new search, we retained unnecessary remnants of the old search, but with a cleaner design.
An early concept for filtering that we tossed out early on to pursue a lighter, simpler search experience.
The final result was much simpler and cleaner than the original idea we had tossed, ended up more similar to the old search than we hoped it would be.
My Takeaways
Though it was not an ideal ending to a several month-long project, the hardest experiences are often where I learn the most. This was the first time something I designed had been produced, put in the hands of real people, and then had an impact on their lives. That context drove these three lessons home in a profound way for me:
Conducting quality user testing is invaluable.
Doing sufficient research and testing helped me to identify pain-points and receive validation that protected the design intent. These pain-points and validation were supportive communication tools when the development team didn’t see how aspects of the design would be useful for users.
Good communication and collaboration are essential.
We had many instances of wonderful collaboration - both as designer-to-designer and designers-to-developers. When collaborating effectively, we were able to achieve results that were greater than any one of us alone could have produced. On the flip side, I learned from the school of hard knocks of how quickly we can damage a user's trust and confidence when proper communication is absent.
Champion your users like your best friends.
After months of working hard to create an enjoyable search experience, we watched supportive and happy users quickly fizzle out in well-merited frustration. User feedback and cooperation through testing was vital to both the development and rescue of this project.
And at the end of the day, the users are the people who have to live with my work. They deserve to be happy.