NY State of Health Insurance Plans Redesign
Current Design
There is an abundance of important information on this page. However, the current design is lacking in hierarchy, consistency, and usability.
Points of Focus
Create hierarchy with content and typefaces
Minimize the colors used and unify button styles
Improve responsiveness
Ideation
I explored multiple ways to lay out the content in order to discover the best user experience. The main goal of this page is to search for plans based on the 8+ filters. In the current design, it is confusing that all of the tools are explained at the top of the page, but then one tool is below on this page and the user would have to click out to other windows to utilize the others. I divided each tool into different sections to provide clarity on the differences between them.
Desktop
Discover Plans & Additional Tools
On the landing page, there is a clear delineation between the ‘Discover Plans’ tool and the ‘Additional Tools’. Once the user selects filters that fit their needs, they can view potential plans below. Each plan has its own card. The cards are in an isolated scrolling section, therefore the user can browse different plans without a full-page parallax scroll and still see the filters they selected. The user can click ‘View Details’ to see more information in an overlay pop-up window.
Comparing Plans
When the user selects up to three plans to compare, yellow tags will appear above the plan section to display the plans selected. Once the user selects the ‘Compare Plans’ option, an overlay will pop-up with the plan details side by side.
Mobile
Discover Plans
For mobile, it is a better user experience to divide the content into separate pages. The filters are the landing page with a hamburger menu on the top right. The menu includes access to the ‘Additional Tools’. Once the user makes their selections and clicks ‘Search’, the potential plans are displayed on the next page.
Potential Plans & Plan Details
Similar to the desktop layout, each plan is represented in a card. The user can click on ‘View Details’ to learn more about the plan and sign up.
Comparing Plans
When the user selects two plans to compare, a sticky yellow bar will appear along the bottom of the screen. The user will be able to select ‘Compare Plans’ to view details of two plans side by side. Users are able to sign up here directly as well.