How to make content the king…
...but not rule
Janssen Healthcare Innovation created a suite of apps to help deliver quality, customized healthcare to their consumers. In addition to the tools, they also provide supplemental content to help provide a more robust “one stop” experience to the user. While this content, which could take the form of articles, videos, and studies is important, ultimately it is not a primary function of the app.
This provided two unique challenges: How to make these articles stand out as educational / editorial content that was supplemental to the app and not part of the actual user-based tasks? And how to make the article’s content engaging to the user?
Putting the style in css stylesheets
To help set the article content apart from the task functions of the app, I decided to introduce a new font and type styles. I felt that this achieves an easy to read magazine-esque experience, while at the same time provides an opportunity to introduce tone and voice from the Janssen brand. By introducing a serif font for the headers, the content inherently takes on a more conversational tone.
A graphic is worth a thousand bullet points
After reviewing all of the articles for the initial launch, it became clear to the team that there are many, many lists that had many, many bullet points. This might be fine for powerpoint presentations, but it is neither very engaging, nor scannable for easy reading / comprehension.
My solution was to create a library of images and stylized graphics that could easily be assembled into spot graphics. These spot graphics would then be used as swipeable “data cards” rather than the traditional bulleted list. The graphic cards make the content visually engaging and help to reinforce comprehension and retention.
Featuring a Cast of Thousands!
Well sort of....When reviewing the initial articles for launch, I noticed a recurring theme in the content that could be broken down into major categories such as “objects”, “actions” or “food groups”. I created an interchangeable graphic sprite matrix, that could be used to create customizable / re-usable spot graphics to pair with article content.
Like graphic lego blocks for a content manager. The foundation to the graphic matrix is a set of character models that can be used to create a variety of "evergreen" images, as well as offering a diverse set of people for users to identify with.
The client was extremely pleased with the deliverables and rationale, so much so, that they re-wrote many of the articles so that they could best utilize the layout structure and graphic library. The client is also planning to expand the graphic library to greater enhance the upcoming content releases.