- BELSOMRA.com as a whole lacked consistency and simplicity in typography, color and styling
- The home page did not present an inspirational experience with its awkward use of accordion menus; these menus hid content and discouraged the discovery of content through scrolling/browsing
- The navigation, which is accessed through a hamburger icon, was very heavy (look and feel) and presented too many options up front
- Pages accessed through the hamburger navigation menu lacked inspiration, imagery and often were too long
- Due to the restrictions of pharmaceuticals, information like the SRI (Select Risk Information), logo and value statement must be presented up front to the user and perhaps remain visible; this limits the amount of content visible and can clutter the screen; we had to design to limit this clutter and make content feel more digestible
The client wanted to create a personalized experience on the homepage for prospective and current patients of BELSOMRA. The inspiration for this personalized experience came from AirForce.com, which customizes personalizes content on the homepage based on four data points the user provides.
We used sites like InVision App blog, Refinery29, Apple and Airbnb as inspiration for making Belsomra.com feel more airy and digestible. One major point that we researched was how to design the hamburger navigation. We considered keeping a drawer so the user would have context as to where they were, but we wanted to expose less options, like AT&T does using carats (second screen below). Ultimately, we decided to use drop down carats, as the options under each category weren't that extensive.
Finally, we noticed that mobile sites like Apple and Airbnb utilized the full screen for their hamburger menus, which didn't feel disorienting. To help focus the user on where picking where they'd navigate to next, we opted for a full screen, simple navigation with accordions to sub items.
The Solution: User Flow and Low Fidelity Wireframes
Click around the prototype at right, which features V1 of the homepage. This homepage contains a personalized experience in which a user communicates their status in two steps, after which they'll receive unique links to explore the site. In this case, the user is "Interested in BELSOMRA" and want's to know how it's different. We suspect this playful approach will be more successful, but are planning to user test to prove or refute this assumption.
V2 of the Homepage (second example below) prompts the user to select one of four options to get custom links. In this case, the user selected "I'd like to know how BELSOMRA is different" and immediately receives links to explore.
The Solution: Establishing Patterns and UI
Because the UI on BELSOMRA.com was so heavy and colorful, it was essential to simplify. To to that end, it was also key to establish rules for all UI elements. At Wayfair I became very familiar with establishing and following UI patterns, so I took the lead on beginning a pattern library for BELSOMRA.com, desktop and mobile (below). This library is an ongoing effort.
At right, you can click around to see the proposed UI. Note: some design decisions may change with user testing.
We are currently setting up user tests, particularly to get a sense of which direction to take with the Homepage personalization block. Our immediate next step is pitching both desktop and mobile designs to the client, as low fidelity wireframe prototypes in InVision. We will move forward with the redesign based on their feedback.