EARTH E-MAGAZINE
An online publication case study
INTRODUCTION
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.
For the fourth week of the cohort, we were tasked with the design of a responsive online platform for a magazine, directed to meet the needs and goals of user Persona — Elaine, a 35-year-old researcher who wants to invest more on self-care and self-love, while being good to others seeding a more emphatic society. Her goals are to be more rational, discover new passions and achieve a good work-life balance.
THE IDEATION PHASE
I started the ideation phase by performing secondary research reading similar publications online. I then conducted a competitive feature analysis followed by a market positioning chart. The goal was to find out more about the business and spot opportunities for design.
Three online publications were analyzed: National Geographic Travel, Conde Nast Traveler and Travel & Leisure. All positioned within the luxury market. During this phase, I spotted an opportunity to design a product aimed at inspiring our readers with articles containing attainable, life-changing traveling experiences. Also, these articles could not only be read for inspiration, but saved into collections and shared with other readers later.
With all those findings, I proceeded to interview users to gain more insights through their main pain-points and goals in mind. Eleven users were interviewed, all avid travelers and some of the quotes I gathered during the interview process were:
“ I don’t have time to read length articles online,
I wanna get inspired by the imagery and by the activities I can do”.
Renata, 37- Housewife“I wanna go somewhere that inspired someone.
To a place that kinda changes your way of thinking.”
Kathryn, 35- Strategyst
I needed to dig deeper into their needs by distilling their data into insights that would translate into a differentiating feature. A Value Proposition Canvas was the tool used to help me with that task.
Several insightful ideas were clear. The users needed to read inspiring traveling stories, create collections, save articles, share with friends, post and read reviews and book travel.
After pinpointing user pains, I ideated solutions that would solve these pains. I then used the MoSCoW method to help me prioritize the features to be implemented. Considering the impact on user vs effort for business, I decided whether or not a feature was a must or a should have. The new product should feature short inspiring articles plus the capability to save these articles and share them with friends.
The Minimum Viable Product:
Earth e-Magazine is an online publication where readers can find life-changing travel inspiration, save articles and share it with friends.
THE DESIGN PHASE
The user flow chart below shows the path users take to perform the task of browsing through articles, finding inspiration, reading through it, saving to their collections and finally sharing that article with a friend. It helps to visualize the screens that needed to be created during the design phase.
With the user flow chart ready, it was time to start designing the first rough sketches of Earth e-magazine mobile version, which only showed the main feature of saving an article. I conducted usability testing and observed confusion when users were navigating through it. They kept clicking on the main logo at the top to try to go back to the home page instead of sticking to an article and saving it. The design had to be iterated for the mid-fidelity wireframes.
For the Mid- Fidelity wireframes, all features were incorporated. The ability to not only browse through articles but also to preview how long it would take to read it as well as save favorites to a collection and later share it with a friend.
During the Mid-Fidelity usability test, users were a little confused with the choice of the menu button, they expected to see the traditional hamburger menu icon or the same three dots but horizontally instead of vertically, which I plan on incorporating when designing the high-fidelity prototype. But before doing so, I needed to start dedicating time to the look & feel of the e-magazine taking into consideration all the research and data gathered during the previous phases.
The first step was to conduct a study of the similar e-magazines available on the market through a visual competitive analysis — Colors, typography, buttons, and animations were studied and the common thread throughout all the sites was how clean the content was organized. Easy-to-read fonts, white background, use of negative space, they all had these elements in common.
I proceeded to design a mood board as a starting point of the site’s visual identity, taking into consideration all the brand elements the research showed appealing to my user persona: Inspiring, Meaningful, Friendly, Outdoorsy and Down-to-Earth. These are the foundational pillars that will guide the user interface decisions.
I conducted a desirability test with 14 users and results show that the colors, patterns, and imagery used were not quite there, the initial design had very vibrant colors and patterns that did not quite set the right mood the mental model showed us. Some of the comments were — “the images are not inspirational enough”. I had to iterate it starting by toning it down and picking a more soothing color scheme and inspirational imagery.
An additional user testing round was performed and data showed the visual identity was much more aligned with our user persona and brand attributes.
The following phase was to start designing the high-fidelity prototype, but the first step was to design the atomic inventory containing all the elements used on the online publication — logo, symbols, colors, typefaces, buttons, icons, cards, photography style and patterns.
Before presenting you with the high-fidelity prototype, let me walk you through our user persona scenario — Elaine, our 35-year-old eco-friendly researcher is in search of ideas for her next vacations coming up soon. It’s important to her to go somewhere meaningful, where she will bring back “life-lessons” if you will, it’s also important that she’s able to save these inspiring articles to her collection so she can share with her friends later and gather their suggestions, ideas, and feedback. Below you will find the static screens plus a video demonstrating the user going through the task of selecting an article, saving it to a collection previously set up and then sharing it with a friend.
CONCLUSION
During this week’s project, I had a few a-ha moments and key learnings. First and foremost, that in UX your perception is not reality. User-centric design means you are designing with users in mind, not yourself. So it’s important to perform thorough research before starting to ideate and ask users as many relevant questions as possible.
Also, during this project, I had a chance to design all the visual elements and e-magazine frames using Adobe XD and I enjoyed working with it. I felt it was user-friendly and intuitive since I am used to working with other Adobe products like Illustrator, Photoshop, and InDesign.
For the next steps I’d like to incorporate other features mentioned by users during the research phase — the ability to participate in forums with other readers where ideas, questions, inspiration, and reviews could be shared among users plus the capability of booking trips within the platform.
As far as success and failure metrics go, an increased number of subscribers, positive user reviews, time spent on reading articles, increased traffic on the forum page and average time spent on site would prove the e-magazine successful.
