CARE
Online platform for a magazine — UI & Responsive Design
Editorial design was a fourth project for the UX/UI Design Bootcamp at IronHack. My assigned partner was Daniele Okamura and I loved working with her. Our task was to design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas. Time: 5 days.
User Persona
Our starting point was a predefined user persona, labeled as Millennial and described as well-educated, young, and belonging to upper-middle class. We were also given an option to create second user persona based on same key needs. As we noticed that description of a predefined persona was not 100% fitting with the real users that took part in our short guerrilla interview, we decided to seize the opportunity and create more inclusive and racially aware Elaine.
Visual competitive analysis
VCA also started with three pre-given indirect competitors, as Elaine is already reading The New Yorker, Broadly (Vice) and National Geographic. To them we added more direct competitors like Poosh, Goop and S elf, because we saw her undeniable need to invest more time in self-care and self-love.
After identifying visual identities of our direct and indirect competitors, (logos, colours, photos, imagery & typography) and researching on current trends is self-care female magazines we listed all key attributes that apply to our direct and indirect competitors.
Branding beginnings
Ever construction has its own functionality, every brand has its own audience and every design has some sort of personality. For Webzine CARE, we were focusing on our user persona Elaine and on the real people that helped us deepen her profile. Women that are self-aware, educated and eager to learn more. Women that value diverse stories addressing readers ready to broaden subjects of self-care and self-love, simultaneously respecting their intellectual nature. Topics that are more socially engaged than superficially political, more body positive than girly heteronormative, more racially aware and more eco-friendly. Our key brand attributes were:
- Empowering
- Self-caring
- Reliable
- Smooth
- Feminine
For this attributes we created 3 moodboards and conducted a short survey, with the question “which moodboard corresponds the best with the listed attributes?”.
The results show that most of the voices went for moodboard 3 and 1.
Style Tiles
Style tiles are a needed step for UI Designers, especially in the process of gradually defining a look & feel and are consisting of fonts, colors and interface elements that communicate the essence of a visual brand. Based on our two most voted moodboards we created 3 similar but yet different style tiles. But comparing all 3 and going back to user needs we realised that first two correspond the most and decided to combine them.
Site Map and User Flow
Creating Information Architecture was crucial for users experience of the CARE Webzine. We started from Site Map asking ourselves what content should we have and how do we structure it? As Elaine is already reading The New Yorker, Broadly (Vice) and National Geographic and desires to read something more exclusively oriented toward female self-care and self-empowerment, we decided for a Webzine that is smooth and easy to use. As she is reading between the brakes, the content needed to be clearly displayed and accesable.
We had a really short time for the development of the Webzine, so our user flow needed to be very concrete and focused on the main tasks Elaine performs.
This is the story of the user flow:
Elaine enters Care Magazine site. Scrolls down to find article she wants to read. After finishing the article, she wants to find more stories in similar category. Clicks on tag and enters health. Reads new article and clicks on hyperlink. Looks like page no longer exists. Elaine gets back to CARE Magazine and wants to share the story on Twitter.
Mid — Fi
From information architecture we moved toward designing Mid-fi prototype that would be intuitive and easy to use. Unfortunately, there was not enough time for testing on more than two users, which moved fast through the prototype and focused their attention on performing CTA tasks. If we had more time, maybe the feedback for the visual design would come earlier and we could have refined before entering Hi-fi prototype.
HI-FI
First two steps for creating the Hi-Fi were Atomic design and decision on visual/photo identity for the Care. As I implemented feedback given after the presentation, I refined not only general design but also Atomic design.
Key learnings
- Take more time for testing and feedback , take it seriously— implement constructive feedback and again refine design
- Refine, refine, refine — if you want your outcome to correspond to real people and their needs, wants and desires you need to always refine
- When you do research do it in the same style as the final product so you don’t have a chaotic imagery
Thank you for reading :)
