Constructing hi-fidelity mockups for 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

Tools: Sketch, Zeplin, Adobe Illustrator, Google Analytics

Collaborators: Sr. UX Designer, Brand Supervisor, Lead Strategist, Digital Producer, Sr. Developer, Key Client Stakeholders

User engagement up 67% over 6 months

User engagement up 67% over 6 months ✨

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?

Watch this short 4 minute overview of my process approaching this project.

Here is a link to the presentation shown in the video above to peruse at your own pace. It goes over the process at a high-level.

Hi-fidelity mockups created using the flexible template design system

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. 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. To learn more about the system, visit the case study here.

Once that was crafted, it was a hop-skip-jump to create the full website in hi-fidelity mockups for stakeholder review.

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.