‘Find a Location’ Redesign for a Large Hospital System
Summary
The client, one of the largest hospital systems and healthcare providers in New Jersey, has hundreds of offices and labs dedicated to every area of medicine. As a result, finding the right location to get care can be a challenge for patients. Avanade re-designed the “Find a Location” section of the company’s website in order to make it easier to locate the facility closest to them with the services they need and book an appointment.
Project Specs
Scope of Work: Redesign “Find a Location” screens to make it easier for patients to find the right facility and book an appointment
Client Contact: Digital Applications Manager, Digital Applications Strategist
Project Team: 1 UX Designer, 1 Visual Designer, 1 Project Manager, 1 Architect, 1 Developer
Timeline: Four weeks
My Role: Co-led the Research and Design phases
Programs: Figma, FigJam
The Challenge
There are two main sections of the company’s “Find a Location” screens. The first is the “list view” in which patients can search for and filter the full catalog of its facilities. The second view is the “specific location” page — the screen dedicated to providing detailed information about a facility’s services and operations. By auditing both of these sections, we identified the following key challenges:
Lack of Consistency
The needs of a page describing a large medical center are very different from one for a small specialty physician’s office, so the re-design must account for these divergent use cases.
Missing Call to Action
The “list view” and “specific location” screens, did not have a clear hierarchy in terms of steps for patients to take, especially for important actions like booking an appointment.
Not Optimized for Mobile
Despite 60% of visitors to the site via mobile, the pages had text-heavy, horizontal layouts that didn’t translate well to a smaller screen.
Approach
Research: Strategy Workshop
Using Figjam, a collaboration whiteboard, we led a two-hour session with the client to review the audit of the existing “Find a Location” pages; walk through the competitive research; align on the strategic goals of the project; and identify the range of use cases for the “Find a Location” pages. This workshop allowed us to begin designing with a clear sense of the project’s objectives and the client’s preferences.
Design: Mobile and Desktop Wireframes
Using information gathered in the workshop, I drafted wireframes for the “list view” and “specific location” pages. Each week we had a review meeting with client stakeholders to get feedback and course correct. The first week, I presented the desktop view for the list and specific location screens. The second week I presented the updated versions of these screens as well as their corresponding mobile versions. After receiving sign-off on the wireframes, I handed over this work to the team’s Visual Designer, who created high-fidelity comps of the same screens.
Hand-off: Documentation and Prep. for Build Phase
This project was structured to transition to coding the solution as soon as the design phase ended. To help make this seamless transition, I helped annotate the design comps and compile the full set of documentation (i.e., atoms, molecules, and components created by the Visual Designer) into one centralized package. Organizing all the design information in one place made it easier for the Developers to understand the design and for the client to reference and share the work that was completed with other stakeholders.
Solution
The “Location List” update accomplished the goals of: transitioning to vertical cards in order to make the screen more mobile-friendly; creating a clear information hierarchy so the amount of content does not become overwhelming; and visually distinguishing the “Location details” call to action. We also worked within the out-of-the-box framework of Coveo, the search tool that will be implemented on the site.
The “Specific Location” update focused on creating a core set of sections that should be applicable for all of the company’s facilities. The new “Plan Your Visit” section provides the key details at-a-glance, followed by a new “Book Appointment” call to action button that guides patients to the relevant section of the page. For facilities that require additional content, we provided recommended components to be used for commonly recurring sections (e.g., Frequently Asked Questions and News) in order to create consistency across the site.
Reflections
I believe that the success of this outcome was driven by the decision to host an interactive workshop at the outset of the project. This session ensured that we were on the same page with the client from the beginning — understanding not only their strategic objectives and design preferences, but also the technology and budgetary constraints. Keeping these lessons front-of-mind during the design phase ensured that minimal re-work was required when the wireframes were presented to the client.
One thing that would I would have liked to do differently was to allow time for usability testing with patients after the designs were drafted. It was determined that this step wasn’t necessary because the pages stuck to design conventions and were relatively simple. But I think validating our assumptions with real users of the site is a vital step since it ensures that we achieve our stated goals for the project — even if it requires an extra step before starting the build phase.
Summary of My Contributions
Audited the company’s existing “Find a Location” screens to identify questions, issues, and opportunities.
Co-led a workshop with the client to review questions about the existing site and compare benchmark sites from peer hospitals
Created desktop and mobile wireframes for the “Find a Location” screens and presented them to the client for feedback
Collaborated with the Visual Designer on the project to package the final documentation for the client and development team
Provided support in the planning of the “build” phase