ENVI, AN ONLINE MAGAZINE …
… FOR YOU TO FEEL THE RIGHT KIND OF ENVI (NO, WE HAVE NOT MISSPELLED IT, OUR ENVI COMES WITHOUT A “Y”)
Task 5 -:-:- Week 5 -:-:- Ironhack Bootcamp Berlin -:-:-
Team of 2 (Canada and Germany)
:-:-:-:-:-:-:-:-:-:
TASK
For this task, Ironhack had already conducted most of the user research for us. We were offered several user personas to choose from to design a responsive online magazine both for desktop and mobile use.
:-:-:-:-:-:-:-:-:-:
USER PERSONA AND COMPETITORS
The user persona serving as an inspiration for our magazine was 35-year old Elaine, the eco-friendly researcher, a person with many interests and an empathetic approach to her surroundings, who reads mainly during work breaks. Her favorite magazines are National Geographic, the New Yorker, Broadly. She would like to invest more in self-care, be more rational, discover new passions and achieve a good work-life balance.
Competitor analysis
When looking into the broad range of topics offered by the three competitors National Geographic, the New Yorker, and Broadly we realized we would have to distill the ones that mattered most to our user and combine them in our new magazine.
While National Geographic is about travel and exploring and the New Yorker a classic online newspaper, Broadly is the most modern one, covering activist topics and aiming particularly at female readers. Because of Broadly, an affiliate of VICE magazine, we knew we could add a modern touch to the magazine while always maintaining a high quality of the contents featured. If envi was a person, we would describe it as below:
envi is always up-to-date, spirited, profound and modern but never pretentious or superficial.
:-:-:-:-:-:-:-:-:-:
THE MOOD YOU ARE IN
What mood should our magazine convey? How would our visuals align with the attributes we had just linked to our online mag? The answer to these questions were to be given by a mood board, which would illustrate which direction the visual branding was heading to.
We chose a mix of earthy colors considering the environmental topics we would address but added shades of pink for a lively appeal. The pictures should be minimalist and strong at the same time, while the typeface should be easy to read and not too dominant.
After conducting desirability testing of the high-fi prototype, I later added freehand shapes resembling brush strokes which would further underline the natural feeling whereas geometric patterns would hint at another important category of the magazine— culture — covering architecture, literature and art.
Wit me versus envi
The first name I was thinking about for the magazine was wit me because the readers would be witty people expecting well-written articles with surprising, yet profound contents. But then I started playing around with the word environmental and came up with envi because it will make readers think twice, asking themselves what this envi is all about, if there shouldn’t be a “y” instead of an “i”, and if not, why not. Those knowing French might feel inclined to add an “e” because envie is a wish or desire ...
How do you read? And where?
Before starting the project, we talked to several people to find out about their reading habits when it comes to online magazines. Most of them admitted that online reading was rather for smaller chunks of information because they would often read on public transportation or during work breaks, always at risk at being interrupted. They confessed they often ended up merely looking at the headlines and the pictures, just to get a rough idea of what was going on.
As a result, we added the reading time on top of each article and a save function so that you can always get back to the articles you are interested in. On the article pages, we have reserved enough space for great photography enabling our readers to just indulge in the pictures if their surroundings are too distracting.
:-:-:-:-:-:-:-:-:-:
SITEMAPS AND HEAVY PROTOTYPING
In a next step, we sat down and created a sitemap. The five categories we felt should be covered by envi magazine were: lifestyle (health, work-life balance, wellness), culture (art, architecture, literature), travel (living abroad, eco-friendly travel, travel inspiration), science (environment, psychology, innovation) and politics (activism, news) although we did not have the specific names at this particular stage.
I later changed them to LIVE — INDULGE — FLY — GROW — KNOW to make the magazine stand out from the crowd after users told me they liked magazines with unique category names. Each category is linked with a color so it makes navigation easier.
:-:-:-:-:-:-:-:-:-:
DESIRABILITY TESTING
Above you see the high-fi prototype of the magazine’s first version we showed to our users when conducting desirability testing. Adhering to the Microsoft Reaction Card method, we had them choose no more than five adjectives out of 20 to describe the website. Their top picks were modern, inviting and informative, and matched with what we had in mind for our magazine.
:-:-:-:-:-:-:-:-:-:
STYLE GUIDE
At an earlier stage of the process, the style guide helped us define how our magazine should look like. The changes I made to our magazine’s first version later also included the style guide because I couldn’t let go off it after the presentation. It felt like this magazine still wanted to be looked at from a new perspective after letting everything sink in for a couple of days. I will therefore show you the redesigned style guide and prototypes I came up with after the project week below.
:-:-:-:-:-:-:-:-:-:
ADDITIONAL CHANGES AFTER MORE USER TESTING
Some of the users had pointed out that the navigation bar of the first version needed too much space on the screens. I therefore limited its use to the homepage and laid out smaller headers for all other pages. In order to keep up the look and feel of the main header throughout, I moved the brush stroke down to be part of the article.
I also looked at the logo again and changed the letter “e” to upper case because I think that upper case reflects the impact the magazine aims to have more adequately. I also replaced the rather generic typeface of Libre Franklin by a more eye-catching one, Zefani Stencil.
:-:-:-:-:-:-:-:-:-:
FINAL PROTOTYPE
Here is an overview what I changed for the final prototype:
- I renamed the categories to LIVE — INDULGE — FLY — GROW — KNOW
- I set the “e” of the logo to upper case and used an eye-catching font for it
- I added more space for pictures on the article pages
- I readjusted the navigation bar to be smaller
:-:-:-:-:-:-:-:-:-:
IF YOU WOULD LIKE TO SEE A SHORT MOVIE OF THE HIGH-FIDELITY PROTOTYPE, YOU ARE WELCOME TO DO SO HERE: https://vimeo.com/332980156
:-:-:-:-:-:-:-:-:-:
LEARNINGS
It is indeed possible to come up with an online magazine in four days, although I think it is helpful to let the project rest and look at it with a fresh perspective after a short break. Projects stay yours even after presenting, they evolve and grow and may ask for amendments, and if you have the time you should listen to them …
