Background
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.
With numbers increasing, publishers are prompted to deliver quality content and a great digital product for readers to experience a different but still unique act of opening up a magazine and diving into it.
Challenge
Design a responsive online platform for a magazine, newspaper, or blog directed to meet the presented User Persona's needs and goals (minimum 5 different screens).
Solution
Design a responsive online platform for a magazine, presenting 7 different types of screens for the mobile version and 6 different types of screens for the desktop version.
Client
Ironhack Project
Timeframe
1 week
Role
UX/UI Designer
(group project with Angelica Gray and Rosamaria Lucena)
Skills/Tools
User research, market research, UX/UI design, Figma
The given persona
Candice (28) - The trendy Marketeer
-
She reads Vogue, People, Cosmopolitan, Elle.
-
She sees herself as a trend-seeker and uses publications as a source of inspiration for work.
-
She reads whenever she has a free slot - especially in public transportation, long journeys during work trips, or waiting areas.
-
Goals: be on top of the latest trends, dress and appear fashionable, get more tech-savvy.
Design Thinking Process
1. Discovery
Research Goals
-
Understand the users that could potentially fit the given persona, their interests and expectations, towards a fashion editorial;
-
Discover existing design patterns that could be applied to the magazine.
Research Methods:
-
Interviews (school owners and students)
-
Competitive analysis
Interviews
We interviewed 6 users that consume fashion data - the closest we could get of our initial user persona.
The main insights we could get were the following:
-
Most of the users don't enjoy reading physical magazines.
-
Most of the users get updated on fashion through digital sources, mainly Instagram.
-
It's important for them to have information on the products and business's sustainability (types of materials, environmentally and ethically production).
-
They value the purpose behind fashion products, diversity, and uniqueness.
What are others doing?
We analysed direct competitors, such as Vogue, Harper's Bazaar and Elle to evaluate their contents and how they are presented, as well as to understand their information architecture.
Nevertheless, as we were not working on a typical fashion magazine, we also checked what other strong indirect competitors, such as National Geographics and Time, were doing.
2. Define
Organizing data
Gathering all the data collected on the interviews and the survey, we used the affinity diagram to organize the information in different big groups - Values, Content, Platform, and Sources of information.
The evolved persona
Candice (28) - The trendy Marketeer
-
She reads Vogue and Bazaar but her main source of information is Instagram posts.
-
She uses publications as a source of inspiration, but she has her style and values uniqueness.
-
She seeks and values information on sustainable and diverse fashion businesses.
-
Goals: have her unique style, and be more conscious of her fashion buys.
User Flow
The requirement in this project was a minimum of 5 different types of screens, so the following user flow was defined - please note that for the mobile version, the flow does not include the last step:
3. Design
Branding
Based on the insights we got from the interviews, we defined our brand attributes - Creative, Purposeful, Inclusive.
Mood board
We created a visual mood board featuring pictures that we considered relatable to our brand identity. We sought cultural diversity, colourful sceneries, nature, plants, and pastel palettes.
Style Tile
Meet our brand
Untold is fashion beyond the mainstream
We stand for:
Diversity
Sustainability
Ethics
You can discover various designers and brands all over the world, with a purpose, whose products are ethically and sustainably produced, handmade, using recycled materials.
Low and mid-fidelity prototype
High-fidelity prototype
Time to put all the pieces together and get to the high-fidelity prototype.
4. Prototype and test
Usability Testing
The prototypes were tested at their different phases (low, mid, and high fidelity).
We aimed to gather first and overall impressions of the app's look and feel and also, understand if the user could complete the proposed tasks (user flow).
The tested users were a mix of the school's students, designers, and other unrelated users.
Tests were conducted individually, in person, using a Figma prototype.
Picture full-screen view
In the full-screen view of the editorial pictures, we started by having little dots in the below area of the screen to show how many pictures were available and for the user to situate himself.
While testing, we got the feedback from the users that there would be a high chance of having a lot of pictures in this section, so we decided to change the little dots to the information in numbers on the right top corner of the screen.
Additionally, users showed interest in having detailed information on the clothes showed in the pictures, so we added the "Details" button.
Final design
Having done the testing with the users, the final result, for the proposed user flow, can be checked on the videos.
Learnings
This project taught me to trust the process - I have to say the beginning was tough, and hard to see where we were going as I was feeling we would not have enough time for the proposed challenge, but throughout the process, our path became clearer and this project turned out to be a very interesting and funny one. I have to say I was proud of what we accomplished!
We also had the chance to explore auto-layout in Figma and perfect its use.
Biggest learning: Trust the process :)