Apellis: DTC DSE Website
2021 Shorty Awards Health & Medical - Gold Distinction
2021 Smarties North America Innovation - Gold Winner
Description
Establish Apellis as a company that cares and can be trusted for patients. Information about Geography Atrophy (GA) is hard to find. Let’s capitalize on our first-mover advantage of pegcetacoplan and own the educational narrative in the space. This will also allow us to increase the education of the disease and develop website tools for prospective patients and caregivers that spark urgency to speak with their ECP about their symptoms. In addition, creating a registration component for an education kit on DSE.com can serve as a place for us to find prospective patients and build our CRM list.
Objective
DSE.com will serve as a location for education and information about GA. For those who visit DSE.com after seeing their ECP, this will be a location to learn more. For those who find DSE.com organically (SEO/SEM) or through lead gen efforts, DSE.com will help them understand the impact of GA and feel there is a need to talk to their ECP.
What I did
• Site Architecture
• Wireframes
• Chatbot Optimization
• Functional Annotations
• User Acceptance Testing
Phase 1
Data Sources & Insights
Collaborated with our copy and strategy teams while leveraging data insights provided by our clients to help inform the development of the site architecture while also considering where the interactive features will live on the site.
Phase 2
User Personas
After establishing our primary persona—Lisa, data insights revealed there were no significant distinctions in Lisa’s behavior based on traditional age segmentation. Therefore, we decided to focus on the effects of arthritis within Lisa’s key life moments and how Voltaren can support Lisa through each of them.
Work
• Negatively impacts someone’s confidence in their ability to perform and succeed.
• Creates a fear of not being able to maintain normal daily interactions with colleagues.
• Becomes a challenge to manage the emotional and physical pressures in a work environment.
Social
• Negatively impacts someone’s confidence in their ability to perform and and succeed.
• Creates a fear of not being able to maintain normal daily interactions with colleagues.
• Becomes a challenge to manage the emotional and physical pressures in a work environment.
Family
• Can be isolating and challenging without family around to help with everyday tasks.
• Reduces energy and desire to spend time with loved ones.
• Becomes exhausting to avoid showing family and loved ones any form of pain and suffering.
Phase 3
User Journeys
The development of the pre and full launch user journeys was a collaboration across multiple teams in order to depict the different ways our personas interact with the brands multiple channels and touchpoints throughout the digital ecosystem.
Phase 4
Information Architecture
By combining the key components of our content strategy, target audience data and their journeys we were able to develop the primary sections of the site map and define how content and messaging will transition between Pre and Full Launch.
What is Arthritis?
Pre Launch:
To educate users on the science of arthritis in relatable language and engaging infographics that explains the different types of arthritis, symptoms of arthritis and causes of arthritis.
Full Launch:
Introduce video and additional articles that emphasize the direct effect of pain on specific areas of the body.
Living with Arthritis
Pre Launch:
To create a connection with users who know they have arthritis providing content with an emphasis on natural remedies and pain relief solutions.
Full Launch:
Offer lifestyle content and solutions to remedy their arthritis pain—including exercises for targeted areas of the body, musical playlists to get people moving and suggestions on how to help manage their arthritis pain throughout their own individual “life moments.”
About Voltaren Gel
Pre Launch:
A product detail page that outlines the product benefits and key ingredients of Voltaren Gel using comparison charts to highlight the distinctions between arthritis pills and gels and other arthritis pain medications.
Full Launch:
Visitors can purchase the product, read and write reviews, understand the correct dosage and how to apply the product in order to achieve the most effective results.
Phase 5
Wireframes
I followed the React framework guidelines and a mobile-first approach during wireframe development. The primary sections of the site serve as content hubs providing users with direct access to relevant health, wellness and lifestyle articles. A series of coupon offers, eCRM sign-up and buy-now opportunities (essential for collecting first-party data) were strategically placed in key locations throughout the site. The direct-to-consumer experience is supported by a dedicated product page showcasing Voltaren’s efficacy and unique product characteristics in addition to customer reviews, testimonials and product education videos.
Visual Design
The wireframes helped establish the layout, functionality and content hierarchy of the site. The look and feel was brought to life during the visual design phase and then used to develop an interactive prototype for usability testing.
Mobile wireframes
Homepage: wireframe / visual design
Landing page: wireframe / visual design
Article page: wireframe / visual design
Desktop wireframes
Homepage: wireframe
Homepage: visual design
Landing page: wireframe
Landing page: visual design
Article Page: wireframe
Article Page: visual design
Sample Form: wireframe
Sample Form: visual design
Accessibility Features
We understood that some of our users may have arthritis in their hands in addition to other health conditions that would make it challenging for them to navigate the site. We addressed these concerns by implementing a robust set of accessibility features and helpful tools to create an inclusive and engaging site experience for all visitors.
Chat Bot
Can be navigated by using the voice search feature or by simply tapping it on the screen and typing to chat.
Tap Targets
The larger buttons, prominent links and clickable modules are easy to identify and interact with on any device.
Voice Search
The voice search feature gives users a hands-free option to assist in their search for specific topics or pages.
Scalable Text
The text resizing tool gives users the ability to adjust the size of the text for improved legibility.
Tool Tips
Hover state tool-tips offer context and guidance specific to the voice search functionality for both the chatbot and search.
Video Transcripts
Each video is supported by a transcript outlining text and voice over to assist users with auditory impairments.
Phase 6
User Testing
We partnered with the Arthritis Foundation and conducted usability testing on real arthritis patients to help uncover any missed opportunities or friction points throughout the users journey.
Our third-party testing service used our interactive prototype and audience specific questions to guide 30 in-person and remote participants through a series of tasks that were recorded and streamed for live viewing.
In-person testing with moderator
Live-stream testing session on desktop
In-person testing observation room
Live-stream testing session on mobile
Takeaways
The testing results were overwhelmingly positive—99% of our participants found the site easy to use and our arthritis-friendly features and accessibility modifications were all well received.
• Information provided on the site (about the medication and about arthritis in general) was helpful and supportive.
• Reviews and testimonials made the site trustworthy and transparent.
• Accessibility modifications made the site innovative, creative and useful.
• The visual design was friendly, clean and navigating the site was easy.
• The option to buy direct from the brand without being redirected elsewhere was a huge plus.
Phase 7
Functional Annotations
The functional annotations were applied to the final visual designs. It was important that the annotations clearly articulated how each call-to-action is expected to function in order to eliminate any assumptions or misinterpretations at the authoring stage.
Site shell desktop: global navigation
Site shell mobile: global navigation
Site shell desktop & mobile: global footer
Phase 8
User Acceptance Testing
The staging site was tested on various devices and browsers 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.
Post-Launch Performance Highlights
VoltarenGel.com launched in April of 2020 as a mobile-first website experience tested and validated by real arthritis patients.
The strategic placement of the eCRM sign-up modules proved to be beneficial. During the first month of full-launch the site had over 35,000 users opt-in to the eCRM program and a consistent sign-up rate at 4x the initial target ever since.*
The clear paths-to-purchase contributed to the first week pre-order sales as the highest one-week total sales of any brand Shoppable has integrated with.* Voltaren achieved #1 in the External Analgesics Category in just the first 3 weeks of launch and #4 in the Total Pain Category within the first month.
* As of March 2021
The Arthritis Foundation recognized VoltarenGel.com as the first arthritis-friendly website and provided accreditation on the site.