The Joint Movement

Offering easy access to essential Hemophilia, joint health, and wellness information.
Client
Sanofi
Role
Lead UI Designer
Timeline
3 Months

Hemophilia is a rare blood disorder characterized by the inability of blood to clot normally. The Joint Movement website update project aimed to enhance the digital presence of the campaign, supporting individuals with Hemophilia in overcoming barriers to physical activity.

Key objectives included updating content and imagery, addressing evolving Hemophilia A treatment offerings, and improving site performance. The campaign's goal was to shift patients' mindset from "moving less preserves my joints" to "doing the right activities can protect my joints from further damage".

Content Strategy

Interaction Design

UI Design

Art Direction

SEO Optimization

hemjointmovement.com

The old design had inconsistencies in visual elements, sign-up language, and ADA compliance. Additionally, poor SEO performance, unclear navigation, and confusing headline structure affected user experience and accessibility.

Moving the design evolution along

During the design process, we focused on addressing previous design issues and creating a more patient-centric experience. We reprioritized the CTA for better user experience and revised messaging to highlight real stories of Hemophilia patients. Updated imagery showcased new visuals, including TJM workouts and patients' lives. We also implemented SEO strategies to enhance site visibility and accessibility.

Our team focused on providing clear instructions and intuitive guidance to help users easily find necessary information. We implemented live text, clear CTAs, and anchor links for easy navigation. To organize content-heavy sections, we incorporated tabs and video sections, enhancing the overall user experience.

Collaborated with the brand team to create consistent icons and cards for on and off-site user experiences.

Explored multiple design options, using radiating curves inspired by the hero section, to convey movement and maintain visual continuity.

The revitalized joint movement website

The final design successfully integrated refreshed content, patient-focused messaging, and engaging visuals while adhering to brand guidelines and UX best practices. The inclusion of interactive workshops and expert-guided movement videos provided valuable resources for Hemophilia patients. Our thoughtful design approach resulted in an inviting and supportive environment that resonates with patients on a deeper level.

Our updated design prioritizes clear messaging, efficient scanning through a sticky progress bar, and consistent visuals with an 8-point grid. Prominent CTAs enable quick access to information and sign-ups, while section breaks enhance user-friendliness by reducing cognitive load.

This example demonstrates the sticky progress bar that follows users throughout their experience, allowing them to jump to relevant information quickly. This feature also helps reinforce The Joint Movement narrative.

Key takeaways

1.

Incorporating user input leads to more effective design iterations and a better UX.

2.

Collaborating with the brand team creates a cohesive cross-platform experience.

3.

Implementing elements like sticky progress bars enhances UX.

Ready to discover the magic within your next project?

Discover now