UX/UI Designer & Front-End Developer
Horizontherapeutics.com
Contact Us
Mobile Menu
Clinical Trials
Project Summary
Challenge
The Leadership team had 3 main needs for enhancing the user experience of Horizontherapeutics.com:
Mobile Menu- Menu options were hard to read do to the background with 50% transparency, the menu was too busy with content and it did not extend the whole window.
Contact us- The Contact Us page needed to be consolidated from two separate pages (Contact Us and Location pages) in a digestible and organized manner.
Clinical trials- A new page was needed to display often seeked information about clinical trials and the trial available near patients.
Tools
Sketch
Crownpeak
Timeframe
2-5 months each
Mobile Menu
I created 3 concepts to the Leadership team with different layout, interaction, and slightly different UI.
Concept 1- Expand/Collapse Experience
Concept 2- Expand/Collapse Experience
Concept 3- Next Page Experience
At the same time, I conducted a market research of mobile menus used by other similar companies in the market to determine best practices. The research confirmed that the next page flow of menu options is the most logical and common way to navigate since it help users hone in the options they are interested in. Also, the research confirmed that it useful to have the menu icon on the right (95% of sites reviewed) and the search bar in the header (80% of sites reviewed). Additionally, only 5% of the reviewed sites include social media links in the mobile menu so we removed the links. which also helped reduce the content on the screen.
See more details about this market research here:
Do you want to check it out
on the site?
Contact Us
To consolidate the large number of content scattered between two pages, I used two main sets of accordions. One for FAQs and another for the locations. The locations information needed to be broken down by continent, country, and city so collapsing the content in accordion blades and using heading hierarchy helped digest and read the locations available in a logical, organized manner.
I also explored various card layouts to determine the best spacing setup for readability.
Concept 1: 1 column layout with mailing address in a single line
Concept 2: 3-column layout with a wrapping long email address
Concept 3: 3-column layout with ellipses for long email addresses
Concept 4: 1 column layout with broken down mailing address
Mobile: 1-column layout
Location Card Concepts
I also explored font styles and layout to ensure the correct pieces of information stood out the most while still staying balanced for readability and unifomity. More specifically, the U.S. and Global Headquarters had be highlighted on the cards. The two concepts that seemed the most appropriate were: one with a caret on the left hand side of the card and another with a colored background badge.
The caret concept looks the most subtle while still drawing attention among the other listed cards so we moved forward with this option.
Do you want to check it out on
the site?
Clinical Trials
The complete requirements for this project kept itirating due to content and resources availability as well as component limitations. Thus, a decision was made to phase the design out to ensure we were able to launch this resource by the deadline set.
For the creation of this page, I based my decision on best practices and requested user interviews to directly obtain insight on the type of information that the users would be interested in the most. Four rounds of reviews were completed to identify what worked and what didn’t in the wires. This facilitated further requirements for the page that will be included in Phase 3 and Phase 4.
Phase 1- A one-pager that introduces 2-3 featured clinical trials and FAQs.
Phase 2- Includes a card carousel for featured trials, a trials list page, and a trial details page.
Phase 3- Includes Phase 2 features plus a search component for clinical trials.
Phase 4- Includes Phase 2 and Phase 3 features plus filters on trials list page.
Do you want to check it out
on the site?