The Charge: Website Design
Description
Ignite the mitochondrial disease patient community by creating an online destination that shares authentic, compelling and engaging stories about
the disease.
Objective
Create an unbranded website that can talk about mitochondrial disease
in a way that helps patients better understand their disease and identify
a diagnosis earlier. Provide a sense of community that makes mito sufferers feel connected to others who are experiencing similar challenges.
What I did
• User Personas
• User Journeys
• Competitive Analysis
• Site Architecture
• Story-Frames
• Wireframes
• Functional Annotations
• User Acceptance Testing
Phase 1
User Personas & Journeys
We leveraged existing mitochondrial research materials and publications from Stealth Biotherapeutics, DNA and reputable mitochondrial advocacy groups to develop personas and journeys that would help identify the critical pain points, needs, and opportunities of our audience.
Key Takeaways
Most patients receive multiple non-mitochondrial diagnoses before their final confirmed mitochondrial diagnosis.
Symptoms that motivate a visit with a physician include weakness, fatigue, droopy eyelids and impaired coordination.
Most doctor’s are unfamiliar with the specific nuances of mitochondrial disease because many of the symptoms resemble other common diseases and illnesses.
Most support systems for patients include their families, healthcare providers and a vitamin cocktail.
Potential patients who visit more doctors to obtain their mitochondrial disease diagnosis are more prone to search
for answers and more invested in their current diagnosis.There are more than 250+ types of mitochondrial disease ranging from young men, women and children to the elderly.
Phase 2
Competitive Analysis
We conducted an experience audit of several reputable unbranded, healthcare and advocacy websites with a primary focus on
article content, usability, patient stories and functionality that would allow us to uncover areas of opportunity that align with our
users needs.
Relatable Content
Provide relatable content (educational, informative) and integrate this content throughout the entire website experience.
Testimonials
Display patient stories and testimonials in strategic locations across the website to help create a sense of community and trust amongst new users.
Visual Components
Deliver credible and relevant content supported by compelling imagery, infographics and videos.
Sharing Capabilities
Enable users to easily share content by displaying social media icons in visible areas throughout the website.
Accessibility
Adhere to web accessibility guidelines and WCAG standards in addition to screen reader compatibility and user control over language options and font sizing.
Site Architecture
Build an intuitive site architecture by consolidating pages and incorporating cross-linking to help encourage further engagement.
Phase 3
Content Strategy
A thorough analysis of the online mitochondrial landscape focused on content gaps and opportunities, development of guidelines for the voice and tone and the creation of new content topics that would support the brand and business objectives. These additional insights and recommendations would help guide and inform the future-state content experience.
Phase 4
Information Architecture
We applied all the data and analysis including insights from the content strategy to establish the core pillars, common themes and hierarchy of content that would become the foundation of the overall site experience.
Templates
By creating an effective system of page templates we would improve usability and save time in the design and production process. We developed a total of six templates that would make up the
Phase 5
Site Map Overview
Main Navigation & Primary Pages
Guide the mitochondrial community on their respective site journeys through organized content under a set of cohesive pillars that provides patients, caregivers and HCP’s with educational material, guidance, support and a feeling of community.
What are Mitochondria?
The article on this page will cover the healthy vs. unhealthy mitochondria symptoms of mitochondrial disease and debunk the myths that surround mitochondrial disease. Content may also include one short-form video.
Diagnosing the Disease
This page will be developed with the healthcare professional
in mind and will cover the barriers to diagnosis, the diagnostic process in addition to insights from specialists. Content may
also include supporting infographics.
Support & Education
This landing page will contain links to sub-pages on articles that cover different areas of support and education that are specific to our personas.
Support & Education: Secondary Pages
The Patient Journey
This page will focus specifically on the mitochondria patient journey and may include some multimedia such as infographics
Caregiver Support
This page will focus specifically on the mitochondria patient journey and may include some multimedia such as infographics
Advocacy Groups
Users can browse through a listing of short overviews consisting of the primary mitochondrial disease advocacy groups and access their website via links.
Utility Navigation
Assist users with usability and discovery.
Footer
Provide additional entry points to pages and content that users need to access quickly without having to browse through the site.
Phase 6
Story-frames
Before putting pen-to-paper and moving into the design phase, we developed story-frames. A series of short narratives that illustrate the purpose, role and function of each page which we used to help guide our copywriters in their content creation.
Home Page
Evoke an emotional response and connection with users who are affected by mitochondrial disease by guiding their exploration through the use of engaging copy, iconography and imagery.
About
Provide a clear mission statement that sets the tone for its intended users and entices further exploration for mitochondrial information and resources.
What are Mitochondria?
To educate users on the science of mitochondria and the essential role they play as a primary energy source for the human body.
Support & Education
Provide users (patients, caregivers etc…) with a sense of comfort knowing they are not alone and they are part of a much bigger community of people going through similar experiences.
Advocacy Groups
To convey a sense of hope and anticipation that there are different mitochondrial resources available for both patients and caregivers.
Search Results
Provide users with a concise list of results based on their search query. Establish rules for the number of visible results on each page using pagination for easy wayfinding and navigation.
Phase 7
Wireframes
We developed the wireframes using an agile approach that enabled our development partners to author the site in batches that enabled to address and questions in real-time throughout the design and development process.
There were minimal modifications from the wireframes to the final designs. By maintaining the design framework and integrity of the wireframes look and feel we were able to significantly reduce lead-times and provide the stakeholders with a finished product that was consistent with our initial designs.
Desktop wireframes
Homepage: wireframe
Homepage: final design
About Us: wireframe
About Us: final design
Community Stories: wireframe
Community Stories: final design
Advocacy Groups: wireframe
Advocacy Groups: final design
Mobile wireframes
Homepage wireframe / visual design
Search Results wireframe / visual design
Advocacy Groups wireframe / visual design
Phase 8
Functional Annotations
To ensure our partners were equipped with the tools and flexibility to support future site enhancements, we provided functional annotations in both full page and modular formats.
Full Page Annotations
Modular Annotations
Phase 9
Website Deployment
To ensure the site would function as intended, we worked closely with our technical leads and development partners to identify, document and address any bugs or visual inconsistencies prior to deployment — the new site was launched in February of 2018.