Fluid Magazine
An Editorial Design by Carol and Luiza =)
The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content.
The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape.
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 dive into it.
Our challenge in this project was to create a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of a presented User Persona.
Our goal in this project was to develop an online editorial that meets our persona’s unmet needs and adds value to their experience. We tried to assess the user persona with a critical eye, looking for design opportunities within the provided information.
Project Outline
- Four days… I know…
- Tools: Figma, Google Forms, Maze and Slack.
- Approach: Designing Thinking.
Research & Users
Paula was designed based on the available information online and research insights globally.
Together with Paula, we received research about how people are consuming digital press. We analyzed the stats and facts, conducted some guerrilla research, and gathered the following insights:
- Recent studies indicate that digital magazine readers are part of the so-called Millennials.
- They tend not to subscribe or visit any digital magazine website.
- They inform themselves, “pretty much on social media.”
Brand Personality
To Identify the foundation of visual design and best practices through observation, analysis, and methodology, we start thinking about our magazine’s visual identity. We defined its attributes based on Paula’s favorites magazines websites, our competitors, Dazed, Vice, and Indie.
Brand Attributes:
- Alternative
- Creative
- Progressive
- Rebellious
- Flexible(?)
- Dynamic/Versatile (?)
Visual competitive analysis:
We looked at the competition and tried to identify current identities that are being used within the market, so that:
- We are aware of current trends in this space
- Have an idea of what customers may expect.
- Set our product apart from the competition
We built a visual identity for each brand, paying attention to their logos, colors, and any assisting imagery that they use. Then, we tried to think of what their brand attributes may be.
It was interesting to observe how visually consistent de competition Is. They all have minimal style -using shades of black, white, and grey in backgrounds and typography and compensate abusing of layout and Imagery with vibrant colors, different sizes, creating textures, weight, and rhythm. As you can see in the image above in my Figma file.
Mood Board & Survey
With all visual competition analysis data and brand attributes in hand, we designed a Mood Board to collect and present ideas to enable the project’s development in its early stage. With this research tool, we could test how people react to the design’s overall look and feel.
After creating the mood board, we asked people to choose the best words to describe it. As we suspected, the design was Alternative, Progressive, and creative, but 36.4% voted “Funny,” which was not a brand attribute we thought of before.
Using our mood board and all visual research data as a reference, we created a Style Tile to communicate our visual brand’s essence and the elements’ relationships within the design. Like the competition, our product has a minimal style and abuses of layout and Imagery. We wanted to guide and please users like Paula with simple, colorful, and textural content and maybe funny?
User Journey Map & User Flow
To understand what we were about to design, we mapped our user journey so that we were able to define our user flow and understand our opportunities.
- We knew Paula does not visit magazine webpages and that she probably would enter one via social media.
- Our opportunity to make her use Fluid would be catching her attention once she is already using the product.
- To make her engage with the product and engage users like Paula to read Fluid, they must be able to share it on social media without being logged into the web app.
After understanding how Paula would behave when reading Fluid, we could craft her flow and understand which screens were essential to be designed when creating our MVP
Wireframes & Prototypes:
We opted for low-fidelity prototyping in the initial stages of the design process to gain insight as early as possible. We crafted desktop and mobile Lo-Fis and Mid-Fis .
Wireframes can surface usability problems to consider before investing time in the development. We found that Fluid is somehow familiar and approachable in the user’s mind, although we had some usability problems…
Tests & Insights
We tested our wireframes remotely and unmoderated through Maze and remotely moderated through Figma.
The Task was like Paula’s flow and journey map: Find an art and design article. After reading the Art and Design article, share it on Twitter.
The main problems users had were:
- Lorem Ipsum. When designing the magazine, the text and content are crucial to guide users, especially when choosing a simple design.
- Our Mid-Fis had the same layout for different articles, people were confused, thinking they were in the same place.
- Once other designers tested the prototypes, we also had valuable design feedback about our typography, navigation, and methods.
HI-FI & Iteration
Fluid magazine was mainly a UI challenge for us, once we only had to summarize and polish an already done research and persona. To iterate and create Hi-fidelity. prototypes, we used our Style Tile and test results as guides. Once we understood the imagery and text would guide our users:
- We chose imagery that fits the message. Images that can explain the concept of the product or service. That fit our brand attributes and persona’s preferences.
- Chose striking visuals that capture attention. We were focused on selecting the most compelling images. As Steven Snell mentioned, “A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered.”
- We used emotionally powerful imagery. The images should be emotionally persuasive — with an emotional impact and reinforce the feelings we were trying to create. After all, emotion often overrides logic when it comes to decision making.
Next Steps & Learnings
The entire project was a learning. It is fascinating to me how UX is a discipline where different people can highlight their talents. Working with Carol was super cool once she was structured, empathetic, open to give and receive feedback, and interested in discussing and being part of every detail in Fluid’s design process; we were aligned and supportive.
We also agree that although we liked the project result, there are always iterations to be done. I believe the next steps for Fluid MVP would be:
- Card sorting to check if navigation makes sense
- Newsletter
- Login/ Signup (It would achieve the goal of bringing more users to the platform)
- Test & iterate
I would also include frameworks as Jobs to be done and crazy 8; we focused on designing a magazine for our persona, but I feel we failed to create an out of the ordinary experience, different from the competition.
Ps.: If you manage to read until here, first of all, THANK YOU! And please feel free to send me feedback about Fluid or my study case =)
Ps2.: Gimme a clap? Pls? ❤
