Peeled Orange,
a responsive online magazine
CASE STUDY
For the 4th project of the Ironhack Part-time UX/UI Bootcamp, our team was asked to design a responsive platform for a newspaper, magazine, or blog. Most of the UX Research part had been conducted and the results were shared with the team. We had to base our design decisions on the needs and goals of the persona and we decided to design an online magazine.
The Project
Team: 3 UX/UI Designers (Sara Pérez Rodriguez, Shaily Gandhi and me)
Duration: 3 weeks
Goal: Design a responsive online platform for a magazine
Target Users: Eco-friendly users that want to achieve a good work-life balance
Deliverables: Animated hi-fi interactive prototype
Tools: Figma, Balsamiq, Miro
The Problem
As technologies evolve rapidly in the last decades, the digital press is taking over the audience of the printed press. Information is accessible through all devices, and digital magazines and newspapers need to be user-friendly and responsive since more and more people use their mobile phones to get the information they need.
The User
According to the given brief, “most digital magazine readers are educated young and upper-middle class. Recent studies indicate that they are part of the so-called Millennials”.
Such a reader is Elaine, an eco-friendly researcher that wants to invest more in self-care and self-love while being good to others as she wants to contribute to a more empathetic society and that is why she also volunteers for the community. She often works at home, when she’s not at university or the library, and due to her busy schedule, she mainly reads during work breaks.
The Process
Market Research
Elaine’s most favorite online News platforms are National Geographic, The New Yorker, and Broadly. We decided to do Market Research on these platforms, to understand what kind of needs she covers while visiting them and what type of aspects these platforms are failing to address for users like Elaine.
Although New Yorker is focused on news, it is following a more conservative content and structure compared to the other two magazines. Broadly on the other hand is more progressive and this is reflected in its content and interface. While National Geographic has had a wide audience for many years, for many readers the fact the content is not free for all and a subscription is needed, has driven them away (same as the New Yorker).
Defining MVP
Based on those insights, we needed to define the problems of Elaine that our magazine could solve.
We brainstormed on the features we believed the website should have and then prioritized them with the MoSCoW method.
We wanted to design a magazine that will be modern but accurate and trustworthy for the readers, so we decided to name it “Peeled Orange”. By peeling the fake news and prejudice, the writers would offer fresh and honest content to the readers.
Now we were ready to compose the MVP statement:
The goal of “Peeled Orange” magazine, 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 save them in the library, they can utilize their time better.
Designing the Prototype
After building the website’s sitemap we discussed the User Flow we would work on. Our goal was to show how Elaine would use the Magazine, as a subscribed user who is busy and needs to use her short break time wisely.
Elaine would
- visit the website,
- login,
- check the homepage for interesting articles
- select to read one article
- as she is a busy woman who needs balance in her life, she would save the article in her library so that she can read it later.
- then visit her library and check a video she had saved as she has just a couple of minutes for a short break.
The User Flow gave us a better picture of Elaine’s happy path, so together we started sketching the possible pages of the flow. It was clear that we all wanted to design a web magazine with content that is accessible to everyone, regardless of whether they are subscribed or not. The subscription would just provide extra convenience to the readers. Our goal was to help Elaine spend her time wisely and also feel that she is helping herself and the community.
We decided to focus first on the journey of Elaine, who is a subscriber to the magazine, and to understand how she would use her valuable time with the features that would be available only for these users: a personalized Homepage with suggestions based on Elaine’s interests, a mood-based section where she would select to see content depending on her daily mood, and a library where she would save articles to read later.
Based on our concept sketches we designed the Lo-fi which we tested with 3 users.
The Testing revealed very useful insights, as we observed users love most of the features but also feel a bit puzzled with the daily mood categorization. For most of them, it felt biased and intruding so we decided to abandon this feature on the next iterations.
We were happy to see that the 2nd iteration (Mid-Fi Prototype) was accepted warmly by the users that we tested it. The Usability Test showed us that we needed to improve the UX Writing as some categories were confusing for the users and to make the library more intuitive.
Keeping the users’ feedback in mind we worked on the 3rd iteration of the prototype and found the opportunities to improve the Subscriber’s Homepage and the Library page.
Visual Design
The Mid- Fidelity Prototype was ready and now we needed to focus on the User Interface of the website.
We conducted a Visual Competitive Analysis between “Broadly” and “National Geographic” platforms as they were the ones to which we had related our prototype designs. Their audience is progressive, modern, and young users just like Elaine.
We visioned “Peeled Orange” to be a magazine that would inspire and inform users like Elaine. Users that seek fresh and creative topics, that are dynamic and conscious about the social problems and that promote inclusivity in their lives.
Based on these Brand Attributes we composed our Moodboard:
The Moodboard gave us the inspiration to create the Style Guide of the website.
We chose Green as the primary color to create a safe environment for the readers and Orange as the secondary color to transmit the feeling of excitement and freshness to them.
The Hi-Fi Prototype
Since the goal was to provide a responsive website, we not only designed the Desktop version but also the Mobile and Tablet versions.
We finally had our prototype of the website/online magazine ready for Elaine!
On a normal day at university, doing research Elaine would take a break and would visit her favorite magazine “Peeled Orange” through her laptop.
She would visit the Homepage to check what’s on today but eventually to save some time she would decide to login so that she could see content that is more related to her interests. The subscribers are not excluded by some content (like in New Yorker or NatGeo), just have a more personalized structure and some extra features (articles based on interests, saving the item to the library),
Since the feature “content based on mood” was not something the users found helpful, we replaced it with the category “YOU MIGHT LIKE”. As a top row, it would be easily found by Elaine, and there she would find content similar to her interests (previous readings). At the same time, she would have access to content that is currently trending among other users or find volunteering opportunities close to her location, as she loves creating a social impact.
When finding an interesting item (article, video, or podcast) Elaine would be able to save it to her library and find it later. In the library her save items are automatically grouped per type but she also has the ability to create a category, for example with content about her research like “Climate Change Project”. At the same time, she could filter the items in her saved list based on topic or duration, as she might not have much time to spend on a long podcast or video.
Conclusions
When we conducted a Desirability Test (5 users) on the final prototype we were happy to see that the magazine was perceived by the users as a fresh and modern website. Some of them stated:
“I feel safe that I won’t be disinformed and won’t waste my time here. It makes me feel that I matter.”, Joey, 29
“Seems artistic and unique! I want to discover what this article talks about”, Nick, 30
According to the Usability Testing on the Hi-Fi we also detected some of our successful design decisions but also areas which we can improve in the future.
For all 3 users, “Peeled Orange” is a usable, clean and structured website, but for some of them, although the library page would be very convenient, they would need a better filtering and categorization system.
Overall, all the users would be interested in becoming subscribers to “Peeled Orange” and so would Elaine.
The most important learning of this project was that you need to test your design ideas and concepts, as early as possible. The fact that we tested the “mood-based content” feature early at the phase of the Lo-Fi prototype, saved us time from designing something that would eventually confuse the users and make them feel trapped.
Next Steps
What we would like to work on in the future, firstly would be the library page, to make it easier for the users to filter the items and group them in convenient categories.
Also, we discovered opportunities to eliminate the white space in the Homepage but also to improve the readability of the articles as they seemed to be too condensed for the users.
Lastly, it would be very interested to design more pages for the magazine, with content that Elaine would use for entertainment, knowledge, and social impact.
Note: A big thank you to my colleagues Sara Pérez Rodríguez and Shaily Gandhi, who made this project fun and with who I learned a lot as a UX/UI Designer!