Case study: online magazine
Designing a responsive online platform for a magazine directed to meet the needs and goals of the presented User Personas.
Tools: Figma, Google forms, Maze, paper, marker
Duration: 5 days
Team: 2 persons
Challenge
Most digital magazine readers are well-educated, young, and upper-middle class. Recent studies indicate that they are part of the so-called Millennials.
The goal of this project is to develop an online editorial that meets the unmet needs of chosen personas and adds value to their experience. Assess chosen user persona with a critical eye and look for design opportunities within the provided information.
Problem statement
How might we give Candice information about latest trends and fashion events.
Research
Together with my colleague Iya Akasheva from our brief and user persona description we start with information that Candice reads Vogue, People, Cosmopolitan, Elle.
Because she sees herself as a trend-seeker and uses publications as a source of inspiration for work in our new magazine we decided to go for the more progressive side and name our magazine “Gatekeeper.”
Dazed and Confused, Nylon, AnOther, Kaltblut — would be our main competitors in that field.
Visual competitive analysis helped us to find a position in the market where we can place our magazine and shape brand attributes. You can see from the brand comparison chart where we decided to place our brand: a bit less playful than Nylon and a bit more progressive, but not so much as Dazed.
Mood board
Based on that research we started to develop a mood board for future magazine. Surprisingly it took us nearly 2 days to define the one that fits to brand attributes and the whole process challenged us a lot. After collecting a huge amount of references, which were enough to compose 3 different mood boards, we finally created the final version.
User flow
While we were doing our visual research on brand competitors we have conducted quantitative research too. In a survey we collected data about users preferences: demographic data, which magazines they read, how often and which topics are the most interesting. It was a helpful input for further information architecture website development and user flow in the first place.
Mid fidelity prototype
After some rough sketches of basic layouts on paper for the low fidelity prototype stage we jumped straight into mid fidelity prototype. While making mood board research we had an opportunity to prepare a small style tile and to save time we implemented it already in a mid fidelity prototype. This was a bit more time consuming at this specific stage, but gave an advantage of huge time saving in high fidelity prototyping.
Plus it gave a more clear and understandable perspective for users at the testing phase. All users went through basic user flow easy and quick without any difficulties.
Hi fidelity prototyping
1. Home page
2. Fashion page
3. Article page
Key learnings
- Teamwork is very important and good communication is a must, especially when you work in a fast paced environment.
- Huge discovery was how a mood board helped to set the tone of the magazine.
- Figma is an amazing tool when you master it.
