A New Breed Of News

Harry Holmes
9 min readOct 22, 2021

Overview

The rise of the digital press has seen substantial growth in the digital age. The top magazines & newspapers have already launched their digital versions at the turn of the century. However, due to the lower barrier to entry of launching a digital press company, the market has become saturated with competition. Furthermore, most of the content produced on these websites is the same passive content that has been around since the first news outlet. The younger generations that grew up with the internet are getting older, and they want different content than their baby boomer parents.

The Challenge

Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.

You and your partner will have to deliver a consistent, branded, and engaging experience and all the documentation that would allow the project to continue after your intervention as UI Designers.

User & Audience

Our first step in this design challenge was for my partner and me to pick a persona. Out of the five persona’s we could choose from, we decided to go with Paula The Painte, a 19-year-old laid-back creative. We decided to go with her because my partner and I would consider ourselves to be “Laid-Back Creatives” as well. After deciding upon the user persona, we began the project’s research phase to have a better understanding of the current landscape and our target demographic.

Research

My partner and I conducted market research on the types of websites Paula The Painter would currently use. The companies that we looked at were: Medium, Vox, BuzzFeed, Vice & Rolling Stones. After doing some secondary research, we conducted a brand comparison and a feature comparison of our competitors. We did this to identify gaps in the market, which can be seen below in the market positioning map.

A 2021 Deloitte Insight article gave us tremendous insight into the current state of digital news. The article stated, “The next wave of disruption may lie with Generation Z — Who prefers to play video games, stream music, and engage on social media, rather than just watch TV or movies.” In layman’s terms, the younger generation doesn’t just want to consume content; they want to be part of it as well. From our research and the project proposal, we were able to create our problem statement.

Problem Statement

Young, laid-back visual artists need to find a better way to discover new visual artists for inspiration, as well as marketing and selling their work. This is because they don’t have the time or the resources to do it by themselves.

Hypothesis Statement

We believe that creating a digital platform that allows young, laid-back visual artists to discover new creatives, as well as market and sell their own work will enable our users to make a name for themselves in their field. We will know if we are right if their social media following increase

“How Might We” Statements

  • HMW… help visual artists market and sell their work?
  • HMW… help users discover new visual artists?
  • HMW… make the content on the platform interactive?

Brain Storming

After finishing the discovery stage, we decided to do a brainstorming session to kick off the ideation phase. In this brainstorming process, I was reminded about my friend’s art magazine called Gross. The magazine is described as, “ a contemporary art platform focused on creative talent, cross-pollination, and ingenuity.” However, this description does not explain why Gross Mag is unique. What makes Gross special is that each featured artist has their own sticker in the magazine. This allows people to take the art they discovered in the magazine with them instead of being restricted to the page. Additionally, it fulfills a novelty factor that almost anyone would enjoy. However, this unique selling proposition only works on a printed magazine. So, I asked myself the question, “how might we implement Gross Mag’s sticker ideas but for a digital art magazine? After proposing that question to myself, I remembered hearing about the Art NFT market that was booming at the beginning of 2021. The website creativebloq.com describes NFT art as, “… a collectible digital asset, which holds value as a form of cryptocurrency and as a form of art or culture. Much like art is seen as a value-holding investment, now so are NFTs.” I thought to myself, “Art NFT’s would work perfectly for my digital art sticker idea.” My partner agreed. NFT idea fulfills the first problem. Now for the second problem: How might we help Paula the painter market her work before her art expo?

I thought about one of our competitor’s Medium. I use medium all the time because you can find a well-written article on any subject and the content is user-created. so my idea is to take the functionality of medium but strictly focus on visual art instead of everything under which is something that medium offers. However, creating an art version of Medium.com wasn’t going to cut it for this project. So I thought to myself, “what is another way I can make users feel like they are part of the action on the website that will speak to Millennials & Gen-Z?” My solution: adding something called “Reactions,” which is a feature that allows users to leave “Tik Tok” like responses to articles on the website. once we completed the brainstorming session, we moved into feature prioritization.

Moscow Method

We used the Moscow method to help us define what features we needed to have.

Once the Moscow Method exercise was complete, my partner and I were able to establish our MVP Statement. This statement consists of what needs to be offered to the users at the bare minimum.

MVP Statement

  • The goal of (Our Project), at the bare minimum, is to help artists showcase their work, sell NFTs of their work while creating an interactive and fun experience to engage the user. Therefore, we must do the following.
  • Create a modern editorial platform that will attract users and artists alike by providing them with an easy-to-use platform for artists to display their work, sell their work, and interact with artists trying to grow their followers.
  • By ensuring that these things are available, the artists will make a name for themselves by attracting fans and followers through the magazine.

User Flow

After establishing the MVP statement, I started to have a vague idea of how the website would function. Mapping out the user flow allowed me to figure out each step a user would take to the solution. The user flow gave me enough clarity to start sketching some ideas on paper.

User Flow
Example Low-Fidelity Wireframes

Site Map

After completing the user flow and feeling content with my sketches, I began developing the site map. The user flow allows you to be on the ground floor, but the site map gives you a bird’s-eye view of the subject. Having both perspectives clearly defined is critical for the project to go smoothly. My next step was to move into the medium-fidelity wireframes.

Med-Fidelity

Below is an example of a couple of medium-fidelity wireframes. These act as the “blueprints of the house that I am building.” This framework allows me to arrange interface elements that make sense and focus on the user experience instead of what it looks like. Additionally, it allows me to test quickly using guerilla testing methodology. After I did two rounds of guerrilla testing, I used Useberry to test my mid-fidelity to get better user feedback and actionable insights in order to make user-centered decisions. The five people who tested the mid-fidelity loved the concept of the website. They only had a couple of suggestions:

  • “You need to make the website unique. It just looks like every other news website.”
Medium-Fidelity Wireframes

Visual Competitive Analysis

Once we gathered the insights from the mid-fidelity testing, my partner moved into the user interface phase of the design process. First, we conducted a competitive visual analysis to make sure our UI was not the same as our competitors. I would like our competitor's typeface, colors, layouts, images, etc. I am basically creating a moldboard for our competitors to get a better understanding of the look and feel.

Visual Competitive Analysis

Brand Attributes

Now that I have a basic understanding of the look and feel of my competitors, I began to brainstorm what I wanted the editorial website to feel like. I accomplished this by listing out our desired brand attributes which can be seen below.

Brand Attributes

Mood Board

Once my partner and I agreed upon the brand attributes, I started to put a mood board together. I first started collecting images on Pinterest. Next, my partner and I went through and picked our favorite images that best communicated our vision.

Desirability Testing

In order to make sure that people are seeing what I am going for, it is crucial to do a desirability test, which is when you ask people to describe the mood board and see if they describe it the same way you do — They did! I was off to the races diving deep into UI. I first started with color.

Colors

The primary brand colors that we chose are black and white. We decided that these would be our primary colors because we want the main focus to be the art that is featured on the website; black and white will make the art “POP.” Next, we decided that our accent/semantic colors would be light red and turquoise. The reason behind this decision is we wanted to make our logo “POP” as well.

Name & Logo

The name of the digital magazine came to fruition very quickly. Irregular made me think of “different” or “unique” which is one of our brand attributes. Additionally, it is a quality many of our target users would characterize themselves as. Furthermore, the term “regular” in the restaurant industry is referred to a person that comes in all the time; something we want our users to do.

Typeface

The typeface we decided upon was Roboto. The reason behind this is because it is a very simple typeface that has friendly curves. This allows the main focus to be on the content. Also, the kerning on Roboto (the space between letters) creates an amazing reading rhythm for the user. The typeface we decided upon for our logo was Airbus.

High-Fidelity Prototype

High-Fidelity Prototype

The light at the end of the tunnel: high fidelity prototype. Moving into this step was fairly simple because I did most of the hard work during the mid-fidelity stage.

Next Steps

  • Deep research about specific features
  • Improve user flow
  • Improve NFT integration

Final Thoughts

--

--