The Factivist
A mobile-first online magazine, with the ability to toggle between text and audio formats.
For this IronHack project we were given a challenge: Create an editorial platform for an assigned persona. This challenge was conquered by a team of two, myself (Shelly Benson) and Jana van T Land.
Assigned Persona
James (33) — The Eco-Friendly Researcher
- He reads National Geographic, The New Yorker, and Broadly (Vice).
- He wants to invest more in self care and self love, while being good to others. He hopes to seed a more empathic society.
- He volunteers for the community.
- He reads during work breaks.
- He often works at home, when he’s not at university or the library.
Goals: Be more rational, discover new passions, and achieve a good work-life balance.
Research
We started our research by comparing James’ favorite online magazines. They are all high-quality, respected content publishers. The New Yorker maintains a traditional aesthetic between print and web, and specializes in current social and cultural issues. Broadly (a section inside Vice) looks edgy and daring, and focuses on trends, pop culture, and social issues. National Geographic puts the focus on nature, traveling, and world-class photography.
Below, you can see a visual comparison of the three brands.
To understand how a persona such as a James takes in his news on a daily basis, we conducted some interviews with subjects matching the persona, and afterwards laid out our insights in an extensive empathy map.
As shown in the user journey, which you can see below, James reads his news on mobile as well as desktop. He switches modes frequently, and splits his time between devices about 50/50. He prefers long format, fact-checked articles based on in-depth research, but reports that sometimes he is not able to finish them. He mostly reads during his lunch break, while commuting, or in the evening as he winds down from the day. He already pays for some premium news content, and reports being open to paying for more quality journalism.
Pains and Gains Identified:
- News as a ‘work break’ (inherently contradictory)
- Frequent transitions between text and audio formats
- James thinks screen time should be useful and informative — not endless scrolling
Problem statement
James likes long-format journalism, but his busy lifestyle makes it difficult to read articles from start to finish.
Solution proposal
Taking into consideration all insights, our ideation bring us to the following solution:
The Factivist
A paid monthly online magazine, where each issue is professionally reported and recorded. Professional narrators work with journalists on each issue to record radio-worthy audio versions of every article. The Factivist offers the unique ability to swap between the text or audio format at any moment during the article, without losing your place.
Design
For better overview of the scope for this project, we started with the site map.
Site map
Moodboard
To start off the UI part of the project, we created and tested a moodboard that was design to appeal to our persona. Using the Microsoft Reaction Cards method, we got these results from the testing group.
How would you describe this moodboard?
- Compelling
- Inviting
- Time Consuming
- Relevant
- Approachable
- Intrigue
- Effective
- Entertaining
- Stimulating
After hearing some repeating words, and generally noticing that the users thought our moodboard was hitting the appropriate notes, we felt good moving forward.
After choosing our colour palette and the “vibe” of the site, we came up with the final style guide. Our main goal was to feel trustworthy, as well as optimistic and relaxing.
Wireframing Kickoff
The easiest way to start the prototyping phase is by sketching on paper. This way we were able to quickly test and iterate our ideas. We were improving our user’s flow on-the-go, gaining a lot of feedback quickly from our testing group. When we were happy with the paper flow, we swapped to a low-fi prototype in Sketch.
Lo-Fi Wireframes
Iterations
As shown below, we developed the prototype from a basic, no contrast idea into the final look.
Final prototype video
Animations
For animations, we worked in Principle. This is how the main feature — switching between the article and the audio — looks like:
Audio start (left) & Audio player switching between chapters (right)
Responsive Design
Our persona often switches between mobile and desktop. Below, you can see how the site responds to a larger viewport.
Next Steps
What is next for The Factivist?
- Downloadable articles and audio
- Playback speed-up options
- Video content
Thanks for following along on our journey! Don’t forget to check out the Medium articles written by my teammate Jana van T Land if you enjoyed this one.
