MGBHP
MGBHP aims to provide users with a seamless and user-friendly online experience, making it easy to access essential healthcare information, resources, and services. Their goal is to ensure that users can navigate the website effortlessly, find the information they need quickly, and feel supported throughout their healthcare journey.
Project Type
Redesigned and reorganized MGBHP's website by enhancing the existing design system with new components, creating a future-forward vision while optimizing usability and user experience.
Audience
Patients
Caregivers
Healthcare Providers
Stakeholders
My Role
UI/UX Designer
Tools
Figma
Contribution
User Research
Ideation
High-fidelity Prototype
Duration
2 months
How can MGBHP redesign its online platform to streamline access to information about health plans, enabling users to easily navigate and find care for their diverse health needs?"
Research
I conducted a thorough analysis of MGBHP's website, focusing on the user experiences they aimed to improve. This included examining the design system to identify both the similarities and differences between MGBHP and its parent organization, Mass General Brigham. Additionally, I researched competitors to see how they meet user needs. This research helped inform practical solutions that align with MGBHP’s brand while enhancing user experience and accessibility.
Key Findings
Brand
Key findings under MGBHP’s branding revealed slight differences between their design system and that of Mass General Brigham. Since the goal was to align with Mass General Brigham’s branding, my team blended elements from both design systems, carefully selecting components that worked together seamlessly. We also prioritized making health and health plan information easier to find and read, ensuring the website offered a more intuitive and accessible experience for all users, addressing the current challenges in navigation and content clarity.
Website
We enhanced the MGBHP website by incorporating more visual elements into each experience, addressing the issue of overly word-heavy content that made it difficult for users to quickly understand the information. This was especially problematic on smaller devices like tablets and phones. Our goal was to create a responsive design that provided a seamless experience across all breakpoints, ensuring clarity and ease of use regardless of screen size.
Design Iteration
Wireframes
We started by developing wireframes and layout sketches to explore various options for reorganizing the content. This process involved assessing existing components within the design system to determine their usability. When we found gaps, we designed new components to enhance the overall experience. Our main objective was to ensure that each health plan was clearly articulated, highlighting the benefits and features, so users could easily compare options. By focusing on clarity and accessibility, we aimed to create an intuitive experience that facilitates informed decision-making.
Visual Design
Once the wireframes received client approval, we transitioned to the visual design phase, where we incorporated both the current design system and new components. It was crucial for us to maintain a balance in visual changes, as the clients expressed concerns about making drastic alterations to their website. Such significant changes could confuse users, leading to a negative experience as they might struggle to navigate the updated interface.
To mitigate this risk, we aimed to create a visually cohesive design that subtly integrated new elements while retaining familiar aspects of the existing layout. This approach ensured that users could easily recognize and navigate the website without feeling disoriented by unfamiliar features. By aligning our visual updates with the established design language, we enhanced the user experience while respecting the clients' brand identity and the users’ familiarity with the platform.
Client Communication
Communication and feedback from the client were crucial during this process, as the visual design illustrated the true look of how their website would appear.
We engaged in extensive discussions and revisions, navigating through numerous rounds of feedback to ensure the design met their expectations while aligning with user needs. This back-and-forth collaboration allowed us to refine the visuals and ensure they conveyed the right message without causing confusion among users. Ultimately, we reached a satisfactory conclusion that maintained the brand’s identity while enhancing the overall user experience, ensuring a seamless transition for visitors familiar with the previous design.
Conclusion
In an era where patients increasingly rely on digital platforms for healthcare information, improving the user experience can lead to better engagement, increased health literacy, and ultimately, better health outcomes. As individuals across different age groups focus more on their health, the website experience becomes crucial in guiding them through their healthcare journeys. By streamlining navigation and ensuring clarity in the presentation of health plans, we empower users to make informed choices about their care options. This project not only addresses current challenges faced by MGBHP but also sets the foundation for ongoing improvements, fostering a more intuitive and engaging online experience that can adapt to the evolving needs of the healthcare landscape.
