Week 4-Editorial Desing
This week's project was to create an online magazine. The brief was given through a user persona which in our case is a 30-year-old businessman. In a team of 3, we had 4 days to present our responsive design for a smartphone, tablet, and desktop.
Motivation
As we had the direction leading towards business, innovative tools and techniques we need to figure out if the given persona is still up to date. Another task was to figure out how to create a suitable magazine for this kind of target group.
Empathize
The first step is to figure out the user persona and the interests of the target group. Therefore we start with a survey about business-related content to read. We asked personal details, what people read, what is missing for them on this kind of website or app and what they already like about it. The results were proven that business topics still seem to be a male dominant interest as 66% of the participants were male. 90% consume their content on the laptop but the smartphone is also a popular device as 76% use it. People also enjoy consuming video or audio related. In the survey, 66% said they would even prefer it instead of reading. 27% are as well interested in receiving some content-related newsletter for easier access to the article.
Additional to the countable facts a lot of people gave comments on how to improve business content.
“One main concern was about unpleasant structure and that the access to personally relevant topics should get improved.”
And another pain point from our interviews is that more customized content is wished in one single platform.”
According to our research, we created the how might we questions as follows.
How might we statements
“How might we optimize the sign-up option for the user that they get a curated summary of interesting articles.”
“How might offer more video and audio format to the user.”
“ How might we help people to find relevant content by allowing them to filter their content type.”
Competitor Analysis
Additional to the quantitative and qualitative research we made a market analysis where we compared the features of different well-known online magazines. It helped us to figure out what our online magazine definitely should have and must have. A lot of them already offer audio options, a search button is of course a must-have and categories should not be missed. More detailed insides are in the table below.
To get a feeling of the design from some of the magazines we created mood boards for the “Fast company”, “ TechCrunch”, and “Forbes”.
The “Fast company” has a simple, fresh, and clear design they approach mainly to the younger generation.
“TechCrunch” is a modern tech startup blog with a clear, structured, simple, and clean design with only one highlighting color.
“Forbes” approaches fact-based with dramatic pictures to get the reader's attention. They keep the design fact-based with black and white contrast.
A various overview of the market and the target group help for the following steps to define the situation.
User Persona and User Journey
After the research, we can confirm that the user persona “James” is still up to date. The target group for business-related content is still man dominant the relevant topics, such as technologies, finance, innovation. Therefore our persona is a 30-year-old male living in Frankfurt who is interested in the previously mentioned topics, always focused to make his company successful. In addition to that, he reads also for his personal growth. James is always short on time which means he has not much time to search for his reading material.
James' common experience with reading is that he receives an email for an article according to his personal settings but he also scrolls to other content on the homepage. There are many articles but it is really time-consuming for him to figure out which are the relevant articles for him. He is annoyed and overwhelmed after a time he can figure out some reading material, but it took way too long. The design opportunity here is to create a more customized homepage for the user to find suitable content, immediately according to the user's settings.
Problem Statement and Hypothesis Statement
After what we could figure out about the current market situation and the user's problem, the statements are followed:
“We have observed that the user has a hard time finding relevant articles, without spending a significant amount of time searching for them.”
“How can we make it more efficient for the user (James) to consume customized content in the preferred format?”
Design Guide
After the research part, we were able to create a style guide, named the editorial website/App and create a Logo.
According to the research and testing of different mood boards, we analyzed that the target group prefers clear and clean structures with some accent colors to highlight certain information.
The Name of the Website is “Mind Your Business” the used font for the name is “Alatsi” the titles are in “Montserrat” subtitles in “Poppins” and the body in “Archivo”. Here is a vision of the style used for the project.
Our Design principles are relevant, personal, and diversified to maintain focus, give the user personal content.
Information Architecture
Before we started with the ideation process we were structuring the editorial website by starting with a card sorting test. The tested people were supposed to sort the topics into different categories, so we can know where the users can find intuitively what they are looking for.
The sitemap shows 4 categories as Ideas, Business, Life, World, and Account. From there, the user finds different topics related to the categories.
Afterwards, we focused on one potential user flow which shows the situation of James “opening his email with a recommended article.” From there he has the option of going to the website where are different actions to take as well as on his account page and in his settings. There he can personalize his content and the format of the content.
Ideating Ideas
With the method of “crazy 8th”, Our group came up with some potential solutions to the user's problem. We decided on some variations and brought the ideas into a user flow in a Low-Fi.
Low-Fi prototype
Here we created 3 different solutions for a user flow and decided on the most important features and the most user-friendly structure.
Mid Fi
Things are getting more concrete about the project and the Mid-Fi is the next step. It shows the user flow of James where he comes to an article page, afterwards he lands on his customized Homepage. He follows his account to change preferences to customize his format.
Testing
The Mid-Fi got tested from 10 participants 50% dropped off at the first task the other 50% succeded with all of the 3 tasks. Most likely people dropped off because the task was “to add the article to the reading list”. The Icon to click for adding the article was not responsive, therefore the tester couldn't understand the task was done.
High Fi
Because of testing, we focused to make things more responsive for an easier understanding of the user's actions. As seen in the prototype it´s possible to share, like, and add the article to the read list. Then James goes to his customized homepage, his categories are shown on the top, the main article is recommended as some daily picks. James goes to his account as he wants to have more audio content. He changes the preferences and sees in his customized homepage more audio options.
The High-Fi is also available as a desktop version and a tablet version. There you can see the information is spread wider through the website compared to the smartphone version.
“CRAP” Testing
To figure out if our design is reliable we use the CRAP Method. We can confirm that our design is showing contrast with the two secondary colours to highlight information. The repetition is given through the same font size and styles and repeating colours. Alignment is shown with the container of the articles and the header. Because we did the card sorting test to cluster the categories then we can prove proximity.
Reflections
As a next step, we can optimize the header and the “Hamburger menu” to figure out which are the main information the user needs to see and give them in a fooder.
The key learnings have been to focus on the design principles and style guide, it helped a lot to keep the focus during the UI process.
Thank you for your interest in the project I hope you enjoyed reading it.
I´m excited to continue with the next project in the 5th and 6th weeks of Iron Hack Bootcamp. Feel free to leave some comments. ✌️
A big thank you to all the interviewees and survey participants.
