Design Process

The journey began by leveraging the familiarity of the original app's login pattern, ensuring participants felt at ease from the start. A linear path with forward and backward arrows was provided, accompanied by a menu for non-linear exploration. The design focused on a mobile-first approach, emphasizing simplicity and accessibility for users, including those aged 50 and above.

‍

The objective is to encourage the Madeline study participants to engage with the study results and content to engender positive patient sentiment towards Pfizer.

‍

Deliverables

• UX Research for current best practices
• Analysis and enriched client requirements
• Sitemap
• Wireframes to showcase user experience
  Marvel Prototype

‍

Mandatories/Assumptions

• Responsive website (works for mobile and desktop)
• Site is to be password protected 
• Creative look and feel to be leveraged from the established Madeline branding
• Content will primarily come from the study results being written by RTI/Pfizer and made appropriate for patient audience (may involve use of infographics as needed)
• Participants only see data from their group (Ibrance or SOC)
• Anticipated site size – 20 pages
• Intouch will build the site
• RC review will not be required as site will be password protected and only available to Madeline participants
• No ISI needed

‍

‍

Information Architecture

‍

Sitemap

The IA began with what we knew which is users will need a way to access this exclusive information. We proposed that their journey would begin in the same their documentation journey began - with a login. We repurposed the pattern from the original app so that a familiar experience would be carried over. After logging in they will land on a page that will directly lead to the study result data.

They will be prompt with a call-to-action button that will guide them through a linear path through all pages guided by forward and backward arrows. Alternatively, they have the option to view non-linear pages by using the menu button to view a specific page.

‍

Data Visualization & User Feedback Research  

Infographics were employed to transform complex data into a compelling narrative. User feedback research highlighted preferences for simplified language, short paragraphs, and graphics/icons to enhance textual content. Popular data visualizations included donut and pie charts, offering users control over how they consumed information.

‍

‍

User Feedback

What we found:

• Simplified language and short paragraphs
  
• Graphic/icon to highlight textual content

‍

‍

‍

‍

‍

‍

‍

Infographics/Charts/Graphs

‍

What we found:

• Most popular are donut and pie charts
• Often shown with color gradients
• Showcase percentages in graphical and textual form
• Feature to view data in different formats so users understand information that best suits them
• Puts more control into the hands of the user

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Data into Design

The content was supplied in a Word document with very little visuals. It was a collaboration between me and art direction to come up with way to visualize this data so that its an accurate portrayal of data, users will understand it, and will ft in both mobile and desktop screens.

‍

Key Wireframes Functionality Breakdown  

• Mobile-first approach 
• Easy to move through multiple data sets quickly
• Built for linear and non-linear viewing
• Same buttons and actions available on desktop with the exception of no carousel. 
• Sections are the main navigation and subsections are paginated within each section to provide visual cue of how many subsections exist.

‍

The design experience is to be be simple and approachable since users are not scientists. It needs to be accessible for users over the age of 50 with a easy to use on screen navigation.

‍

Responsive Design

The responsive design eliminated carousels, optimized engagement buttons for each data visual, and maintained consistent navigation across devices. The mobile-first approach facilitated easy navigation through multiple data sets, ensuring a user-friendly experience.

‍

Information Architecture

‍

Incorporating Additional Data:

‍Midway through the project, an add-on request to integrate data from a related study was accommodated seamlessly. This required us to incorporate additional navigation and structure the website to accomodate 2 experiences. Users could select their study at login and crosslink between websites with a consistent button, maintaining a unified user experience. 

Below shows the sitemap with the integration of the second website.

‍

Final Design

The finish designs incorporated a considerate and empathetic experience that delivered content and data in a concise user-friendly way to the participants who were included in the study. The app allows for a user experience that is non-linear and lets users choose what content they want to see in the manner in which they choose. It also provided not just a simplified navigation experience but an easy to use user feedback feature to account for the data users found the most interesting or relatable to them.

Success Metrics:

‍Success was measured through site visits, time on site, top pages viewed, page views per visit, and user engagement, including likes and other interactions.r

The Madeline Study Website stands as a testament to [Redacted] Pharma Company's commitment to patient-centric design, providing participants with an accessible, engaging, and informative platform to explore and connect with their study results.

‍