Helping busy intellectuals indulge more in self-care and explore new passions
Ironhack project-4: Designing a digital editorial experience
The briefing
The rise of the digital press has seen a tremendous peak over the last few years. The audience is increasing as Millennials grow older, demanding all sorts of content.
With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and diving into it.
The challenge
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.
Deliverables
We were supposed to deliver a consistent, branded, and engaging experience which consisted of:
- UX research
- Visual competitive analysis
- Brand attributes
- Mood board
- Desirability test
- Style tile
- Responsive designs
- Hi-fi interactive prototype
UX Research
User persona
Elaine reads during work breaks. She often works at home, when she’s not at university or the library. She reads National Geographic, The New Yorker, Broadly.
Market research
We started researching the market by getting to know about the magazines, their story, gathering reviews, and building up the scene for our project. As part of the research, we broke down the website of all these 3 magazines into atoms & molecules. We could understand how they have divided the sections, headlines, how they have worked out graphically.
Competitive analysis
Once we understood the market deeper, we conducted a competitive analysis where we could find opportunities our competitors weren’t focusing on.
Define
With our user research and market research complete, we started defining all the insights and data we had gathered.
How might we
For us, it was important that we address our user persona’s habits and needs in order to get in her shoes. Based on those requirements, we created 3 How might we statements in order to start ideating and reaching our final goal.
Problem statement
Eco-friendly researchers need to find a way to achieve & maintain a good work-life balance and fulfill their lives by discovering new passions and contributing to the society through an online magazine because they don’t have time to gather information from different online media.
After we defined our HMW questions and problem statement, it was time for us to start the ideation process.
Ideation
MoSCow map
As we started brainstorming ideas about possible features & content, it was interesting to see how each of us visualized the project. Some things we were on the same lines, while few things we listened to each other’s ideas and worked jointly to come to a conclusion. We made 2 MoSCoW maps to categorize our ideas: One being the content and the other being the structure.
We could craft our MVP based on this as:
The goal of the Peeled Orange website, at the bare minimum, is to help readers grow and achieve a good work-life balance. By grouping topics and suggesting related content , the website further aims to help the user to discover new passions. Therefore, we must do the following:
Create a home page that highlights some topics that interest the readers, create a mood section and a menu that includes all published articles. This includes culture, self-care, environment, society, & volunteering opportunities.
By ensuring that the user can easily find the reading time of the articles and saving them in the library, they can utilize their time better.
By mentioning the reading time and having the library to save the favourite articles, we are enabling the user to utilize her time better.
Site map
Working on the sitemap gave us the opportunity to visualize our design in a website format, which was the foundation for the final design of our magazine.
User flow
we constructed the happy path for Elaine, where she reads the article ‘ Trying to be kinder to ourselves ’ and saves the article in the library for future reference.
Lo-fi sketches
Each of us did the concept sketches for the happy path we had defined for Elaine. We discussed our ideas & sketches and finalized the Lo-fi wireframes based on that. We did the Lo-fi test with 3 users and got really interesting insights. Few key insights:
I don’t understand the intention behind the ‘How are you feeling today?’ that’s something personal for me.
Why do I have this picture on my profile page? I prefer just to see the articles here.
I don’t like the “Based on your reading” suggestions, it makes me think that I would be stuck in a narrow area of info, without knowing all the views. I usually search for the opposite opinions to be sure I am well informed.
Preserve or Pivot?
based on the feedback on the lo-fi, we discussed the possibility of modifying the ‘Mood-based section’, improving the current design, and not totally pivoting with the idea.
Mid-fi wireframes
Mid-fi usability test
We Conducted the usability test with 3 users. While we had some positive feedback for the personal homepage, the possibility of saving articles to the library and overall organization, there was still room to improve upon other things.
Working on the mid-fi wireframes was helpful to refine the design and we gained a fair idea of how we’re going to produce the Hi-fi and are going ahead with our final goal. It took some time to achieve consistency and a good flow in the design which still needed a few iterations in the Hi-Fi.
Visual Design
Brand Identity
Working on the Brand attributes helped us think about the visual identity we wanted our magazine to have and how it would make the reader feel. Based on Elaine’s needs and motivations, we brainstormed several values/adjectives that our brand would constitute. After discussing amongst ourselves, we defined 5 adjectives for our magazine brand to represent to the readers.
Moodboard
We built our moodboard that reflected the brand image we wanted to create, based on these attributes we had defined.
Defining the magazine name
It was important for us to have a name for our magazine which too can translate the attributes we were defining. We were building a platform where Elaine would come for quick reading and would want to read something which helps her to focus on self-love and having balance in her busy life. We wanted to make her feel positive and refreshed while being true to herself.
Style guide
We worked on Styleguide to define the fonts, typography, colors, interface elements to establish the essence of a visual brand for the website. It helped us to start the discussion about the final product & gave us the time to start thinking and finalizing details before working on our hi-fi.
We combined the Editor fonts (a serif typeface) with the Qanelas fonts (a modern sans serif with a geometric touch).
Desirability test
We tested the Hi-fi desktop version with 5 users by showing the magazine design for 5 seconds and then asked them to define the design using 3 words. We did this exercise to understand their emotions while going through the magazine. The feedback we got was:
Unique and Artsy
Fresh and Modern
Solidary and Energetic
Structured and Curious
Hi-fi prototype
We moved on to working on the Hi-fi prototype for the desktop version once we were all set with the visual design. We worked on the micro-interactions and animations in order to give the design the final touches.
Technically it’s not possible to assign two interactions to one button in Figma in case one of them is in a hover state. I would like to share here one of the tricks that helped us to have the desired functions in the end.
Please find the short video of the Hi-fi prototype here:
So, here’s how Elaine goes through the magazine ‘peeled orange’ and finds herself rejuvenated and motivated reading it:
- Elaine opens the website on her desktop. She finds interesting articles from highlights of the week and different categories.
- Upon logging in, she discovers a fresh layout with articles tailored to her interests and preferences.
- She has suggestions based on her interests and also articles inspired by fresh trends in the market.
- Being an eco-friendly human being, she can also go through volunteering opportunities and can contribute however she likes.
- Elaine clicks on the article ‘Trying to be kinder to ourselves and reads through it. She saves it in the library for future reference, as she happens to like it.
- In her personal library, she can find several articles saved till now and can use the different filters provided ( by topic, authors, reading time) to easily sort them out and read whenever she finds some time.
Responsive Design
As Elaine has a busy work life and reads during her short breaks, we wanted to design the magazine for mobile and tablet platforms too which she can access easily at any point in time.
We decided to keep the responsive design for the tablet as similar as the desktop screen, with having more space to play with. Also, we could have the menubar and the footer design the same as the desktop screen.
With the mobile screen having less space, we designed the responsive screen with a single column structure to make it more readable. However, we designed the ‘Fresh from the peeled orange’ section with horizontal scrolling.
Usability & Desirability testing
We tested the Hi-fi prototype with 5 users for the usability test and got insightful feedback. We could validate a few things while some things we still need to improve upon.
Overall, the desirability test too gave us a positive response. Some of the feedback:
There is a lot of white space on homepage. Somehow it doesn’t look complete, like there could be more articles.
I like the library a lot! Very easy to read. I like the checkboxes and the filters.
I feel safe that I won’t be disinformed and won’t waste my time here. It makes me feel that I matter.
Next steps
Though we did the usability test with our Hi-fi prototype, few things we would still want to work on and improve.
- Usability test with more users and validate our findings
- Finish all the responsive screens
- Balance the white space v/s content on the right balance
Learnings
It was an amazing experience working on an online magazine design. We learned a lot through the whole process, including choosing the right typography, color palette, imagery style.
As a brand, our main focus was to encourage the reader to feel the ease with the content and the over feel I am really glad we could achieve that through the design. The desirability test certainly gives positive feedback.
I would really like to thank my awesome colleagues Maritina Tsouvala and Sara Pérez Rodríguez, for all the teamwork and for doing a great job!!
