Mint Soda: Editorial Design
What comes to mind when you think of mint soda? Bubbles? Freshness? A great aid for digestion? Our thoughts exactly.
This week at Ironhack, my partner and I designed a news publication called Mint Soda. What does mint soda have to do with the news? Great question.
User Persona
First let me introduce you to Elaine. Elaine is a 35 year old Eco-Friendly Researcher from Austin, Texas. She cares deeply about the environment, current events, and human rights issues. During her work breaks, she reads visually stimulating publications such as the National Geographic, The New Yorker, and Broadly to stay informed. She’s very passionate about the causes she holds dear to her heart, and is an extremely empathetic person so she tends to get upset about all the negative news circulating during these stressful times. Elaine hopes to focus more on discovering new passions and focusing on self care while still remaining informed on current events.
Research
In order to better serve Elaine, we surveyed 70 people, and conducted five user interviews to learn more about user’s consumption of digital content. From our research, we learned that 97% of people consume online content to become more informed. Specifically in regards to the news, 71% of our users reported feeling anxious after reading news, 37% reported feeling sad, and 33% reported feeling angry. Very few people reported any sort of positive emotional impact after consuming news. We thought to ourselves - how might we keep users informed without giving them anxiety?
Concept
That’s how we developed our concept, Mint Soda. It’s a refreshing, bubbly, and digestible news publication. Mint Soda features short and concise news reports with illustrations instead of photos for a less stressful user experience. Articles are split into three different categories:
- News
- How you can help and what others have done to help
- Resources for coping with stress.
Our goal was to create an informational news experience that leaves the user feeling hopeful and proactive rather than hopeless. This way Elaine can focus on what she can do and how she can take care of her mental health.
Benchmarking
With our vision created, we began to look at the competition… other online news publications. We looked at popular sites like CNN and BBC, as well as local news. We found that these publications crammed information onto their pages, used dark and dreary colors and overall had a very serious vibe that we didn’t want Mint Soda to emulate. Instead we explored the digital worlds of art and fashion publications which we found to be a much more creative and fun places to be online. Specifically, we took a lot of inspiration from the layouts used in Vogue.
Mood Board
We created a mood board to show the colors, fonts, graphics and layouts that inspired our design for Mint Soda. We liked the idea of a site which interlaces texts and images in a crisp, creative and inviting way. We included colors that were full of life, and artsy, fun graphics we found on art blogs. We wanted to focus primarily on illustrations, as a way of minimizing stress and keeping things light.
Low Fidelity
To get started on our project we began by creating a low fidelity prototype. In order to come up with a consensual prototype, we did some round robin style sketches and highlighted parts we liked and eliminated aspects we didn’t like. Once we had created a prototype we were happy with, we tested it on five users and recorded their behavior patterns and any suggestions they offered. Our users liked our minimalistic design and found it easy to navigate. Our only main suggestion during this stage was to add back buttons for better site navigation.
Mid-Fidelity
We then moved on to mid fidelity. During this stage of our design, we came up with our name and created our first logo. We really wanted to emphasize a mint leaf that would have newspaper discretely overlaid on it. We also wanted to include bubbles on the logo for a soda vibe. Even though we had a really fun time creating this design, we wanted to have a more simplified logo that would be easier to use for the branding. We tested our mid fidelity prototype with seven users and got some more feedback. We learned that we needed to add more whitespace to the overall design, so that the user would not be overwhelmed. We also needed to reduce the size of our header and find a way to distinguish between our three categories of news, activism and self care, which we would end up doing with a clean, thin yellow line. Lastly, we needed to add a “view more” button to each category on the homepage.
Style Tile
We created a style tile to bring life into our design. We chose bright pastel shades as our primary colors. We used two different forms of Inter as our fonts, we simplified our logo, and we decided how we wanted our graphics to interact with the text. Specifically, we decided to use a different color behind each of the articles. Originally we had only one color used across the site, but individual colors made each article pop and gave an overall fun pop art feeling to our website.
High Fidelity
Finally, we created a high fidelity prototype.
- From our homepage you can get a really good feel for our aesthetic, with a lot of bright colors and no photos. We have two featured articles at the top with article titles that turn our signature yellow when you hover.
- As you scroll, all articles are sectioned into three categories: news, activism, and self care. If you hover over any of the graphics, you can view a brief snippet of the article before deciding on an article to read.
- Below each article section is a view more option for browsing additional articles. This can also be accessed by clicking on the specific name of the section such as “News”, or from the menu bar.
- When you access the main news page, it reveals the most relevant articles on the top and you can scroll through to view more articles.
- If you click on an article you’re interested in, you can read the article below the featured illustration at the top. At the bottom of each article we feature a relevant self care and activism article, so that the user is not only more informed, but also has options on how to move forward and take care of themselves.
Mobile
In addition, we then created a mobile high fidelity prototype. We chose to have the featured articles at the top switch back and forth automatically on a carousel to accommodate the limited space. The same user flow is featured, but we got more organizational inspiration from mobile news sites. We wanted to keep the information straightforward and clean on the small screen.
Reflection
This was our first project of the bootcamp that was focused more on the UI aspect of UX/UI design. My prior experience in graphic design or web design was limited, so I found this to be a challenging yet creatively rewarding experience. I enjoyed creating a concept from scratch and focusing on how to visualize the concept and bring a new positive feeling to otherwise stressful content. I found myself diving into hours of creative exploration and experimentation, which ended up being worth while. I learned a lot about the need to allow for white space, especially with editorial design where there’s a lot of content. Never be afraid to Let. The. Design. BREATHE!
