Case study: Responsive online platform for a magazine
Thanks to responsive web design any web content adapt its layout and functionality to the different screen sizes and proportions of a variety of devices. The term was conceived in 2010 by Ethan Marcotte and nowadays it’s the standard practice to create consistency and seamless and fully functional sites in any device, and of course, this helps sites to reach more users.
Project Brief
Context: UX/UI Design Bootcamp by Ironhack
Duration: 4 weeks (Part-time)
Topic: Editorial Design
Device: Mobile, tablet and desktop
Learning goal: Visual Design, Micro Interactions Design and Team Collaboration
Design 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.
Contributors: Xavi Almirall, Vince Rubio and Silvia Vukic
Tools: Figma and Maze
Research
This project aimed to design a responsive online magazine directed to meet the needs and goals of a primary persona assigned to our team. So let me introduce you to Elaine, our primary user persona.
We could describe her as “The Eco-friendly Researcher”. Her primary goals are to be more rational, discover new passions and achieve a good work-life balance. She reads National Geographic, The New Yorker and Broadly (Vice) during her work breaks, which is usually at home.
Once we empathize with Elaine, we did an extensive competitive analysis to identify opportunities and needs in the current magazine marketplace. We compared Elaine’s usual magazines and three more competitors: Mega Interesting, The Atlantic and Self.
This table shows 9 out of 24 features between these online magazines that we compared. As you can see, few magazines had the “Events” and “Support our mission” features. However, those are important features to consider for Elaine as she wants to be good to others. Also, we must consider introducing the “Podcasts” feature to our MVP if we want to be competitive in the market, as many other magazines have already implemented this feature.
After that, we defined the problem statement:
Eco-friendly Researchers needs to find a way to fulfil their lives by discovering new passions and living more rationally and ethically consulting a single magazine because they don’t have time to gather information from different online media.
And also the hypothesis statement:
We believe including the volunteering experiences and webinars with experts in our online magazine for eco-friendly researchers will achieve them fulfilling their lives while discovering new passions, living more rationally and ethically. We will know we are right with an increased retention rate and new users.
Ideation
To start with the ideation part, we defined three HMWs based on Elaine’s goals:
How might we help Elaine to think rationally?
How might we make it easier for Elaine to discover new passions?
How might we support Elaine to achieve a good work-life balance?
Then we ideated features for each HMW and we used the Moscow Method technique to prioritize and categorize which features are a must and optional for our MVP.
Bearing Elaine’s needs in mind, we decided to prioritize the applications of the must-have features:
- Podcasts and webinars to help Elaine to think rationally.
- Volunteering experiences make it easier for Elaine to discover new passions.
- Weekly newsletter with tips to help Elaine achieve a good work-life balance.
Before moving to the next step, we defined our Minimum Viable Product (MVP Statement):
The goal of the Modern Penguin website, at the bare minimum, is to fulfil users’ lives offering ways to discover new passions and helping them to think more rationally. By offering a variety of rigorous articles, podcasts and webinars led by professionals and also volunteering experiences. Therefore, we must do the following:
Create podcasts, webinars and volunteering experiences pages that includes articles related to a specific topic and a weekly newsletter with tips.
By ensuring that these things are available, the user will be able to learn and develop their rational thinking while discovering new passions and achieving a good work-life balance whatever device they are using to read the magazine.
Once we defined the site map with the content we wanted to include in our magazine, we created the happy path that Elaine will follow to read an article called “Work-life balance in pandemic times” and enrol in an online webinar related to the same topic.
Design Solution
Each of us created concept sketches and then we put the ideas together to build the final low-fi prototype.
We couldn’t do the concept testing for the lack of time so we jumped into the mid-fi wireframing.
And once we prototype it, we did the first usability testing. In order to reach out to more people, we used the testing platform Maze. However, due to not all users were finishing the two tasks we asked them to complete and didn’t leave us feedback, we decided to do some testing via Zoom to gather more valuable insights from users. These are some of the most repeated feedbacks:
“The header is too large when you scroll” Farah, 30
“It’s difficult to find the article “Work-Life Balance in pandemic times” because it’s on the second page and the other articles are with Lorem ipsum” Laura, 28
“I don’t know what do you mean with “Experiences” and why webinars are in there” Kathy, 30
We took into consideration the first two feedback so we fixed and improved straight away from our mid-fi prototype. However, the word “Experiences” involves volunteering, webinars and workshops, although it was not clear at a glance, once the users played and started discovering the prototype it made sense. So we kept it that way.
Visual Design
At that point, we were ready to start with the visual design! We were very excited to define principles that will guide the experience visually throughout our magazine.
- Visual Competitive Analysis
When designing an interface, it is important to be consistent and predictable in your choice of interface elements. That’s why we took it very seriously and, before creating our brand, we did a deep visual competitive analysis with three magazines sites, direct and indirect competitors, that were a referent for us not only in terms of visuals but also about the content.
This helped us to identify the trends, imagery, layouts, colours, typographies but also to know how to make our magazine distinctive and unique.
- Brand Attributes & Moodboard
A brand defines the personality of a company. That’s why we selected five adjectives to represent and identify the type of user experience we wanted to deliver with our online magazine called “Modern Penguin”, based on Elaine’s needs.
Based on these attributes we created a mood board that aligns with the style and concept of our magazine proposition. We try to keep it simple but give touches of vibrant colours.
- Colours
Our colour palette represents our brand identity, we choose vibrant colours with strong contrast. Black and yellow as primary colours, red as the secondary, blue as accent and beige the neutral.
- Typography
We choose a sans serif typography called Avenir Next for its simplicity, easy legibility and its large family font.
- Style tile
Also, we had a bit of time to create our style tiles that contain the main UI elements to keep a consistent brand strategy. We included our Modern Penguin logo, colours, buttons, icons, imagery style and text styles.
Solution
After empathizing with Elaine and ideating a solution that could meet her needs and goals, here is the result of Modern Penguin. A dynamic and easy-going online magazine was created to provide Elaine with rigorous and reliable content to achieve a good work-life balance, help her to discover new passions and also make her think more rationally.
Step 1: Go to the “Health” section and discover the content of the “Work-Life Balance” subsection.
Step 2: Read the article “Work-life balance in pandemic times”.
Step 3: See more about the upcoming “Wellbeing and Work-Life Balance” online webinar.
Step 4: Book your seat for the “Wellbeing and Work-Life Balance” webinar.
Step 5: Enter your email and password to register.
Step 6: Continue discovering experiences
Also, we did a responsive design for tablet and mobile versions, using auto layout and constraints. For the tablet version, we didn’t have to modify much. However, for the mobile version, we had to create a few new components, convert the content rows into columns and change the size of the typography to fit all the content and keep consistency.
- Desirability test result
Visual elements produce an emotional response from users. For that reason, we completed a Desirability Test to understand our user’s emotional reactions to a few frames of our Hi-Fi Prototype. We managed to do 13 desirability tests. Here is a word cloud with all their thoughts:
The following adjectives are the ones that best describe our prototype for our users:
MODERN — COLORFUL — INFORMATIVE — EASY — CLEAR
We were really happy with the result, as most of the users catch our brand attributes and the adjective was more and less the essence we want to transmit to our users.
Next steps
Even tho we did complete the design challenge for this project. The next steps we would like to do in order to improve our project are:
- Finish all the responsive screens.
- Prototype and test both mobile and tablet designs.
- Redesign the logo and improve the brand style guide.
What I have learnt
This project was challenging but really fun! My team and I complemented each other very well and it was very easy to build “Modern Penguin” from the scratch. We finally created the UI design which make me really excited because It’s what I enjoy the most.
However, we faced some issues with the colours and usability testing that we have to consider for future projects. Regarding the colours, I would have loved to have more time to choose properly the colour palette but due to the lack of time, we didn’t risk that much. And about the testing, we didn’t specify properly the tasks on Maze and that made our testing result not being so accurate. So I prefer to do a few usability testing in the traditional way (in person or via a video call platform) and see in real-time what the user is doing and also be able to interact with them rather than using online testing platforms whose results are not that accurate. But overall I think we did a great job!
If you are reading this, I hope you enjoyed it and from now on you will see penguins with other eyes! 😝
