We designed a collaborative magazine
A UX/UI Case Study
Dear reader,
Welcome to this Case Study developed by Erick Velasco and myself. With design and growth marketing backgrounds respectively, we have applied our UX/UI knowledge to create a digital MVP 🖥📱
Let me give you a little bit of context:
Our challenge was to create an online platform (magazine, blog, newspaper) for a specific user persona, and that’s how we came up with Pareto, a collaborative magazine with a strong personality and original content.
We split up the work process in 3 different phases: firstly the Research, secondly Ideation and Prototype, and lastly Learnings and Next Steps.
🛠The process and tools that we followed are the following ones:
1. Research
- Definition of the persona through a User Persona and Empathy Map to understand our user needs.
- Desk Research to get some UI references and start thinking on our product.
2. Ideation
- A Moodboard to have a clear understanding of what we wanted to transmit.
- A Stylescape to define colours, typos, and other UI elements.
- Value Proposition Canvas to make sure that our MVP serves user’s needs.
- Moscow Matrix to prioritize features.
- Market Fit and Brand Positioning to see how we are positioning ourselves in the market.
- Sitemap to get a clear vision on how is the content organized and it’s hierarchy.
- Sketch Wireframes to start designing and iterating UI.
- Happy Path — User Flow to understand the user’s navigation flow and the screens needed
- Style guide to standardize the writing, formatting and design of the MVP.
- Prototype for desktop and optimized for mobile.
How we organized ourselves:
We used the Notion tool to plan and split tasks among a calendar view and a table view. As in this case, the Prototype and UI was the priority, we left 2 weeks to create and iterate the product.
☝🏼 Notion is an all-in-one workspace where you can write, plan, collaborate, and get organized — it allows you to take notes, add tasks, manage projects & more.
As in this case we are working on remote, we chose to work with Figma to document the process and create the prototype and Miró to do the User Flow, both free and amazing tools ✨
First steps 👣:
We started by defining our User Persona, in this case, we chose Marta, a real woman who is 27 years old that enjoys creating content in her own Instagram account. She loves arts and on her everyday basis, consumes every kind of creative content to get inspiration and to be aware of the last trends. She really aspires to be part of the communication/creative sector.
Once we had our User Persona and knew for whom we had to create the product, we started to look into some references from other competitors and sites with a Desk Research, this allowed us to get an idea on how the magazine should look like.
Based on the Desk Research we created our own Moodboard + Stylescape as shown below. Our goal was to inspire other creatives with an atemporal design.
Once we had the first idea in mind, we worked on our Value Proposition:
To give you a little bit of context, the communication/blog/magazine sector is a tough one in terms of revenue, the main income means are ads and paid content which usually frustrates the reader.
In addition to that, there is little that can be done to innovate the product itself. And so, we got inspiration from other digital business models to be able to offer something slightly different. We chose the freemium/premium model, to improve the usability by getting rid of ads, and we gave the ownership to the user to customize their own feed as well as the possibility to create their own articles so that they can feel part of the community and in our case, reach more people with the hypothesis that they would become promoters of the product.
Pareto is a collaborative magazine in which the user can customize its own experience and content.
We also did a Moscow matrix to check which features were necessary and which of those weren’t adding value at all.
☝🏼 In case you don’t know, The MoSCoW method is a prioritization technique used in management, business analysis, project management, and software development to reach a common understanding.
Brand Positioning:
Once we got a clear idea of what we wanted to offer, we did an analysis of the competence to see what they were already offering and how could we differentiate from them.
The conclusion that we took out from this analysis is that they all offered a responsive version, although most of their mobile versions were not optimized. They all offered the exact same content in mobile and in desktop which means endless scroll and content.
On the other side, we could see that none of these magazines were collaborative, what we thought would be an advantage to us.
After this modest research, we started designing the magazine:
We started with a Sitemap to see how the hierarchy of the site and the organization of the content would look, although we already knew that in this case, we wouldn’t have a problem with categories and pages.
We also worked on some Sketch Wireframes that we tested with two different people before stepping up to a High-Fi Wireframe and designed our Happy Path at the same time ✌🏼
Here you can see how the Happy Path would look like in our desktop MVP:
In the case of mobile, we did the first approach to see how the content should be displayed or shown, deleting some of the features that are available in desktop:
What would we do next? 🤯
As this is an MVP, we would like to revisit the categories, develop more deeply the mobile version, do more testing, and see how the user uses other pages too.
What this project has taught us 🤓
Thanks to this project, we have learned how the content is potentially used and adapted to mobile, to internalize UX/UI concepts, to search for visual references having a purpose/goal in mind, and to validate MVPs with real user personas.
Thanks for your time I hope you enjoyed the process and feel free to give your feedback and some claps in case you like it 💃🏼👏🏼
