The Democrat News Website Design

UX DESIGN

The Democrat Newspapers

The Fulton & Mason County Democrat are two newspapers that serve both Fulton and Mason counties in Illinois as the primary printed news publications for their area. Recently under new ownership, the newspapers face a unique challenge to refresh and rebrand their familiar online platform for increased aesthetic quality and usability in order to gain a new audience and subscriber base, while still pleasing its longtime subscribers who like the current web platform.

Design Goals

  1. Design a responsive e-commerce website that is aesthetic pleasing, and which easily and intuitively allows users to subscribe to the newspapers, read content, and place constraints on the number of articles a viewer can read without a subscription.
  2. Design a new, fresh logo for the company.
  3. Questions to consider:
  • How do users in Fulton and Mason counties prefer to engage with their local newspapers? (print, website, app, PDF, other?)
  • It is possible to make the Democrat Newspapers profitable primarily through reader subscriptions rather than primary through advertisement revenue.
Year
2020
DURATION
4 weeks, 20 hours per week
Tools Used
Figma,
Maze

Process Overview

      Research Goals
      Key Features
      Brand Message
      Assumptions
      Landscape Analysis
      Surveys
      Interviews
      Site Map
      Wireframes
      Brand Style Tile
      Responsive UI Design
      UI Kit
      High-Fidelity Prototype
      Usability Testing

1. Research

Research Goals

  1. Identify opportunities for refreshing the Fulton/Mason County Democrat’s branding.
  2. Identify best practices for organizing information on the Democrat’s website.
  3. Identify strategies for the newspapers to provide better user experiences and meet user needs through an online platform.
  4. Identify the demographics of customers who will be interested in the Democrat’s online platform.
  5. Understand customer pain points that could make reading or subscribing to an online newspaper difficult.
  6. Provide concrete user research on questions of business sustainability (subscriptions vs. advertising) that will aid stakeholders in gaining investors.

Key Features

  • Responsive website so that users can access it from any device (desktop, laptop, tablet, and mobile primarily).
  • Fully functional e-commerce platform for subscribing and managing a subscription.
  • Online e-readier version of current newspaper issues via website.
  • Website should be easily able to search for and filter information.

Brand Message Exercise

I initially asked the company stakeholders to identify some adjectives they would like their brand to embody. I planned to keep these in mind as I approached their wireframes and UI later on in the process: trustworthy, truthful, genuine, local, engaging, conscientious, principled, integrity, traditional, historic (in circulation since 1850).

Assumptions & Hypotheses Exercise

Objective

I met with stakeholders to uncover their assumptions for the problems, solutions, and implementation around the Democrat newspapers. These assumptions were then used to generate hypotheses that would be the focus of user research.

Stakeholder Assumptions

We assume that the primary demographic of our newspaper consists of older people of middle age and up, and that the newspaper’s current website is also primarily viewed by this demographic.

Stakeholder Hypotheses
  • We believe that readers prefer a news site geared toward readers rather than advertisers.
  • We believe that people would benefit from a more robust website and mobile reading experience, with less advertising in their faces.
  • We believe that in order for people to develop a habit worthy of subscribing to our service, we need more regular (daily or weekly) content to drive reader interest.
  • We believe we need to bring in new readers to keep the paper profitable.
  • We believe that we need to interview people who used local mobile apps and website to gain about their reading and subscribing habits and how to better target and interest those people.
My Assumptions

I assume that many small newspapers are having a difficult time staying afloat because of widespread reader apathy toward local news and because of the proliferation of free online news outlets. I likewise assume that most small newspapers currently use advertising to buoy their waning subscriber base. I assume that many people find the profusion of advertising in newspapers and news websites/apps tacky and annoying.

My Hypothesis

I believe that the Democrat Newspapers can create new interest in their platform and revitalize their subscriber base with a combination of fresh, local news coverage by skilled reporters, a more aesthetically appealing brand style for the company, more mobile options for accessing news articles, a more user-friendly user interface for subscribing and managing accounts for subscribers.

Landscape Analysis

Making a detailed landscape analysis of the differences and similarities between the Democrat newspapers and its online competitors, including national and international benchmarks of excellence, will help identify opportunities for the Democrat to differentiate itself in the market. This analysis will also help identify other areas where changes and improvements can be made.

Landscape Analysis Takeaways

Large and small publications suffer from diminishing print readership, forcing publications to get creative about their distribution. Many publications have been required to lessen the frequency of their output, or to add a bewildering amount of advertising to their online and print spaces in order to stay afloat.

Engaging in social media, as well producing audio and video in addition to traditional content, enable many publications to widen their engagement. It seems crucial that a small newspaper take steps to engage with readers on these current forums, as well as to provide multiple options for reading news stories. Larger publications like the Atlantic and the New York Times excel at this multimedia approach, but smaller publications like Peoria's WCBU are also making admirable strides to engage in this way.

Online platforms like the Daily Yonder and WCBU (their written-news website, aside from their radio presence) are excellent benchmarks to consider in relation to the Democrat. These publications keep overhead low with no print component, existing primarily on their website and other social media outlets.

An excess of advertising is deleterious to the user experience of publications like the Peoria Journal Star and Bureau County Republican. Whenever possible, the Democrat should endeavor to remove needless ads or relegate them all to some unobtrusive place on the website.

Surveys

I created a series of questions with my stakeholders based on my research goals, and posted the questions as a survey on Google forms. I then requested on Facebook, Instagram, and LinkedIn for friends and followers to take the survey. The survey was posted for 3 days, (August 25, 2020 - August 28, 2020) and had 23 respondents.

For the fill-in-the-blank answers to survey questions, I include my own summaries of the most interesting and relevant answers. Otherwise, I have included charts generated via Google for multiple-choice answers.

What news organizations are your sources of local news?

Answers primarily listed small publications from Illinois and other Midwestern states.

If yes (to being a subscriber), what drove you to subscribe to this news source?

Answers cited the quality of content and the urge to support local news as primary motivators.

If you are a subscriber to a publication, what can you remember about the process of subscribing? Was it easy or difficult?

All answers noted that the process is generally easy.

If you read local news but arent a subscriber, what stopped you from subscribing?

Answers cited the decreasing quality of local journalism, along with the wide availability of free local news sources.

If yes (to reading an online news source), what improvements could you recommend for the user interface and visual branding of this source?

Answers generally gravitated around the following recommendations:

  • Less paywalls and ad space. More emphasis on content and delivery.
  • No pop-up ads, full-screen ads, or auto-play on videos.
  • Focus on the readability and presentation of articles.
  • Disable article comments!
  • An option to subscribe for no ads.
  • Less affiliate articles.
  • Better/clearer categorical structures to help find articles user care about.
What feature of a local news website is most important to you?

Answers generally gravitated around the following recommendations:

  • Ease of navigation and clear presentation of content.
  • Breaking News.
  • Coverage of local issues.
  • In major cities, the ability to see news categorized by neighborhood.
  • Clearly grouping interest topics into sections, and keeping the latest articles on the main page.
  • The ability to share articles easily.
  • Less ads.
  • Strong search functionality.
  • Weather.
  • Unbiased information that is written well.
  • Event calendars.
What feature is least important to you?

Answers generally gravitated around the following recommendations:

  • Comments.
  • Clickbait ads.
  • Local sports coverage.
  • Editorials.
  • Weather.
  • Video.
  • AP wire headlines.
  • Classifieds.
Key Takeaways
  • Most people in this study consume news on websites via their phones. 
  • Most people in the study don’t subscribe to local news, but value it highly and consume it daily. 
  • $5/month seems to be consistent choice for a local news digital subscription price that feels rights. 
  • Many users prefer less clutter on news website homepages, less overall text, and clearer category structures. 
  • Users prefer less ads or appropriately placed ads that don’t compete with content. 
  • Common most important features: ease of navigation, quality content, good readability, clear groupings of content 
  • Common least important features: Sports and videos

Interviews

Conducting interviews with a large cross-section of newspaper customers (local and possibly non-local) will help us better understand how most people prefer to consume news through what medium they most often prefer to access a newspaper.

Interview Details

I put out a request on social media for local news readers who would be willing to be interviewed about their experiences engaging with local news. I found 4 participants (2 women and 2 men, between the ages of 30 and 65), who I interviewed via Zoom and FaceTime.

Overall Patterns Between Participants

All of my participants value local news somewhat, but most don’t find it worthwhile enough to pay for unless it provides quality content in a pleasing online format at a competitive price point.

Better search functionality on news websites was a common need mentioned, as well as the desire for ads to not interfere with news content in any way. Interviewees also felt that content should be provided in various formats aside from traditional print formats, which would draw more diverse clientele to engage with the news publication.

All interviewees likewise expressed a desire that information be presented in current, visually engaging graphic and website design styles. Most feel that many local news sites are cluttered, with too much information presented in a small space.

2. Information Architecture

Site Map

This maps out all the features and categories that the Democrat website should offer (through consultation with the stakeholders) in a basic attempt at site hierarchy and organization. The stakeholders and I particularly strived to eliminate pointless categories that so often clutter a news website, and also to include navigation space for online editions of the newspaper.

3. Interaction Design

Wireframes

Following are the responsive wireframes for the Democrat homepage that I created as an early attempt to develop content and establish placement of the content hierarchy throughout the homepage. I used the Atlantic's website as a main benchmark for my design, feeling that their website design represents a strong melding of traditional and modern design aesthetics, with classic typography, expressive photojournalistic photography and visual design, and clean, uncluttered page organization.

Through the study of my landscape analysis benchmarks (particularly the Atlantic, Tablet, and WCBU), I hit upon a dropdown navigation design that includes the primary news categories, but would also provide easy access to the online version of the day's newspapers, plus access to a Democrat podcast that the stakeholders discussed as an early addition to print content.

The following screens are the responsive desktop, tablet, and mobile versions of the Democrat homepage, including the navigation header and the expandable footer (inspired by the Atlantic and New York Times mobile versions).

The next two screens are preliminary designs for a news section page and a page for a specific article. I was inspired particularly by the minimalist way the websites of the Atlantic and the New Yorker organize and display their content.

My subscription pages (below) were inspired to some extent by the New Yorker's online subscription user flow and UI. In discussion with the stakeholders, I hit upon three tiers of subscriptions, shown in the first screen. I researched the subscription screens for other major news publications for insights on log-in and payment screen pattern trends.

The account screen (below) was inspired by those on the New York Times, New Yorker, and Atlantic websites. I endeavored to remove all unnecessary features from the page and continue the minimal and classic style I feel I have established with the earlier pages.

4. UI Design

Brand Style Tile

I styled the initial viewport space of the homepage in five distinct versions as an early exploration toward a visual style for the Democrat brand.

For each, I tried to present a distinct color palette and set of typography. The colors were influenced by the palettes of current news website, as well as UI designs I found during inspiration gathering on Dribbble and Pinterest. I focused on typography that I felt embodied a timeless, literary quality.

The stakeholders immediately gravitated toward Version 2 as the basis for the UI design.

Responsive UI Design

Among the many challenges involved in building the website was that of creating headline copy and finding stock photography for all of the front-page articles except for the front-and-center headline and photo, which was provided by one of the stakeholders.

Another challenge was that of creating an arrange of modular article shapes that would fit together in a pleasing way, but would also provide the stakeholders with the appropriate number of articles for their coverage.

Notably absent from these following UI prototypes is a designated location for ad space to exist. Unfortunately, the time limit set for this project did not allow me to consider this aspect of the project, but I would like to explore this in a further iteration.

Following are my responsive versions of the homepage for desktop, tablet, and mobile versions.

Next (below) are my UI prototype screens. They did not change much from wireframe to UI aside from the addition of the UI elements and a subtle reworking of some text hierarchy.

UI Kit

I put together all the design elements I developed for the Democrat visual system into a UI kit, including the color palette, typography, icons, along with buttons, navigation bars, and progress bars in their various states.

5. Iteration

High-Fidelity Prototype

View Prototype

Usability Testing

Test Details

I coordinated a remote usability test of my UI prototype via Maze, with the following test goals:

  • Assessing whether components are well placed to promote easy task completion and site navigation.
  • Assess how easily the user can access an article on the news website.
  • Assess how easily the user can sign into their account.
  • Assess how easily the user can subscribe to the news website.

I used social media to recruit 8 participants, between the ages of 21 and 65.

Participant Task Flow
  • Access the “First days back” article
  • Subscribe to the Democrat
  • Sign in to your account
Possible Design Changes to Consider
  • One user mentioned that they would like a toggling feature that allowed the user to choose what sections and articles they are shown. I could add a screen that allowed the user to toggle these options.  
  • One user mentioned that they couldn’t detect and hierarchy in the homepage aside from the size of stories to inform where they were supposed to look. I’m not sure if this is a valid concern, as there is a good deal of type hierarchy along with image size hierarchy and page placement to lead the user to focus on the top stories on the page.
  • Two users said that they felt it redundant that one has to click desired subscription plan and then click the “Next” button to advance to the next screen. They argued that the “Next” button should be eliminated in this case.
  • It would be worth designing a plan in the website UI for exactly where the Democrat should include advertisements, so that they remain unobtrusive, but still meet the demands of advertisers. The scope of the project did not allow me time to fully pursue this aspect of the design, but it would certainly be worth the undertaking.

Next Steps

1. Prototype adjustments

I will adjust various aspects of the prototype based on user feedback from my usability testing.

2. Extra Features

I would like to explore other multimedia feature integrations to the website, as my research indicated that these, when well executed can add immense value to a new publication's web presence.

Additionally, the question of whether it is feasible to make the Democrat newspapers profitable through member subscriptions instead of ad revenue required more time than was availble for the scope of my project. It would be interesting to approach this line of inquiry as a means for further improving the website prototype.

Finally, I would like to add sections for advertisement space on each responsive page.

3. Testing

I will pursue more usability testing on the updated and enhanced features of the prototype, as well as on the effectiveness of the added advertisement space.

...

Latest works

Back to Top