CareMessage Website

My Role: UI Designer

Step 1: Make it concise.

When first given the content for this website, I received pages and pages of text. All this content was important and needed to be somewhere on the landing page, but it didn't all necessarily need to be immediately presented. 

Because these landing pages were informational, there were a lot of definitions or phrases that then had descriptions. If users were interested in learning more about these concepts, they needed to be able to read the descriptions. However, other users who already knew the basics about population health did not need to read this information. To balance between these two users, I created nested and hidden content that was shown if users wanted to see it, but not shown if they didn't need this information.

You can see two examples of this below. On the left, users can learn more about health outcomes by clicking the clinical areas they are interested in. On the right, if users are unfamiliar with social determinants of health, they can hover or click on each icon to read a definition.

CMwebsite_02.png
popheath.png

Step 2: Make it easy to skim.

After consolidating most of the content, I needed to figure out the best way to display the information. Because this design would be used for multiple informational landing pages I wanted it to be easy for users to quickly skim the page, find out if they are interested in the information, and then either decide to dive deeper into the content or move onto another page.

To make this webpage easy to skim, I established a clear visual hierarchy on the most important section of the page, the descriptions of the problems that CareMessage helps solve.

As you can see to the right, on their initial read, most users will only look at Section #1, which defines each of the three problems that CareMessage aims to solve. By placing the three problems in their own section on the left side of the page, it is easy for users to skim these as they scroll down without any other content distracting them. 

If a user is interested in learning a little more about each problem, their eyes go to the bold subheadings (marked #2) listing how CareMessage solves these problems. Again, because each subhead is bold and separated, it is easy for users to skim through these six subheads and develop a better understanding of the solutions that CareMessage offers.

Finally, for users who want to read about each solution in more detail, they can read a description under each subhead (marked #3). 

By displaying the information this way, users do not need to waste time trying to figure out if they found the information they are looking for or not. It is easy to skim the page, get a high-level overview of the content, and then decide from there what to do next. 

Step 3: Make it optimized for each platform.

Once I knew which content I needed to display and how to best display the content, it was time to begin laying out my design. However, for each interactive graphic, text block, or section, I needed to determine the optimal way to visually display the content, both for desktop and mobile devices. 

The interactive graphic I used to display social determinants of health worked great on desktop browsers. It was easy for users to click or hover on the determinants they wanted to learn more about, and the graphic was visually pleasing and easy to read but not too intrusive.

However, on smaller devices, this graphic was too small for users to interact with. There is no hovering on these devices, and after testing, I found that most users did not know they could click the content, even when it was explicitly written. Thus, for mobile devices, the best way to present these determinants of health was to not hide the content and find a visually pleasing way to show all the information.

The mockup on the far right shows the mobile-optimized way to display these social determinants of health. The familiar icons catch the user's eye, and they can quickly swipe/scroll down if they are not interested in the content. Using the same colors from the desktop version helped break up the white page and provided more visual interest while also indicating to the user that this content is important.

Final Product

The final webpages provided the content they needed to show in a way that was easy for users to quickly find what they are looking for. By using interactive graphics and nested content, I was able to display a large amount of information without overwhelming users or creating a page that was too text-heavy. Modifying the design based on the device allowed all users to see the content in a way that was most optimal to their screen size. Creating a visual hierarchy with the text gave users the ability to skim the page and understand the topics being outlined without requiring them to invest too much time deciphering the main takeaways.