Sunosi
Sunosi is an FDA-approved oral medication containing solriamfetol, prescribed to treat excessive daytime sleepiness (EDS) in adults with narcolepsy.
Disclaimer: The work shown was completed during full-time employment and is shared to highlight my role and contributions. This is not a client of Stone Interface.
Client
axsome
Role
Product Design (UI)
Tools
Figma, Stark, WCAG
Status
Challenge
The client needed a full site redesign to improve content discoverability, accessibility, and backend analytics—especially for the excessive daytime sleepiness (EDS) due to obstructive sleep apnea (OSA) indication. The previous site lacked structure, usability, and ADA-conscious design standards expected in healthcare communications.
Goal
How might we design a more intuitive, compliant digital experience that simplifies access to clinical content and supports healthcare professionals treating EDS?
Solution
We delivered a redesigned, ADA-conscious website with improved navigation, visual clarity, and backend infrastructure, helping providers find critical treatment information faster while enhancing data capture for the brand team.
The previous Sunosi site lacked visual clarity, accessible design, and clear content hierarchy. Key data was hard to find, anchor links on the efficacy page were often missed (as confirmed by analytics), and navigation between OSA and narcolepsy content was limited. The design also fell short on accessibility, as text contrast was low, and headings weren’t structured semantically—making it harder for users with assistive needs to engage.
The redesigned Sunosi site features a cleaner, more accessible layout that improves usability and content clarity. Using Figma, I partnered with a UX architect to streamline navigation, making it easier for HCPs to toggle between narcolepsy and OSA content. We restructured the efficacy and dosing sections for better scannability and reduced the hero space by 40%, minimizing scroll time and surfacing key details faster. Improved ADA compliance, such as enhanced color contrast and semantic headings which boosted accessibility, while backend updates enabled stronger analytics tracking and data capture.
Accessibility was central to our design process. We collaborated closely with an ADA specialist to ensure the site met WCAG 2.1 AA/AAA standards, both visually and functionally. Using Stark, we verified contrast ratios, font sizing, and spacing for optimal readability across devices.
Navigation
All interactive elements such as tabs, buttons, and form fields—were tested by our QA team to ensure full functionality via keyboard-only navigation, supporting users with motor impairments.
Semantics
We implemented ARIA (Accessible Rich Internet Applications) attributes to ensure assistive technologies like screen readers could correctly interpret menus, modal dialogs, and dynamic content.
Alt-text
All visuals and icons include meaningful alt text or aria-hidden attributes when decorative, ensuring users with visual impairments receive relevant context without confusion.
Partnering with UX architects, ADA specialists, and the content team, we used Figma to redesign the site with a clearer structure, stronger navigation, and full WCAG-compliant accessibility, including proper contrast ratios, scalable text, and state variations for forms and buttons. The result was a more efficient user experience that reduced scrolling by 30%, improved search visibility, and helped the client better support HCPs managing EDS in adults with OSA.