đź“ŤÂ The Windy City, Illinois
Systemic mastocytosis (SM) is a rare disorder characterized by the abnormal accumulation of mast cells in various organs. Approximately 1 in 300 to 400 individuals are affected by this condition. The AYVAKIT portfolio caters to three specific forms of SM: Indolent Systemic Mastocytosis (ISM), Advanced Systemic Mastocytosis (AdvSM), and Gastrointestinal Stromal Tumors with PDGFRA mutation (PDGFRA GIST).
The projects aim was to create a tailored, engaging platform addressing the unique needs of each condition. As Lead UI Designer, I bridged brand and digital teams, translating guidelines into a user-centric experience while upholding client vision. By designing an appealing, cohesive website, we fostered a patient community, empowering individuals to manage their health and connect with others facing similar challenges.
Design Strategy
Brand Integration
User-Centric Approach
Cross-functional Collaboration
UI Design
Upon receiving wireframes from our UX team, we undertook the challenge of designing three interconnected websites with similar elements while maintaining their distinct look and feel. This massive project required a strategic approach - breaking it into manageable phases.
We began with the Global Landing page, establishing an overarching aesthetic, then applied these concepts to the three indications. This method allowed our team to focus on one aspect at a time, ensuring a cohesive yet unique design across the entire website.
To accommodate user journeys, we focused on creating a global homepage that allows users to select their specific indication. We analyzed brand elements, observing the prominence of angled shapes, diamonds, and a signature wave representing flow. The landing page was designed first to guide the overall look for each indication, while incorporating bright, vibrant colors from the campaign.
The strong angles reflect the tabs in the navigation creating a cohesive visual experience. The asymmetrical layout system is an elevated and contemporary upgrade for the brand.
Using large blocks of our brand colors puts the color-coding system front and center while providing a clean, elegant backdrop for all the information that’s important to patients.
Using the new design element of the diamond reflects the shape of the logo, the bedrock of the brand. The shape is a flexible design construct that can act as a container for imagery or an aesthetic embellishment to content.
Ultimately, we implemented the Logo Diamond, as it best embodied the brand's identity. For each indication, we introduced unique elements: GIST and AdvSM sites provided seamless access to resources, while AdvSM offered a convenient refill sign-up. ISM, being the largest indication, featured Patient Events for community learning and a Doctor Discussion Guide for improved patient-physician communication. These tailored features collectively enhanced the user experience across AYVAKIT's revamped website.
Effective collaboration between brand and digital teams is essential.
Multi-indication design requires balancing brand consistency with individual user needs.
Phased project execution guarantees efficient progress and a unified end result.
