Virtua Health ahamiltondesign August 20, 2022
UX/UI Design – Centretek

Virtua Health

Virtua Health logo
Kickoff
Nov 2021
Launch
Jan 2024
Role
UX/UI Design
Toolkit
Axure RP, Sketch, InVision, Illustrator
Team
UX Writing, UX/UI Design, Project Management, Engineers
Here for good, establishing brand trust.

Virtua’s brand represents their core values, their commitment to serving the community, and their high standards as an institution. They recently underwent a full rebrand, and although the messaging was beginning to trickle into their website, the stylistic elements weren’t being conveyed. We were tasked to redesign their website, enforcing the brand through messaging and design, while also improving upon patient engagement and conversions.

Project goals

  • Prioritize access to care and transactions
  • Improve the functionality and UX of the provider search
  • Create a consistent look and feel for services and programs with comprehensive content and pathways to providers and locations
  • Improve accessibility and adhere to appropriate standards
  • Represent Virtua’s ‘Here for Good’ brand to convey trust and confidence

StrategyDefining 7 strategic imperatives

Each strategic imperative is based on stakeholder interviews, competitor analysis, and consumer research.

experience

Deliver an engaging and intuitive experience

Demystify healthcare

Provide a clear path

Represent Virtua brand

Build a relationship

Support measurable growth in patient volume and revenue

Build a secure, scalable website, and empower the Virtua team​

The ChallengeTelling the brand story

Virtua Health is a Magnet-recognized health system based in South Jersey. Due to the rebranding, the new website design and messaging needed to establish their brand pillars: authentic, trustworthy, compassionate, driven. The website also needed to be highly functional, with a reimagined search experience and integrations with various directories.

Centretek is one segment of a multi-agency company, and our sister company had already been involved with marketing campaigns for Virtua. We all partnered together for this website redesign to make sure every element was on-brand and consistent with Virtua’s vision.

My role

I not only wore the UX design hat, but also worked closely with the strategy team to redefine site structure and IA. Later in the project, I collaborated with the BA to write requirements, and the engineers to ensure the build adheres to the design and that the functionality is accurate.

Target AudienceMeet the users

Woman in yellow sweater

Name: Bayley
Age: 32
Occupation: Personal trainer

Bayley is a new patient to Virtua and needs to find a cardiologist easily and quickly. She wants to learn more about Heart and Vascular services and make sure Virtua is the right place for her.

Older man in gray shirt

Name: Joseph
Age: 64
Occupation: Writer

Joseph has a good relationship with Virtua after years of being a patient. He wants to give back by volunteering and donating and wants to know what impact his donation will make to Virtua and the community.

Woman in the library

Name: Samantha
Age: 28
Occupation: Stay-at-home mom

Samantha recently gave birth to her first child at Virtua and needs to access MyChart to pay bills and view her medical records. She also would like to find pricing information and estimates for future care.

ApproachAdaptable to change

Insights

We pulled extensive analytics data to better learn what pages are accessed the most and what sections needed improvement. We learned the most important functionality to users, what fields were lacking in various searches, and pain points regarding content (or, lack thereof). The biggest gaps we found was a lack of personalization for searches and overall experience, limited health and wellness content, and a difficult scheduling workflow. From user surveys and competitor analysis, we pulled together a list of shared features and components to focus on.

Virtua website assessment

This informed the design process, as we then targeted the search experience, scheduling integrations, and prioritized key patient actions above the fold. As we continue through the project, we will perform usability testing on these elements. In-depth personalization is on the docket for a later phase, post launch. That will include personalization based on a user’s current and prior interactions with the website as well as personalization based on an integration with MyChart.

UX design process

1
Discover & Observe

Understand user profile and global pain points

Methods: analytics, user interviews and surveys, competitor analysis

2
Define & Ideate

Determine user goals and key features

Methods: research, requirements, information architecture

3
Develop & Prototype

Create wireframes and prototypes

Methods: high-fidelity wireframes, style guide, QA

Due to an aggressive timeline, this was our first fully agile workflow that completely relied upon atomic design. This meant that the only real visual design would be the style guide. My design decisions were derived from the distinct logo graphic of a lotus flower. Creating this design element not only would reiterate their brand, but would set Virtua apart from competitors. The wireframes were high-fidelity and created to scale. Each page was mapped to individual organisms, and then mapped to molecules or atoms. The developers used those mappings as a rulebook to then build pages in a live environment.

Virtua atomic design

Did this process work?

It’s still in progress, so check back later. I will say that with the development phase happening sooner in the process, the client was able to play around on a live site to inspect code and view on various screen sizes. However, wireframes were quickly approved by the client, and a few of the key players weren’t involved during the decision process. Meaning, some stakeholders wanted to go in a different design direction, swap a different font, and rework some of the components. We used the homepage as our example to recreate the global look and feel. 

TakeawayGlass half full

The fully agile process is not for every person or client. Each player needs to be completely informed of what this process means. The time we saved by omitting the visual design phase may be counteracted by the extra time needed to go back for larger revisions. However, if done right, it could be a really collaborative and effective process.

What did I learn?

A lot. I always utilize atomic design for consistency and to construct a design system, but I had yet to dive into the nitty-gritty of mapping every individual element. I also found my voice when collaborating with various disciplines, clearly explaining my concerns, listening to others’ opinions, and working towards a solution together. Moving forward, I will use pieces from this experience to flesh out a better process. It will still be agile in nature, but will bring back the visual design phase.