Tint | Wesley van den Brink - UX & UI Designer

Context

Large publishers like WPG Media are more commonly forced to cancel traditional print publishing. Many publishers start to transfer their distribution to online media, meaning that the company must adjust their business strategy. During the process of developing a new strategy they have to deal with a new, very important but difficult, target audience called ‘Millennials’. This target audience is born between 1980-2000 and is now the group of people within our society that get to the point of their lives where they are earning and spending more money.

This generation has a whole different perception of branding and online media use than the previous generation did, this results into a different kind of spending and use of media and brands. This generation doesn’t want just a strong brand, they want a brand that creates a strong visual identity with the customer and have it in combination with a reasonable price.

Publishers and businesses both look at different ways of connecting and maintaining their relation with the target audiences. Every magazine from WPG Media now has its own website specifically targeted at its readers. All the brands combined make this combination of sites like a goldmine of content which can be used more efficient and effectively to reach a younger audience. Next to that it becomes easier to bond advertisers to WPG Media.

Assignment

The use and organised arrangement of domains make it possible for WPG Media to effectively and efficiently use content to reach a younger audience. The huge amount of different kinds of content often compliment each other really well. So, how can WPG Media reach and connect with these ‘Millennials’ in a commercially interesting way, based on existing content?

Design an online platform for your addressed domain (Mindstyle or Active) which is a tractive and connective towards the ‘Millennials’. Organise the available content in such a way that it can exist next to the magazine line-up while serving as a separate platform, product, that defines itself for its audience.

Approach

In the lessons we learned to use the model of Jesse James Garrett. During the project this model must be executed. I made the following elaboration to visually show which competencies / elements we have to meet during the project and what that will look like.

Users

target audience

The target audience is the technologically adept, socially active, and intellectually ambitious millennial. This audience makes less money than the previous generation, are generally more politically correct, and enjoy technological, social, and political progression.
‍
The new platform will be dealing with an entirely new type of customer. Millennials have very little brand loyalty, and often compare prices and reviews and ethics of products before purchase or consumption. Millennials are not concerned with ownership or traditional lifestyles, but rather achievements, wish-fulfilment, and innovation.
‍
Many in the target audience have previous experience with most of the topics in the Mindstyle domain. Yoga, meditation, mindfulness, psychology, and mental health are subjects with which most millennials have at least passing familiarity, and often a strong interest.

Interviews

The interviews were conducted about the mindstyle content, social media, and about functionalities and styles. The goal of these interviews was to get insights into the target audiences experiences with the subjects of the Mindstyle domain and their attitude and towards them. This part of the research was meant to give me a better picture of the reasons and behaviour of the users, rather than looking at the insights we gained from the more general desk research. By asking the questions like how often and why do they watch the DIY articles, articles not related to the school, psychology, social network and online services I could get the information about the reasons and behaviours of the users. They are giving me what attribute they don’t like or like and why they think so.

The age of the interviewees ranged between 16 and 34. Looking at the answers given to the questions, there are a lot of similarities, but just as many differences. Someone usually read the articles about DIY story but some didn’t, some people try to connected to the world when they are down but other people do other activities like sleeping or have a time with one’s own. And there are many people who will pay for Netflix yet there are other people who won’t pay for anything on online services.

Segmentation & Personas

Looking at the user research that was conducted, it was decided to split the target audience into three segments. These segments (and the resulting personas) represent the main differences in the behaviour and needs of the target users. Next to obvious differences like age and gender, the personas differ in experience with similar products and devices and their needs and behaviours regarding the new platform.

Lisa is a part of The Unattached: younger millennials between 18 and 24 who get their news and information mostly by accident. People in this group often don’t have careers and haven’t started their own family, and use online services for school, socializing, games, media streaming, and job hunting. Very few pay for any kind of news subscription, and conventional news subjects (politics, world news, regional news) are of little interest to them. However, even though most aren’t interested in conventional news, most try and stay reasonably updated and actively research opinions contrary to their own.

Justine is a part of The Explorers: also younger millennials, but this group is highly connected and actively pursue news and interests online. Explorers are motivated by political and social ideals and use the internet to connect with others who feel the same.

David is a Distracted: older millennials between 25 and 24 years old, who are usually middle class and have their own families. Like the Unattached, most do not actively seek out or pay for news services, and find their news through social media. Most news and articles they find are for personal use that are of direct relevance to their lives.

Concept

Join a group of caring and intelligent friends. This concept was derived from many brainstorming sessions, information conglomeration, and idea distillation. A preliminary brainstorming session outlined the group’s goals for the platform. Agreement was reached that the platform should be inspirational, beneficial, intelligent, and caring.

Join
Hooks from social media will get the readers to the platform, while the content on the platform provides links to internal and external related
content to keep the users reading.

Group
Said group includes the writers, the readers and everyone who is involved in the topics, whether they know about the platform or not.

Caring
The users have a right to an easy to use platform, while the writers have a responsibility towards the greater good of the world and the readers. The relationship between these twocreates that deep personal connection that inspires great content and loyal readership.

Intelligent
The platform will provide opportunities to further learning. Regardless of topic or writer, allpublished content should be honest, uniqueand interesting. The platform itself will be intelligent and the content will adapt to the preferences and behaviour of the readers.

Friends
The platform provides the reader with the option to discuss and share Mindstyle content,including sentences, pictures or videos. These elements can be shared on a wide variety of social networks, to include as many people as possible in the discussion of the content.

Native advertising will be presented as if afriend was showing you their cool new toy, honestly and with financial transparency.

Card Sorting

Team

A card sorting session was held by the team to determine the sorting of the content on the website. For this the team used topics and chapter titles from the magazines, which were written on post-it notes and sorted. This was done two times, with two teams of designers sorting the content to be able to compare the results to one another and come to a better conclusion on how to sort the content in the final information architecture.

users

Brand components are essential, because these contain the guidelines and rules regarding the corporate identity. In the brand components the guidelines and rules for the brand, logo, use of color, typography, tone of voice, photography, illustrations, iconography, digital, audio, video and print are handled.

Information Architecture

The information architecture defines the different elements needed to build each of the three major pages of the website: the Homepage, the Article page and the Profile. Taking the user insights, the card sorting test, the client goals and the concept into account, the structure seen in the diagram was created. Each sub element serves a different purpose to fulfill the ultimate goal of the website: To make the user feel like they are Joining a group of caring and intelligent friends.

Style Guide

In the styleguide you can find information about typography, colors and the icons that will be used in the visuals and the final product. This is how the product must be presented to the audience.

Final Designs

Homepage

After the test results, the homepage has been tweaked. An introduction text has been added to the first element of the slider. This way the users are welcomed to the site and get a short explanation of the seven categories. The categories are represented by the coloured labels used all over the platform, helping the user make an immediate connection between the categories and the labels.

After ten seconds, the introduction text fades away and makes way for the frontpage article of the platform. In most cases, this will be an article that is recommended for the user, though if the user is not logged in, the article is the most popular article of the platform at that moment.

The categories don’t have their own page. Instead, the articles from each section are placed below the frontpage article of that section. Not having to leave the homepage to navigate through the categories improves the user flow and doesn’t distract the user too much.

The frontpage articles need to grab the attention of the user. The article needs to be both representative of the category, while it also needs to inspire the user to scroll down to the other articles.

article page

The layout of the article page has changed only slightly from the mid-fidelity prototype. The main focus of the test, and therefore also the focus of the changes to the designs was the discussion module.
‍
The users found it inconvenient to scroll right and left to see the reactions of other readers. In the final design, the reactions are displayed in a vertical row, allowing the user to read more reactions at a time, and to fold out more reactions if needed.The reaction button to join the discussion has changed back to being an empty tweet with the user’s account linked to it. This makes it easy for the user to post a tweet. The user immediately sees that this post is from them, and the heading “Jouw mening” suggests this further.

During the usability tests, many users felt that the module looked a bit like advertising, so they scrolled past it at first. This issue was solved by placing the prompt/question on the same background and paragraph as the article text. This way, the user’s eyes are guided from the text to the question, which makes it more clear that the discussion is a part of the article. It also clarifies from whom the question is directed: the writer of the article. Leaving the tweets in a separate box with a slightly darker background distinguishes the difference between writer and community.

profile/author page

The profile barely changed from the test, since there was no usability problem found on the page. The users are now also able to sort their favorites by category. This was suggested in the final tests and was implemented into the designs.

Test Results

low-fidelity

The low fidelity prototype has been tested with two users. The test focused on the concept and the general idea of the platform. It was important for me to see how users would navigate through the categories and the site in general. This navigation would lay the basis for all later versions of the website.

Concluding from the low-fidelity test, I changed the layout of the homepage, letting go of unnatural and unusable animations and organisations of the content.

mid-fidelity

To gain as many relevant insights as possible, we tested the platform on its most innovative and core features: the in-article discussions and the chakra-based sections. After sketching out the different ways these two features could be improved from the original low fidelity version, the team ended up with three different alternative screen designs.

From those three, two were chosen to be tested with real users. The reason behind leaving out the third alternative was a simple one: after working out the screens for this version in Photoshop, this alternative seemed least viable for real use and was left out based on the professional design perspective.

Overall the prototype received positive feedback from the users. The selling point all users pointed out was the interim discussion module, which allowed the users to share their experience in an innovative way. Although the participants found their way through the website, there are some major problems that need to be improved in the next iteration. I prioritized these problems. The more often a problem occurred with the participants and the more it would disturb the usability and flow of the website, the higher its priority is.

‍Usability problems (top 4)

The empty tweet / add a tweet part of the discussion module was not clear or obvious enough to the users.
The users were not sure what the website was really about.
The discussion module did not visually “belong” to the part of the article it was about.
The users did not feel the need or did not know that they could scroll past the slider on the homepage. This will result in less traffic to the articles, which is a big problem not only for the usability (users won’t see all the content), but also for the business.

Acting as a facilitator during a Usability Test.

high-fidelity

The overall response to the usage of the website was positive. The navigation through the website improved from the mid-fidelity test and is now very usable.

The seven categories were clearer in this version than they had been before, though they could need improvement. Using short introductory keywords for each section can help the user understand the categories more easily. Adding the labels and colours to more parts of the slider (like the introductory text and the dropdown) will give the user additional hints on how the categories are presented on the website.

The core feature of the Tint platform, the discussion modules in between the article/content, has proven that the changes made to the module were effective, be it not effective enough to make it completely usable. The main problems with the new discussion module design were found with the display of the tweets (scrolling left and right is inconvenient), and the fact that twitter was used (there were no options to post something with a different social media platform). The module needs to be improved to solve these problems in the following way:
- Displaying the tweets in a way that does not require the user to scroll left and right. For example at the bottom of the page, what a familiar place is for comments / responses.
- Contributing to a discussion needs to be as convenient as possible, with more options given to the user about which channel to use to post something (Twitter and Facebook at least).

The profile page was clear for the participants while testing, but there could be an improvement if the users are able to categorize the liked articles. Logging in to Tint was not difficult for the user, but not everybody did understand they linked their Facebook to the platform. Linking the Facebook profile to Tint could be more clear if the log-in pop-up con- tains a title like “Log in op Tint”.

Learnings & Insights

cross-cultural communication

During the project I worked with two Dutch students, one American and one from South-Korea. This has taught me a lot in the field of language skills and communication.

The American student was very extroverted, but the Korean student preferred to stay in the background. I used my social/communication skills to involve the South Korean student to the fullest in our work. During the project, his contribution became more and more visible and he was completely revived.

Facilitating design sessions

I worked on all parts of the project (user research, analysis, concepting, design and testing). However, my responsibility was to deliver well performing visual designs. I involved my teammates to the fullest in the design process, by facilitating design sessions and discussing my progress during our daily-standups.