Information and Identity Design

Information and Identity Design

FFW Blog - illustration
default avatar
Thought byJim Doria
October 29, 2013

The Center for Biomedical Informatics at Harvard Medical School wanted to take their website to the next level and create a clearer identity for their organization. While they looked forward to bringing more voices onto the site, they faced limited resources for keeping content fresh and relevant. Taking a cue from the mobile world helped us deliver a solution that works today and will help them get where they want to be.

What is the role of a website within an organization? Most websites combine some aspects of brochure, newsletter, bulletin board and switchboard, and those are just the simplest. But this definition focuses on function. What does the design of the website say about the organization? How does it enhance the public perception of the people it represents? And how do the people inside the organization relate the website to what they do?

Many of our web projects at FFW are technically challenging, marketing-driven engagements. But we also get to engage more completely with a group that wants its web presence to go beyond being a glossy brochure set up by the marketing team or highly technical integration focused application. Recently, we helped one of our clients build a website that not only had to do more, but had to mean more. It not only had to show off work done by its people, it had to help bring them together into a more cohesive identity.

Harvard Medical School is a large, prestigious institution with numerous divisions. One of these is their Center for Biomedical Informatics (link: Although not exactly a new group, Harvard CBMI needed to take their web presence to a new level, and they wanted more than simply a new skin on the old site.

Their vision of what they wanted the site to do was ambitious.

  • Like many organizations, the team charged with maintaining the site was small, but they wanted to grow participation in the site by opening it up to a wider range of voices. So the site had to accommodate both the present small team and the future bigger team. It also had to lower barriers to entry so more people would be willing to create content.
  • Much of what was on the site would be driven by the publication of academic articles by professors and laboratories who were affiliated with CBMI. But the notoriously tricky rules about academic journal publishing put barriers around how the content that was published in journals could be used on the site.
  • The site had to be kept fresh without looking empty, even when the staff didn't have the resources to regularly create lots of new, independent content specifically for the site. The team was also limited in terms of its design resources.
  • As an organization, CBMI hadn't yet established much in the way of a recognizable visual identity. They wanted the site to provide direction towards creating the publicly-facing "brand" of the Center.
  • And it had to look really clean and cutting edge, too!

We took a cue from our leading perspectives in mobile design (also embraced by innovative media sharing sites such as Pintrest and Springboard) and proposed a concept for the site based on tiles. Tiles represent content on the site in a cool, highly visual way. But more importantly, tiles allow us to mix and match different types of content on the site as needed to create rich views tailored to the site architecture, even though the amount of underlying content might be limited.

By providing a consistent visual language, with a flexible series of backgrounds and related design elements, tiles help users identify and categorize the information on the site easily and visually, so mixing content of different types never becomes confusing. Tiles are information-generous, showing visitors dates and tags related to each piece of content as well as titles and teaser text.

Tiles also lower the barrier of entry for content creators. If a full-length article is posted to the site, the tile for that article teases the content and leads visitors there. But a tile can also be created from little more than a title and a sentence or two, straddling the line between blogging and micro-blogging.

Finally, we dealt with the academic journal issue by providing the CBMI team with the graphical resources to create simple, visually dynamic thumbnails that represent published articles. Presented in a carousel, these thumbnails might provide only the title and author of the article (if that's all we're allowed) or they can go further and include the cover of the journal and / or a link to an online version. Whatever the specifics, our system presents a multitude of articles without becoming either visually boring or repetitive, and showcases all the great work being done by the brilliant team of academics behind CBMI. All that said, we were able to engage on a rather dynamic challenge, and solve it leveraging a complete view of information and identity design built on the ever flexible open source platform, Drupal.

Best Practices

Fill out the form to learn how FFW can support your needs.

Read next:

Teaser of "Learn to Make Your Site Accessible" blog

Learn to Make Your Site Accessible in a New Training from FFW

Teaser of Drupal for Customized eCommerce Solutions blog

Using Drupal for Customized eCommerce Solutions

Teaser image of Acquia Engage Awards blog

FFW Clients Named as Finalists in Acquia Engage Awards

FFW Blog - illustration

Introducing Material Design Lite (MDL)