UX Case Study // Editorial Design // MeTime
MeTime, a responsive webzine for all topics dealing with time for yourself.
The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content.
The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape.
With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and diving into it.
Project contributor: Gabriel Rabadán Camacho
Challenge
Our task was to create a responsive online platform for a magazine, newspaper or blog. This should be geared towards the needs and goals of a defined user persona.
The project focuses on the UI design part. My partner and I had to deliver a consistent, branded and engaging experience and all of the documentation that allowed the project to proceed.
Agenda
User Persona
This is our User Persona Elaine. She is an eco-friendly researcher, and her favorite online magazines are National Geographic, The New Yorker, and Vice. She usually reads during her breaks at work.
In this project, the user persona is given, so a considerable part of the UX area is omitted. Therefore we can deal more intensively with the UI part.
Feature Competitive Analysis
Here we have compared Elaine’s 3 favorite online magazines with each other. We paid special attention to the possibility of setting bookmarks, filtering and restricting the article search. We also had our focus on whether users can see how long it takes to read each article and whether they have the opportunity to listen to podcasts.
User Journey
This is the story of Elaine trying to read an online article on her laptop during a break.
The online magazine has such a large range and is not well organized. It quickly becomes overwhelming and it takes Elain a long time to find the articles that she likes. By the time she has finally found an article and started reading the break is almost over and she only manages to read half of the article.
Later at home, she would like to continue reading — but again — it takes her a long time to find the article she started earlier and also the paragraph in which she left off.
We will improve this story through our website and give Elaine a very good user experience.
Problem Statement
Moscow Method
We have chosen the Moscow Method to bundle and categorize our common ideas and research results. The dot voting method was then a straightforward way to extract common goals. The must-haves, outlined in red here, will become an integral part of our website. In addition, the website should offer the user a podcast function and the option to save articles using a bookmark function. At the beginning of an article, the expected reading time should also be evident. Any other could haves can be added to the website in later steps.
MVP
All of this helped us to formulate our Minimum Viable Product Statement.
The goal of our ME TIME website is to make real articles available for curious users who want to discover new things in an organized and well thought fashion. Moreover, they need an option to filter and personalize the content in order to save time, that’s why bookmarks are needed as well as reading time for each article to let the users know how to manage their time in relation to the reading. At moments when it is not possible to read, they can have the opportunity to listen to podcasts with a similar topic.
Sitemap
We wanted to integrate two top menus in our sitemap. The different types of content can be seen in the general menu items here on the left and in the categories in the right area.
Userflow / Happy Path
In our Happy Path we pick up the story of Elaine as she reads during her break and improve her experience. On a simply and clearly structured page, she will find a suitable article more quickly. In addition, at the beginning of the article she receives information about how long the reading time will be. That way she can manage her time better.
If she cannot finish an article, she not only gets the opportunity to save the article as a bookmark, she can also set a textmark so that she can continue reading at the same spot of the article the next time.
After she has found the article easily and finished reading it in the evening, she gets the opportunity to listen to a podcast on similar topics. This is a great way to learn more, but still pursue another activity, such as cooking.
Mid-Fidelity
Moodboard
In order to get a basis for the further design process, we created a mood board in the next step. Based on our research, we have identified the following brand attributes:
Personalized
Dynamic
Surprising
Empathic
Positive
mindful, active, colorful, feminine, active, exploring, traveling, cool, grateful, healthy, self-confident, peaceful, laid-back, feminine, relaxing, nature, friendly, charmed, calm, exploring, outdoor, active, healthy, mindful, colorful, friendly, sporty, nature, calm, confident, clean, motivating, feminine, healthy
We asked several people for their impression of the mood board. Fortunately, the attributes they had for the mood board matched the mood we wanted to create.
Styleguide
The next step was to create a style guide. This has helped us set our design standards and maintain continuity. At the same time, it is a good basis for internal communication or for potential customers.
We extracted our color card from the mood board and defined the fonts we wanted to use and how the item previews should look like. The style guide is then supplemented by buttons, icons and the header with the categories.
I also designed a logo for our
ME TIME website. On the left side you can see some drafts and the final logo in long and short versions (marked with a red border).
High-Fidelity
The first Hi-Fidelity prototype can be seen here.
We see Elaine open the website and scroll through the first page. Then she goes looking for an article that suits her interests. In the selfcare category, a sub-category of the wellness category, she quickly finds what she is looking for. She begins to read, but after a while her break ends and she has to pause reading. But first she sets a bookmark and marks the point where she stopped reading with the textmarker.
The next time she opens the page, she easily comes back to her bookmarks via her profile and selects the article she would like to continue reading. She can quickly read it to the end and then even gets the opportunity to listen to a podcast on a similar topic.
Desirability Testings
At this point in the project we asked users again and a visual assessment of the appearance of our website. For this purpose, users could choose from a list of attributes, a product reaction card, and words that matched their assessment. Most of the feedback we got was that the product was easy to use and friendly in appearance.
In addition, the entire feedback was consistently positive, fulfilling our predefined expectations which made us very happy.
Responsive Mobile
Here you can see responsive versions of our magazine website. This is how the design could look like on a tablet or on as an app.
Usability Testings
The most important quotes from our user testing can be seen here.
On the left side you can see the before and on the right the result after all changes and adjustments have been made.
Next Steps
- Apply feedback regarding typography
- Implement categories by colors
- Icons
- Improve textmark feature
- Further user testings
Learnings
In this project we were able to experience what it is like to start with an already prepared user persona. This eliminates a lot of research work for the UX process, so we could concentrate more on the design and the UI process including the colors, mood board and font selection. We were also able to learn how to design websites so that they are responsive and how they look on other devices.
Created under the supervision and in collaboration by Ironhack Remote.
Project 4 // Add a Feature
