visual Design for Imaging Service Portal

The Imaging Service Portal is a radiology-focused healthcare portal that supports over 8,000 providers, schedulers, and managers navigate ordering and scheduling imaging exams.

Originally, the Imaging Service Portal was “RadPortal” and only served Mass General Hospital. My team was tasked to expand and rebrand the site to serve the new Mass General Brigham brand, now a 14-hospital enterprise. As the strategic design lead, I worked with our Service Now developers to execute the visual design according to the new brand guidelines, while differentiating the portal from other hospital websites and adding a unique, brand-approved visual identity, for Radiology. I incorporated user experience and interface insights from the user interviews, surveys, and screen observations I co-conducted over two years.

homepage Layout

• For Imaging Service Portal, we prioritized most important content based on user feedback, to live above the fold. It better consolidates space, and minimizes scrolling.

• Through user interviews, we identified the top 3 “one-click” content areas and made them into easily scanned icons under the search bar: Ask a Radiologist for providers, Contact Operations for all users, and Schedule by Location for schedulers. RadPortal’s previous navigation menu and 6 icons offered duplicate information that led to the same places.

• Through screen observation research, we found that providers used the search bar the most to find content vs. browsing the navigation bar and other links. We upgraded our search functionality to support generative AI capabilities.

• Latest Imaging News is dynamic content, which aids in integrating internal communication across imaging sites. We moved it above the fold to show new updates. Previously, Announcements in RadPortal was a link buried in the footer of the site.

Imagery

I took photos of the clinical spaces at our newest MRI location for inspiration. The exam rooms feature x-rays of plants on opaque glass walls, which enhance the environment for patients, providers, and techs. I wanted to create a sense of calm and continuity between the spatial and digital experiences within the imaging journey, so I incorporated the plant x-rays into the header image for the portal.

iconography

I selected and customized the icons on IMG Portal from our corporate brand toolkit to visually support the main navigation headers.

tone

Mass General Brigham’s branding emphasizes a warmer shift away from a more sterile, corporate healthcare look and feel. From the friendlier feel of Roboto Slab, to the playful light teal (#B1E4E3) in the brand guidelines, I strive to find ways to add a fresh perspective to Radiology content, while staying true and consistent to the brand style guide. In our onboarding and educational resources for providers and referring offices, I chose to create and employ characters as human-centric, engaging tools for explanation.

human-centric art direction

marketing materials

To promote the launch of our onboarding feature, “Get Started,” I designed postcards to distribute across the different departments and practices across the hospital who use Imaging Service Portal. After this promotional cycle in July 2024, we saw an increase in new users by 50% from the previous month.

Recurring motifs

The wave motif in the content breaks on our homepage refer to the waves in electromagnetic radiation, used in X-rays and MRIs. This design element is unique to Radiology’s visual identity, while still maintaining the corporate brand. Waves are used for transitions in the instructional video for the launch of Imaging Service Portal and in our promotional items for referring offices, such as our annual calendars.