LifeFive: Editorial Design Challenge
4th Ironhack project
For this challenge I had the pleasure to work with Marie Ballivet to look at the role of digital media press and the users who consume it every day.
Context:
The rise of the digital media press (online newspapers, magazines, editorial articles, …) 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 dive into it.
The Challenge:
Design a responsive online platform for a magazine, newspaper or blog aimed to meet the needs and goals of a given User Persona:
Elaine (35) — The Eco-Friendly Researcher
- She reads National Geographic, The New Yorker, Broadly.
- She wants to invest more on self-care and self-love while being good to others, seeding a more empathic society.
- She reads during work breaks. She often works at home, when she’s not at university or the library.
- Goals: be more rational, Discover new passions, achieve a good work-life balance.
DEFINE THE PROBLEM
1. Empathise | Develop a deep understanding of the problem
1.1 User research
1.1.1 User Research. Qualitative Method: Interviews
1.2 User Persona
1.3 Business Analysis.
1.3.1 Business Analysis. Competitive Analysis:
1.3.1.1 Feature comparison
1.3.2 Business Analysis. The Value Proposition Canvas
2. Define | Clearly articulate the problem you want to solve.
2.1 Affinity Diagram & How Might We Statements
2.2 Problem & Hypothesis Statement
SOLVE THE PROBLEM
3.Ideate | Brainstorm all possible solutions (good and bad)
3.1 Ideation / Brainstorm
4. Information Architecture:
4.1 Information Architecture. Sitemap
4.2 Information Architecture. User Flow
5. Visual Design
5. 1 Visual Design. Mood-boards
5.2 Visual Design. Style Tile & Design System
6. High-Fi Prototype
DEFINE THE PROBLEM
1. Empathise | Develop a deep understanding of the problem
1.1 User research
1.1.1 User Research. Qualitative Method: Interviews
To empathise we need to hear our users. For that purpose we created a questionary completely influenced by the identity of our eco-friendly persona Elaine and split into three sections:
1- Personal interests.
2- Commitment with social and / or environmental causes.
3- How, where and when, consumers use any type of information.
Several similarities between Elaine and our interviewed users were found. They all commonly wanted useful information at the right time proactively looking for positive impact in our environment and daily lives.
Though they wished useful, short and quick information they were still requiring a substantial amount of time to look for articles of their interest where most of them were dense and overwhelming.
Besides, the main user’s source of information comes from our digital devices and they expressed how exhausting is to spend so much time in front of a screen.
1.2 User Persona
Here’s a refinement of our User Persona:
1.3 Business Analysis.
1.3.1 Business Analysis. Competitive Analysis:
1.3.1.1 Feature comparison
Through our business analysis focused on the outcome of our user persona preferred digital content platforms we commonly noticed the feature to chose between main categories and specific topics, but not a option to refine and customise further a search with more filters or subcategories.
Some of this content includes also different media formats such as podcast and / or videos.
1.3.2 Business Analysis. The Value Proposition Canvas
Qualitative information over quantitative to spend their time constructively were one of our users biggest demands and hence they would need a platform with that specific purpose.
2. Define | Clearly articulate the problem you want to solve.
2.1 Affinity Diagram & How Might We Statements
“How Might We” (HMW) statements:
- How might we offer accessible, valuable, digestible and positive content?
- How might we help them to spend less time over screens?
- How might we help them to spend and enjoy more of their free time?
Our decision was narrowed to:
How Might We provide quality information easy to find and consume?
2.2 Problem & Hypothesis Statement
The Problem Statement
We have observed that the above platforms mentioned are not allowing users to customise content based on their needs at the moment and forcing them to navigate through their complex information architecture to find useful content.
This is causing people to feel overwhelmed, frustrated and anxious.
The Hypothesis Statement
We believe that creating a clean and simple online magazine platform with digestible, short, and uplifting content, that can be consumed within 5 minutes will be valuable while also helping to promote empathy and positive change in people’s behaviours and habits.
We will know we are right with increasing conversion and low bounce rates.
3.Ideate | Brainstorm all possible solutions (good and bad)
3.1 Ideation / Brainstorm
The ideated platform:
Life Five.
A feel-good magazine, with bite-size content. So you can spend more time learning and less time on your screen.
Main features are:
• Refined reading, audio or video content no longer than 5 minutes length.
• Useful and valuable eco mindset content.
4. Information Architecture:
4.1 Information Architecture. Sitemap
The IA focused on a main and secondary level categories menu.
4.2 Information Architecture. User Flow
The below User Flow describes a happy path divided in 2 steps and actioned through only 3 clicks based on the ideated IA:
1- Selection of a main subject among 5 others (eg. Nutrition)
2- A refined secondary category filtering (eg. Keto Diet) and a preferred media format (eg. Podcast)
5. Visual Design
5. 1 Visual Design. Mood-boards
5.2 Visual Design. Style Tile & Design System
LifeFive principles and mood board:
- Positive Content
- Tips and Advice
- Lifestyle
- Personal growth
- Empathy
- Sharing knowledge
Our main inspirations:
- Colours: Green and orange are the primary colours that generate conceptual positivity and voice to our users demand for valuable content.
- Typography: A classic combination of a Serif for titles and Sans Serif for body copy would ensure reading easiness over our content.
- Main Content Layout: Horizontal scrolling would enable a simple and natural navigation while also allowing users to easily filter and browse through our main subcategories and media.
Instead of giving too much we focused on giving the enough.
Our results wouldn’t go “preferably” above 15 and the The Article detail page would include an image gallery on the left and detailed information at the right. No need for long content articles, just short and qualitative experiences.
The following screens in mobile showcase the user flow starting by selecting a subject/category in the Welcome/Home page and landing on a List of Articles page and be able to refine the given results. The last two images on the right are the wireframes for the reading and video articles, the Article Detail page(s).
Below you’ll find the desktop version with the podcast article and Menu wireframes.
Learnings and Conclusions
Creating an innovative interface for a digital platform is complex. When you compare to all other platforms it just feels there’s not a lot of room for improvements, while there actually is. The main driver is to “really” listen to our consumers and provide a platform tailored to their needs.
By also focusing on the quality of the content while ensuring users spend less time in front of a screen looking for information it would be super beneficial for their daily routines.
