Stress in Action

Eye-catching and informative: how I've made an information-dense website fun and interesting to read.

Stress in Action logo on a glowing yellow background.

Case

Stress in Action needed a website to present the project to its audience: universities, professors and scientists. There was a lot of information to convey that needed to be separated in a clear way.

Most of the textual content was already finished, but the content was not separated in different sections. The word-heavy content also needed something visually appealing to keep the reader interested.

Approach

For the website structure I quickly sketched up a sitemap with the help of the project owner. We sat down for 20 minutes and placed the content in a hierarchical structure that made sense as far as information separation goes.

Quick sketch of the Stress in Action website sitemap
Quick sketch of the Stress in Action website sitemap.

The visual design came forth through the content I had, with the aim to keep the target audience interested in finding out more about the project. I was aware that the pages needed to contain a lot of text, so emphasizing the section you're in (participants, project abstract, scientific advisory board and documentation) was my priority.

Screenshot of the filter feature in the stress-in-action app
How using colours, subtle backgrounds and non-uniform positioning to make for a more visually appealing look.

We did notice there was still a lot of text visible on every page. It looked like a massive wall of text. We were afraid that it might be a moment for the reader to give up on actually reading the text. So we decided to visually organise the visible text in manageable chunks with a clear title for the reader to open. This way, you can quickly skim through the topics of the text without having to scroll at all.

To finish the website, it needed some more graphics. I opted for hand-drawn digital illustrations. They're easy to create and can still portray a strong message on any page you use them. The style I chose is something that's popular right now: "flat illustration". It's a neutral style that can look clinical and grown-up without being too detailed or dull.

Screenshot of the filter feature in the stress-in-action app
Using scalable vector graphics is an easy way to keep the illustrations modular and responsive.

Scalable vector graphics (SVG) are a perfect fit for this illustration style because all the shapes are based on mathematical coordinates and the image stays clear on any size.

Results

Having to present a lot of text to any audience may seem daunting. Making the choice to visually limit the amount of text on pages with lots of context is an easy fix. By packaging the website in a visually appealing aesthetic, you will make the experience more pleasurable.

All this effort is in the end worth it: your audience will actually invest their time in reading what you have to say.

Did I spark your interest?

Let's work together! Drop me a line at: