MONA
CHALLANGE
Design a responsive online platform for a magazine newspaper, or blog in order to meet the needs and goals of the User Persona. The final product should be a consistent, branded and engaging experience. Based on the task I decided to create an online fashion magazine Mona with minimalistic approach where users can read the news about latest trends, beauty advices and obtain knowledge about a variety of industry-related experiences.
DESIGN PROCESS
Following the design process doesn’t just give users an intuitive experience — it also gives designers the opportunity to iterate and improve their design.
METHODOLOGY
DISCOVER
DEFINE
IDEATE
PROTOTYPE
PROBLEM FRAMING
USER INTERVIEW
AFFINITY DIAGRAM
USER PERSONA
USER JOURNEY
SITEMAP
WIREFRAME
USER FLOW
INTERACTIVE PROTOTYE
MID FIDELITY
HIGH FIDELITY
TEST
USER TEST (USEBERRY)
USER PERSONA
We stared the research by choosing our persona from the list. That’s Clarie:
MEET CLARIE
ABOUT
Clarie, 28.
Trendymaker
Sees herself as a trend-seeker
and uses publication.s as a source of
inspiration for work
BEHAVIOUR
She reads whenever she has a free slot-
especially in public transportation,
long journeys during trips or waiting
areas,
GOALS
Be on top on the latest trends.
Dress and appear fashionable.
Get more tech savvy.r double click on the text box to start editing the content.
getting to know
the user
To be able explore more User personas and identify their needs, expectations and problems I decided to create a short survey for “trend and fashion seekers”. With the question “how often do you read fashion magazines ” I could select the target group we wanted focus on.
survey
19 people
19 POINTS OF VIEW
User surveys are often the missing piece in the growth story of new websites and applications. Survey is great opportunity to discover the “why” of any data and understand customers points of view.
01
AGE
02
MAGAZINES THEY READ
03
MAIN GOALS
04
FRUSTRATION
28 - 29
Vogue
Elle
GQ
Cosmopolitan
Hypebeast
Harpers Bazaar
Inspirations
Finding fashion trends
Shop the look
Difficult navigation process, Not finding the right content
Gender
FEMALE
69%
MALE
31%
AGE
63% 18-19
HOW OFTEN DO YOU READ FASHION MAGAZINES
26%
monthly
21%
yearly
INSIGHTS
IMPORTANCE OF IMAGES
Catchy images catch users interest and make them click on an article.
category "trends"
Most of the users would like to find a clear content related to this section
SIMPLIFYNG THE CONTENT
Help the users to decide which article they want to read
​
AFFINITY MAP
I organized the answers by implementing Affinity map so I could see the repeated patterns and visualize the possible opportunities.
empathy map
Another tool that helped me understand user’s needs was Empathy. Using design thinking methodology I broke down my notes into four main character categories: think, say, feel & feel, see, hear, see and do. As I worked through the questions to understand the problem, I brainstormed possible pains and gains.
She isn´t the most tech savy
Websites have irrevelant and too much information
too much adversiment is a turn-off
fear of falling behind latest trends
feel
hear
see
Reads whenever she has free time
Sees photos, visual design of magazines
Reads about fashion, trends, celebrities
Social media, instagram
Hears about the latest fashion trends
Recommendations about fashion
Hear people talking about gossip / celebrities
Uses instagram
do
Looks for daily inspiration
Reads to get updates with latest trends
Reads Vogue, Nylon, Dazed
USER JOURNEY
After better understanding the user persona I continued the research with user jorney. It helped us discovering users pain points, emotions and the overall feeling about the experience. It was an important step to better understand customer expectations. As we can see below, the biggest pain points were not being able to find article about “the latest trends” and complicated navigation process. The user persona didn’t like the small photos and lack of minimalistic design. The pain points brought us ideas for possible opportunities — simple, minimalistic design, engaging and relevant home page sections and simple navigation.
After better understanding the user persona I continued the research with user jorney. It helped us discovering users pain points, emotions and the overall feeling about the experience. It was an important step to better understand customer expectations. As we can see below, the biggest pain points were not being able to find article about “the latest trends” and complicated navigation process. The user persona didn’t like the small photos and lack of minimalistic design. The pain points brought us ideas for possible opportunities — simple, minimalistic design, engaging and relevant home page sections and simple navigation.
CONCLUSION
GOALS
INTRODUCTION
ACTIONS
FRUSTRATION
RECOMMENDATIONS
01
02
03
how might we
problem statement
hypothesis
Young people, interested in fashion's latest trends don't feel satisfied about their shopping experience. They want get more inspiration for their outfits and have the possibility to see and purchase the whole outfit at one time
How might we add a feature that lets the users see all the items that the model is wearing so they can have a better shopping experience?
I believe that by providing users the possibility to see and buy all the items that they model is wearing online shopping experience will increase. I will know that I was successful if product sells coming from the new feature will have increased
user flow
Once I knew the goal and expectations of the user persona i continue with defining the user flow. The path starts with organic google search and finishes with user reading the article, with an option to share, add to favourite or pin the image.
USER STORY
​User Story: As a trend-seeker, I want to quickly and easily find articles on the latest fashion trends so that I can gain inspiration and share fasion tips with friends and followers.
UNDERSTANDING THE MARKET
Second important part of my research was choosing potencial competitors and performing a competitive analysis. I tried to understand the trendy magazines and the industry they belong to. Since competitors could emerge at any time or could increase (or improve) their offerings, our research was iterative and continued til the end of the project. I started by identifying and categorizing out top competitors and conducting SWOT analysis for each other them.
main competitors
Second important part of my research was choosing potencial competitors and performing a competitive analysis. I tried to understand the trendy magazines and the industry they belong to. Since competitors could emerge at any time or could increase (or improve) their offerings, our research was iterative and continued til the end of the project. I started by identifying and categorizing out top competitors and conducting SWOT analysis for each other them.
The next helpful tool in the process of market research was creating competitors mood boards in order to identify their Brand Atributes. Moodboard is a guide that allows reflect what a customer’s experience is like when interacting with a brand or product. This process brought me many good ideas about how I wanted to develop our design and also showed us what we wanted to avoid. By comparing brand atributes from competitors, we could gather inspiration and tips for my future Design.
Creating a moodboard allowed me to reflect what a customer’s experience is like when interacting with a brand or product. This process brought me many good ideas about how I wanted to develop my design and also showed me what I wanted to avoid. By comparing brand atributes from competitors, I could gather inspiration and tips for our future design.
crap principles
​
Contrast, Repetition, Alignment, and Proximity. Using all four of these elements helped us to design our magazine with a polished appearance and catch readers attention. To practice these principles and know on which aspects we should pay more attention when designing an editorial we decided to analyse our competitor website and detect each of the four elements.
“People do not buy goods & services. They buy relations, stories & magic.”
— Seth Godin
MOODBOARD
Next, I decided to plan my brand visual identity. Defining the style tile made ensured me that I was in the right page in terms of the look and feel before I started to build the design system. It also helped me to set my design standards and maintain continuity. At the same time, it was a good basis for our for potential customers.
Styleguide
Styleguide
typography
Since my final product was a fashion magazine with minimalistic approach I wanted to make sure the typography I choose was easy to read and mantain the clean, minimalistic look. To achieve this, I chose the Google Font Cinzel as our typography. It let me create the hierarchy and overall graphic balance.
color
I chose a pure yellow as my main brand color to give creative and fresh look to the design. Using a white background helped me to creat clean design and minimalistic look. For the texts, I established three colors: a reduced black, grey and white.
ideas
With the structure mapped out it was time to create low-fi’s to get some ideas on paper. It helped me to make a final decision about how I wanted the app to work and navigate.
LOW-FIDELITY
MID-FIDELITY
DESKTOP
TABLET
MOBILE
HIGH-FIDELITY
​
After building the prototype and being fulfilled with a user test the designing process of the application is completed.
