Elaine (35) — The Eco-Friendly Researcher

• She reads National Geographic, The New Yorker and Broadly.

• She wants to invest more in 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, and achieve a good work-life balance.

Our market research started by looking at the contents of the magazines that the user persona follows. Elaine's goals, lifestyle and interests played a major role in creating our own information architecture.

As we were designing a new magazine platform, we started out by defining the site map of the themes/contents of the online magazine. In order to move on quickly, we need to understand the essence of the content, when to use each, and for what purpose. 

After the site map we asked target users to organise the contents into group. We gave each participant some time to show and tell the rest of their thought process when they were sorting the cards. This method gave us important information about how our users understand the content on our website.

My partner and I created a moodboard that explains the mood of our magazine. For our target user, self care and self improvement (on both the inside to outside) are important topics. They also care about the world and the environment, and want to stay up to date with news about technology and social politics. 

Our moodboard is a way to set the visual direction for our project. The vibe of the magazine is Up to date, Down to Earth but not Glamorous.

One of the challenges in this project was to adapt our site to fit all of the different screen sizes in an efficient way, and to think about how the information will be displayed for different screen sizes. First we designed the mobile device and then adapted that design to the desktop version.

Low-fidelity prototypes for Mobile

Low-fidelity prototypes for Desktop

Quicksand is a free, open-source sans-serif typeface designed by Andrew Paglinawan. It has rounded letter forms giving it a warm and friendly appearance. 

Montserrat designed by Julieta Ulanovsky, which is a The font is a geometric san-serif and comes in many different styles and weights including Light, Extra-Light, Bold, Semi-Bold, Italic, Black-Italic, etc. With this font our website look clean and simple.

Colours are the most apparent style property. We chose a primary brand colour, a secondary brand colour, and any other colours used in the user interface. Because of our goal targets and the vibe of our magazine, we used colours from the earth that tell us something about the creation and texture of our planet.

• One of the differences between the desktop and mobile versions is when we click the contents, we can only see the main content name on the mobile version. The user can reach the sub-contents through the drop down menu. On the desktop version, the user can already see the sub-contents under the main content.

• We use a burger menu on both the mobile and desktop versions to have simple and clean look. 

• On the home page we already show some articles from all the contents, so users can have an idea of vibe of the magazine.

• Users can create their profile and save the articles that they want to read later.

We gave users a list of product reaction words that mix positive and negative descriptions, and asked them to select five word to describe our design. We also showed them two other websites and hid all the websites name including our magazine so they could be more honest.

We were quite happy with the reaults because they picked the words that we were expecting from them. They described our magazine as...