Filter_thumbnail.png

Magasinet Filer - Web Design, Brand, UX

Magasinet Filter - Web Design, Brand Identity

Filter_mockup_top 2.png
 

Summary

When: October 2018
Where: School (Yrgo)
Software: Sketch, Flinto
Duration: 6 weeks

 

Together with a Digital Designer college, along with two UX Designers and two Web Developers, vi got the opportunity to have Magasinet Filter as our client for this six week project. Filter’s focus is high end storytelling articles, exploring interesting and current topics in the social and cultural field.


The task

Filter needed help to improve their digital appearance. As the number of physical magazines sold decreases, the magazine has increased their digital focus. They had launched their new website about six months earlier, and needed to increase the numbers of visitors on the site, using better UX and more functionality. Their different online platforms is now as prioritized as the printed copy of the magazine.
About 80% of visitors on the new site is using a mobile device, and most articles is between 20-30 minutes reading time. This makes getting users to stay longer on the site a prioritized issue. Filter wanted us to increase time spent on the site

 
 
filter_sök_animation.gif
Filter_filtrering_animation_01.gif
Scroll_%.gif

Other tasks that vi got to work with was;

  • How should the magazine present themselves in different channels? Facebook, Instagram, Twitter.

  • Better SEO.

  • How to increase the number of subscribers.

  • Relevant and distinct brand.

  • More clicks and shared articles.

Our answer to this questions came to focus on making the user experience more smooth, making the site more visual and adding new smart functions.

The process

Since Filter already had a new site with a distinct design, we did not want to change the look, rather improve the functionality and give the site more interactivity. It was an interesting process since it lead us to work mostly with UX, applying functionality to the design without redesigning the product.
During the project, we worked closely with the UX Designers, discussing new ideas. The UX Designers did a massive usertesting work and delivered useful data for us designers to work with. We explored many different solutions to the problems and worked iteratively to reach the end result.
We managed to deliver wireframes to the Web Developers in time and could present the final product to the client.

Mina_Artiklar_Inloggad.png
Artikel_Utloggad_Locked.png
Artikel_Inloggad_Unlocked_scrolldown.png


The result

A more visual page with improved interactivity where we have kept as much of the original design as possible.

  • We placed the reading lock after a few sentences, rather than after a couple of minutes of reading time as the original design did. This gives the reader the chance to read a little bit and feel the language of the article, meanwhile it stays clear that a paid membership is needed for further reading. (The original solution lead to irritation according to our user tests. The reader did not completely understand that the free content was limited) We made this even clearer, placing a lock-icon on the thumbnail at the top of the article page.

  • A status bar under the thumbnail, as well as percentage in the bottom showing how much of the article is read, makes the experience clearer, providing more information to the user according to the tests.

  • We improved the way users filter search results, giving them more tools to get a more precise result, making both category, theme, author and photographer able to use at the same time.

  • The All Articles page functions a place where users can explore new content, and the  My Articles page functions as a place to read saved articles, and the current article is shown at the top of this page. By using My Articles, we can provide more flexibility and functions to the user.

We got positive feedback from the client as well as from our teacher, who thought the product had “A simplicity that really appeals!”. The audience said that our presentation was pedagogic, using animated wireframes to explain the different functions. The teacher sad that we had detailed knowledge and used Sketch with symbols etc. to make work more efficient, and thought we really have created a more personal reading experience.


For deeper understanding in the project:

Presentation - The material that we, as well as the the product, presented to the client.