Crafting a website that promotes empathy for patients living with PBC
Project Type: Educational website w/ community engagement features
Role: UX Designer
Project Length: approx. 3 months
Methods: User research, Competitive audit, Personas, Journey mapping, Stakeholder interviews
Collaborators: Sr. UX Designer, Brand Supervisor, Lead Strategist, Digital Producer, Sr. Developer, Key Client Stakeholders
User engagement up 67% over 6 months
✨
Hi-fidelity mockup creation time reduced by 80%
✨
Dev hand-off time reduced by 80%
✨
User engagement up 67% over 6 months ✨ Hi-fidelity mockup creation time reduced by 80% ✨ Dev hand-off time reduced by 80% ✨
How might we create a digital space for these patients to feel heard and seen?
Patients (30-60yrs old, primarily biologically female) struggling with primary biliary cholangitis (PBC) are feeling isolated due to their quality of life. They lack the resources to deal with friends, family, and healthcare professionals, as well as any strong sense of community with others sharing their experiences. How might we create a digital space for these patients to feel heard and seen?
A competitor audit reveals opportunity for digital community space
In my role as the Creative Lead, I joined the project during its later stages, post-competitor audit and user interviews. While not directly involved in these initial phases, I leveraged the outcomes to spark valuable brainstorming and journey mapping sessions. The competitor audit unveiled existing patient-facing websites, highlighting their emphasis on educational features, lacking a sense of community. Recognizing the opportunity for improvement, our team focused on creating a more modern and welcoming digital space. Responding to client stakeholders' request for 'modern features,' we conducted an audit leading to the implementation of a home page search function, ensuring easy access to information and setting a communicative tone for visitors, aligning with our vision of fostering a supportive online community for those with PBC.
Personas allow the team to emphasize empathy and focus in on key features, like an interactive emoji cloud
Understanding the unique challenges faced by PBC patients and armed with insights from user interviews, we delved into creating two personas – Melanie and Barbara. Melanie, a recently diagnosed 43-year-old, sought resources to bridge the communication gap with her family and healthcare team. Barbara, a seasoned 61-year-old, craved a community to share her experiences. Crafting these personas wasn't just about defining characters; they became the narrative voices guiding our content and graphics, fostering a personal and welcoming tone on the website.
The user interviews further illuminated the daily struggles of patients, highlighting moments like morning fatigue and the emotional toll of pruritus. Recognizing their need for more than just educational materials, we embarked on a journey mapping process. This exploration underscored the critical necessity for a community-driven platform with resources on discussion starters and explaining their condition. This empathetic understanding fueled our commitment to shaping a website that addressed these specific needs, shaping the user flow and informing the sitemap for a truly supportive digital space.
Crafting a design system reduced hi-fi mockup creation time by 80% and dev hand-off time by 50%
Although the process has been straightforward until now, due to time constraints we encountered a hiccup in process. Transitioning to the visual phase presented a challenge with the absence of finalized brand elements due to ongoing market research. Seeing an opportunity, I crafted a flexible design system capable of adapting to evolving brand aesthetics. This meant that we were running several processes simultaneously rather than in order, and often without much time to stop and review in between.
Despite this, I was able to craft a base for the system in three days that we expanded over the course of hi-fidelity mockup creation in the next two weeks. It was important to always make sure I was checking in with stakeholders whenever possible, given the timeline and the speed at which we were moving. This translated into a lot of iterating and adaptability with our process.
Hi-Fidelity Mockups
Design System
The development team, facing time constraints on the desired emoji activity, sought additional time despite streamlining it into a word cloud-esque feature. To manage this, I divided responsibilities, focusing on creating a design system that became the backbone for all digital efforts within the initiative. Explore the design system creation process in detail through the accompanying video.
After launching on time and under budget, user engagement was up 67% over 6 months (GA)
The successful and timely launch of the website, within budget constraints, marked a significant achievement. The implementation of key features aimed at shaping the product's roadmap provided a solid foundation for ongoing success. To ensure continuous improvement, we established a set of key performance indicators (KPIs) focused on user engagement, feedback, and site interactions. These KPIs, including click-through rates, time spent per page, and user responses on page footers, allowed us to gauge the effectiveness of our design and content strategy. By tracking metrics such as positive and negative responses, email sign-ups, downloads, and engagement with the emoji cloud feature, we aimed to gather valuable insights for future enhancements. Additionally, monitoring the most commonly searched sections via the home page search form contributed to refining the user experience based on user needs and preferences.
If I could change anything, it would be to enhance focus on accessibility and tab navigation earlier in the process.
Reflecting on the project, I acknowledge the valuable lessons learned and areas for improvement. The post-launch realization of the need for breakpoint components highlighted the importance of a more thorough discussion on design system requirements and early-stage planning. In hindsight, I recognize the potential benefits of reprioritizing certain last-minute features to ensure a more comprehensive launch. This experience underscored the inherent challenges in project management and the perpetual desire for additional features. Moving forward, I aim to enhance the focus on accessibility features, particularly ensuring proper tab navigation for assistive devices and minimizing script fonts, aligning them with branding requirements. These insights serve as a roadmap for refining future projects and optimizing the overall design and development process.