Recent UI + illustrations/other design
Recent UI + illustrations/other design
Editorial Design
Mint Soda
A refreshing, bubbly and digestible news publication.
ABOUT
MINT SODA
Mint is a refreshing, bubbly, and digestible news publication that features short and concise news reports with illustrations instead of photos for a less stressful user experience. Articles are divided into news, activism, and self care.
concept brief
oBJECTIVE
Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of Elaine, the user persona.
OUTCOME
A reimagined and psychologically mindful way to receive news that reduces stress on the reader through colors, graphics, and specific types of content.
PROCESS
Research
-
surveys
-
interviews
insights
-
Market Research
-
Competitor Analysis
CONCEPT
-
Brand Identity
-
User Flow
-
Mood Board
-
Style Tile
prototype
-
Lo-Fi
-
Mid-Fi
-
Hi-Fi
TOOLS USED
User Research Affinity Mapping Market Research
Competitor Analysis User Flow Mapping Lo-Fi Mid-Fi Hi-Fi Brand Identity Mood Board Style Tile
user persona
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.
Elaine
USER Research
In order to better serve Elaine, I surveyed 70 people, and conducted five user interviews to learn more about user’s consumption of digital content. From my research, I 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.
71%
37%
of people feel anxious after consuming new
feel sad after consuming news
97%
of people consume news online
Very few people reported any sort of positive emotional impact after consuming news. I thought to myself - how might I keep users informed without giving them anxiety?
33%
feel angry after consuming news
Interview Responses
"I like 'feel-good' articles; stories about people giving back and helping their communities. "
Benchmarking
I decided that I wanted to create a news publication that would keep users informed, but without causing anxiety.
I began to look at the competition including CNN and BBC, as well as local news. I found that these publications crammed lots of information onto their pages, used dark colors and overall had a very serious vibe that I didn’t want Mint Soda to emulate. Instead I explored the digital worlds of art and fashion publications which I found to be a much more creative and fun places to be online. Specifically, I took a lot of inspiration from the layouts used in Vogue
Fashion
Digital Arts
Screenshot from competitor's website
CONCEPT
My 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 to help the greater good and how she can take care of her mental health. Mint Soda features short
and concise news reports with illustrations instead of photos for a less stressful user experience. Articles are divided into news, activism, and self care.
.jpeg)
Prototyping
To get started on the design, I began by creating a low fidelity prototype. In order to come up with a consensual prototype, I did some round robin style sketches and highlighted parts we liked and eliminated aspects we didn’t like. Once I had created a prototype we were happy with, I tested it on five users and recorded their behavior patterns and any suggestions they offered. My users liked the minimalistic design and found it easy to navigate. The main suggestion during testing was to add back buttons for better site navigation.
My Partner and I In Brainstorm Mode & Lo-Fi Wireframes
After implementing changes, I moved on to mid fidelity. During this stage of the design, I came up with a name and created a first logo. I really wanted to emphasize a mint leaf that would have a newspaper pattern discretely overly. I also wanted to include bubbles on the logo for a soda vibe. Even though I had a really fun time creating this design, I chose to have a simplified logo that would be easier to use for the branding. I tested the mid fidelity prototype with seven users and got additional feedback and learned that I needed to add more white space to the overall design so that the user would not be overwhelmed. I also needed to reduce the size of our header and find a way to distinguish between the three categories of news, activism and self care, which we would end up doing with a clean, thin yellow line. Lastly, I needed to add a “view more” button to each category on the homepage.
Mid-Fi Wireframes
.png)
Style Guide
I created a style tile to bring life into the final design, chose bright pastel shades as our primary colors, used two different versions of Inter as our fonts, simplified our logo, and decided how to interact graphics with the text. Specifically, I decided to use a different color behind each of the articles. Originally I had only one color used across the site, but individual colors made each article pop and gave an overall fun pop art feeling to the site.
.png)