Stanford Health Care wanted to add a newsroom search capability to their global search on their website so users could search through newsroom articles, photos and videos. However, the newsroom search had some constraints: 1) it had to utilize current search patterns and templates on the Stanford Health Care website; 2) it had to utilize filters so users could search for specific information; and 3) it had to use the search platform as the backend for newsroom search.
My role
I was the user experience designer and visual designer. I worked with a team that included a program manager, account executive and the Stanford Health Care Digital Strategy Team. Tasks included creating wireframes, creating prototypes, creating visual designs, interfacing with the client, and creating annotated specifications within Confluence.
Tools
Sketch and Confluence were utilized. Specifications and annotations were done in Confluence. Designs were done as high fidelity wireframes so Stanford could quickly implement the designs using the components and templates from Adobe Express Manager. Invision was used to create prototypes for the client to view.
Design Challenges
Design challenges for this project included: 1) working with a demanding client and short timelines in which to get the project done; 2) utilization of existing components and templates from Adobe Experience Manager which were not ideally suited to newsroom search and filters; 3) a distributed team and the inability to work with the client in person; and 4) lack of access to engineering as our agency was only doing the designs and not implementing the designs.
Process
Design Solution
The design solution focused on providing the Stanford Health Care team with a fully fleshed out newsroom search, which would be part of their global website search capabilities. We leveraged existing patterns, components and templates within the website, and customized components to fit the context of a newsroom search.
Features for the newsroom search include: 1) Integration with global search autocomplete menu; 2) utilization of existing search results and filters patterns to create a search results page with filters; 3) local autocomplete menu when within the Newsroom section; and 4) a circular navigation component that allows users to navigate between items within the search results at the detail level.
Reuse of existing templates and components was key for Stanford Health Care as it allowed them save money by not having to create new components or templates and allowed them to more quickly implement the search feature by using existing component and templates. Users would already be familiar with the existing search and filter patterns, so consistency and learnability was key.
Autocomplete Menu for Global Search
First the newsroom search was integrated with the autocomplete menu for the global search.
Autocomplete menu for global search
Toggle to switch between types of search
Search Results Page
The search results page utilized existing filters and search results patterns from the Stanford Health Care Global search. This was a challenge because the existing search results and filters patterns do not lend themselves to a simple newsroom search feature. The filters allowed users to search on different types of articles, videos and images, and also allowed the user to sort by year.
Desktop Search Results Page with Filters
Autocomplete menu within Local Newsroom Search
When typing a search term within the Local news search text box, an autocomplete menu would appear to show the user the top choices for the search term, allowing the user to see specific choices for Press Releases, Images, Videos and view all results.
Circular Navigation
A specific feature request from the client was that they wanted a circular navigation component that would allow users to navigate through search results at the detail level and still be able to return to the search results list.
Breakpoint Designs
Mobile
Desktop
Tablet
Lessons Learned
Our first inclination as a designer is always to redesign and come up with something new. However, in the case of a highly templatized and componentized website that doesn't have a lot of money for development costs, it is preferable to utilize as much of the available templates and components as possible to cut down on cost of development.
As a ux and product designer, we often have to work within constraints and we need to design around those constraints, imperfect as the constraints are.
