old website main screen imac.jpg

The client required a website redesign. My responsibility was to take care of the whole UX process. Activities included getting feedback from users, determining the goals of the website with the client, redesigning the information architecture, creating wireframes and mockups, run usability tests and take care of the development with the developer.

 
 

goals and results

 
 
goals.jpg

Based on client input, quantitative and qualitative research, two goals were set for the new website

1) Increase pageviews per session.
2) Improve the visual design


After the new website went live in November 2017, not counting the first few days when the redesign has been announced, we looked at the results. The pageviews per session increased for 52,91%. This result has been achieved without the suggestion feature that displays additional articles with similar content at the end of each article. In the future, further improvements are expected. 

 
 
 

Current WEbsite

 
 
 
the context.jpg

On average there’s one new article added per day. We needed to consider this when creating the UI. Users should have the impression that there’s more content than it actually is. Published articles, for the most part, are not time sensitive which provided us with opportunities on how to increase pages per visit and lower the bounce rate. Also interesting was that the main screen didn’t get the most visits. The majority of users came directly to a second level screen with the full article.

 
 
 
article-no recommendations.jpg

Besides the visual design, the old website had a critical issue seen from the screenshot of an article and later confirmed by analyzing the analytics. There was no visible incentive for the user to browse and find other interesting articles.

 
 
 
article format.jpg

The format of the articles also needed to be redesigned. The line lengths were long (above 100 characters), the image placement didn’t fit with the body text flow, and articles didn’t use any other elements to improve the readability or allow the user to scan the text.

 
 
 
website images update.jpg

The old website used ten visually different ways to indicate interactive elements. That provided confusion for existing and especially first time users as it’s much harder to figure out what exactly is interactive on the website.

 
 
 
pagespeed indication.jpg

 Google analytics PageSpeed tool showed slow loading speeds of the existing website. 

 
 

Research

 
 
content audit.jpg

We created a content audit with the website content from all the screens.  Based on that a client discussion on the future content of the new website followed.

 
 
 
research visiting events.jpg

To get a better feeling on who the actual users are, I visited events organized by ZRC SAZU. Additionally, the ZRCalnik Facebook page has been used to check out the users that actively follow the site and gather relevant feedback.

 
 
 
survey.jpg

A survey was sent out to existing users of the website. The goal was to find out if the issues we discovered during our research correlated with the experiences of the users. We also wanted to learn about the motivations that made users visit the website and get more demographic insights.

 
 
 
other websites.jpg

An essential part of the research has been to study the elements that contribute to an enjoyable reading experience. I used popular media websites and apps and took every opportunity to ask friends and colleagues about their impressions. Nielsen Norman Group research findings on this topic were also useful.

 
 
 
analytics.jpg

Features like User Explorer and Behavior Flow in Google Analytics, provided interesting insights into user behavior. Due to marketing activities and social media use, most of users came to the site directly to article screens. The main screen had less than 15% of all page views.

 
 

Research Conclusions

 

Users visiting the website and events organized by ZRC SAZU, span across a wide range of age. This is a consequence of the website covering a wide aspect of content in science and arts. The survey revealed that, among other, the visual design of the website needed to be improved. We also measured and calculated the Net Promoter Score to get a quantitative value on user satisfaction.

The NPS score also allowed us to compare the results before and after the website redesign. It will also help the client to measure the effect of any kind of changes in the future. The focus turned to the article screens. Having more than 85% of all page views and a high bounce rate, it required attention.

 
 

Reducing the Bounce Rate on article screens

 
 
page views.jpg

Most users visited the website directly on a screen with a particular article already opened. These screens had a high bounce rate and this was a problem needed to be solved.

 
 
 
first wireframes desktop.jpg

One of the alternatives at the beginning was to eliminate the main screen altogether and use the space to show the latest full article. Other articles are displayed at the side. The user always lands on an already opened article with the rest of them displayed in a side column. The column uses images and titles to invite the user to read more.

 
 
 
context based main screen.jpg

The proposed solution had several issues. Among other was the poor experience on smaller viewports. For users visiting with smartphones or tablets the main article takes up the whole screen real estate leaving little room to present other available content.

 
 
 
news vertical flow.jpg

After going through some more alternatives, the final solution has been found. On the main screen all the articles are presented in a simple vertical flow with the newest content on top.

 
 
 
desktop article open.jpg

When the user selects an article to read, the full content appears directly on the main screen by expanding the view to fit the full article.

 
 
 
desktop end of article.jpg

By reaching the end of the article, other content in the vertical flow is already visible. There’s no need to navigate the website. The user can just continue to scroll, no taps or clicks required.

 
 
 
desktop article suggestions.jpg

A lot of the published content is not time sensitive. This provides a good opportunity to display articles with similar content as suggestions to read more.

 
 

Distinction between interactive and non-interactive elements

 
 
interactive elements.jpg

The previous website had numerous ways to visually indicate interactivity. There had to be clear distinction between the interactive and non-interactive elements on the redesign. The first interactive element is the title of the article. At the beginning we also allowed the image to open up the article. Testing revealed an issue on touch screen devices since the touch area covered a lot of screen real estate.

 
 
 
desktop menu.jpg

Website navigation is represented with all cap labels in a secondary typeface. Based on the website architecture and the way articles open up directly on the main screen, there’s not much need for the website navigation elements to stand out. This is the reason it’s placed on the left side on desktop viewports. That way there’s less visual emphasis on it.

 
 
 
icons color.jpg

Icons have a light gray background with a stroke. The color is the same as the background of the title. This solves a confusion discovered during testing with wireframes. On tablet and smartphone viewports it sometimes became confusing to locate the appropriate icons with the appropriate article. 

 
 

Comment Section

 
 
old comments.jpg

Most of the articles had no comments from the users despite a prominent comment section and a highly visible form placed below each article. As a consequence it seemed like no one was visiting the website and reading the articles.

 
 
 
comments section.jpg

The solution on the new website is more subtle. The comment section doesn’t stand out and there’s not much visual difference between an article with or without comments. Instead of placing the comment form directly under the article, an icon has been placed as the CTA. 

 
 

article format

 
 
article format-old.jpg

There was room for improvement regarding the article format. On the previous website the line lengths and paragraphs were too long. That made the body text heavy to read. The font size, contrast and leading were good.

 
 
 
line lenght.jpg

The first step was to reduce the line length to around 70 characters no matter what the viewport. The content width is a result of the typeface selection, font size and the line length. 

 
 
 
highlights.jpg

Highlights are used to point out the most important content allowing the users to skim through the article. Highlights also break up the body text and provide some visual hierarchy.

 
 
 
article format - autoclose.jpg

Articles opening up directly on the main screen can require a long scroll from the user, especially on smaller viewports. When the user scrolls past the end or the beginning of the article it closes automatically.

 
 
 
article format - gallery.jpg

Image galleries are mostly used when reporting on events. In the previous website (left) the gallery was placed at the bottom of the article with multiple scattered images. The new website provides a streamlined image flow with the first one automatically being selected and expanded.

 
 

visual design

 
 
backgrounds and title.jpg

The backgrounds of the title and share icons are color matched with the image. No additional work required from the publisher of the content on the website.

 
 
 
typefaces.jpg

Primary typeface is Merriweather. For navigation Oswald is used. Both typefaces are open source.

 
 
 
distraction free reading.jpg

The layout of the articles provides a distraction free reading experience with no other content asking for attention.

 
 
 
news flow.jpg

On average one new article is published per day. Increasing the real estate for each article and making the user scroll a little bit more to move between content, gives the impression that there’s a more content than it actually is.