Redesigning Enterprise Search at Mayo Clinic (Part 2)
In Part 1, I went over the genesis of the project and the user research that established the baseline for comparing future designs. In this part of the series, I will go over how the team designed the new search results page.
Redesigning the New Search Results Page
The UX Design team and I met with the Dev Team and discussed technical limitations of the search vendor’s software and what can be implemented in the short time frame of three months. We decided to leave out several features that were recommended by Nielsen Norman’s Intranet Search best practices guide, including the ability to sort results by date/relevance, show last updated date with each result, type ahead search suggestions, and filter results by departments and locations. The UX Design team recommended that these features would be implemented in future releases.
The existing search results page had several UI elements under consideration for a new redesign.
(1) Duplicate search box. It was redundant to have the search box in both the uni-banner and the search results page. In the new designs, we removed this extra search box.
(2) Content type filters hidden under dropdown. The results filters for choosing content types were hidden away making it difficult for users to filter results by content type.
(3) People results in the table format was not visually appealing and missing some useful information.
(4) Search For ‘term’ On external systems is only there because these external systems are not currently indexed by the search engine. Can we make its purpose clearer and also make it more visually appealing?
Refreshed Design Elements
Filter Results
We wanted to see if users preferred the pill style or the normal style checkboxes. We would expose these two variations in our user testing to examine which was the most preferred.
People Results
The people results were redesigned in a more modular card style that allowed us to fit the people results in all screen sizes (mobile/tablet/desktop).
Search For ‘term’ On
The Search For ‘term’ On external systems section was redesigned to follow Mayo Clinic’s new design language. Design 1 features new icons from Mayo Clinic brand standards. Design 2 has no icons.
Results with Document Type icons
For results that are documents (not web pages), we feature icons next to the result. This was considered a best practice according to Nielsen Norman. Design 1 features document icons. Design 2 does not include icons.
New design elements
The new design elements included a ‘Feedback to Improve Search’ link, and people’s results with their photo.
Design Layout Concepts
For user testing, the design team created two Figma prototypes using the new and refreshed design elements. We also created mobile/tablet versions. This resulted in 6 variations, which we named Design 1 (desktop), Design 1 (tablet), Design 1 (mobile), Design 2 (desktop), Design 2 (tablet), and Design 2 (mobile).
Mobile/Tablet Design Considerations
Since mobile/tablet has limited space, we had to find out what design elements to prioritize first. Based on metrics, people search was one of the top searches. However, we weren’t 100% sure that prioritizing it first in the results hierarchy was the right move to make. In Design 1, we made it featured prominently, and in Design 2, we did not.
Design 1 (desktop)
- Design 1 features a two column layout versus Design 2 which features a 3-column layout
- Design 1 features pill style checkboxes for Filter Results
- The aside column on the right features People Results and the ability to carry over the search term to external systems search engines (Search For On).
- Design 1 is icon heavy versus Design 2 which is not.
Design 1 (Tablet)
When the screen is resized to tablet, the design switches to use a one column layout. The People results are automatically opened and prominently displayed before the Intranet results. In Design 2, we hide the People results.
The Search For On section is moved into a dropdown menu right next to the Filter Results.
Design 1 (Mobile)
When the screen is resized to mobile, we move the Filter Results and Search For On to an accordion menu. When the accordions are opened, they show their respective content, and it pushes the other content further down the page.
Design 2 (Desktop)
- Design 2 (Desktop) uses a three column layout versus Design 1 (which uses a two column layout).
- The Filter Results section is prominently displayed on the left aside column. It uses traditional checkboxes, instead of the pill style checkboxes.
- No icon treatment for both the document type results and the Search For On.
Design 2 (Tablet)
- People Results will be initially hidden inside the dropdown menu, until the user clicks to expand the dropdown. This is different from Design 1, where it is initially shown, and not hidden inside a dropdown menu.
- When the People dropdown is clicked, the People Result cards are flowed horizontally with a maximum of two results shown.
- When the Filter Results dropdown is clicked, the Filter Results as normal checkboxes are shown and flowed vertically.
- When the Search For ‘term’ On dropdown is clicked, the external sites listing is shown in a two column format.
Design 2 (Mobile)
Design 2 (Mobile) behaves almost exactly as Design 1 (Mobile), except for pill style checkboxes, and no icon treatments.
Redesigning Enterprise Search at Mayo Clinic Part 3
In the continuation of this article (Part 3), I will go over the user testing process, the insights, and the recommendations we made.
Follow up articles and keeping in touch
Thanks for taking the time to read this. If you want to stay in the loop with what I am writing, please follow me on this platform, as well as on LinkedIn.
