Visual storytelling is a powerful way of creating an encompassing a user experience that gives the user an understanding of your brand and impact. When the Great Lakes Observing System (GLOS) selected Manning to redesign their website, we immediately knew that their organization would benefit from visual storytelling.

GLOS monitors data on the Great Lakes including water temperature, wave height, fish population and pollution and makes its data available to all those who want to use it to study the waterways through data sets and web tools. Our goals with their new site were to create intuitive paths for users to find the data tools that they need and to make the data more accessible for new users. Beyond creating concise user flows, we also wanted to demonstrate GLOS’ impact on the Great Lakes community. Visual storytelling was the natural tool to accomplish this goal. The following three methods were used to build our GLOS experience:

  1. Strong imagery
  2. Precise typography
  3. Interactive elements.

Continue reading to learn about the specifics of our implementation of these three methods.

Photography & Visuals

In our initial strategizing of the GLOS site, we knew that we wanted to convey the Great Lake’s beauty through an atmospheric space. We saw the opportunity to push the site aesthetically further and to use NOAA’s incredible photo library to create an immersive digital experience. One of the most striking aspects of the Great Lakes is the way in which they respond the the seasons. In the winter, the Lakes are often partially frozen over; in the fall, they are surrounded by an abundance of red and orange foliage; in the summer and spring, they are accompanied by blue skies and gorgeous sunsets. We decided that the GLOS website should also shift with the seasons, so we implemented a large homepage header image that pulls from a library of images dependent upon the current season. Each refresh displays a different image so the homepage never feels stale.

Typography

Typography is an often forgotten detail that plays an important role in supporting the story that a website tells. When it came to choosing what typefaces should be used for the GLOS site, we immediately knew that a monospace font would be an appropriate way of signifying data and code. Inconsolata was our final choice as a header font—it both immediately connects the viewer to ideas of data, is highly legible, and has a slight human touch with its calligraphy-esque strokes. The typeface on top of the beautiful photographs of the Great Lakes immediately tells the user about GLOS—that it is an organization that organizes Great Lakes data—without verbal explanations.

glos-data-tools

Interactive Elements

The third piece of our visual story puzzle is interactive elements. Interactive web design is a great way to engage users’ curiosity and to create a fun digital experience. We conceived of a tile mosaic design for GLOS’s landing pages as a way to combine Great Lakes imagery and interactive elements. Each tile flips on mouse-over to reveal more information about its represented data tool or page. The flip effect is playful and encourages the user to enjoy exploring the site, instead of overwhelming them with long blocks of text.

On the homepage, we also utilized a responsive accordion slider that opens and closes to show information about different featured data tools. Not only does the accordion attract the user’s attention, it encases a large amount of information in an effective amount of space thus improving user experience.

Take Aways

Our implementation of the above three methods for GLOS shows how visual storytelling can improve the user experience of a website and brand. By combining dynamic images, thoughtful typography, and interactive elements, a website can become a platform for engaging with the user on a much more direct level.

To learn more about how great design can impact your users, reach out to us and let’s start a conversation.

Leave a Comment