Fair Observer
Fair Observer Site Revamp
The Problem
Increasing revenue for a media website can be a tricky thing to accomplish. With so many sources competing for readers’ dollars, you need a site that stands out and asserts its unique selling point from the first load of the home page. Fair Observer is a non-profit publishing/news site that features over 2,500 contributors from over 90 countries. Many things you read there, you won’t find on the typical American media website, as their scope is uniquely global. They were having trouble increasing paid subscribers, getting donations, getting people to subscribe to their e-mail newsletters, and, as we discovered, getting people to understand what the site is all about in general.
The Solution
We were tasked with redesigning their site in a way that clearly communicates to the user what the site is, why it’s unique, and how people should support them.
The Team
John Brookhouse - UX Designer
Bo Young Lee - UX Designer
Samantha Wilder - UX Designer
Atul Singh - CEO of Fair Observer
Lokendra Singh - Web Developer - Fair Observer
My Role
My role within the team was to conduct secondary research, competitor analysis, interview existing users, conduct usability tests with random participants, and redesign a homepage solution that would clearly inform readers about the site’s mission statement.
Discovery
The original Fair Observer front page.
In order to understand the problem a little more, we conducted research to learn about how others have increased subscriptions, encouraged more donations, and upped their e-mail newsletter subscriptions. This was accomplished through competitor analysis and general research about best practices. We followed up with primary research on the current design, in which we interviewed existing users of the site and conducted usability tests with random subjects on the existing site.
We examined their google analytics before starting the tougher research and found that the average session time was 1 minute and 77% of people dropped off after the first page. Now the hard part is to figure out WHY people aren’t digging deeper into the site and staying longer.
Competitor Analysis
When discussing the existing design of the site with the web developer, he explained that they used sites like Substack, The Guardian, and The Washington Post as benchmarks when designing the site, so naturally I chose to evaluate those sites for how they:
Recruit Subscribers
Collect e-mail subscribers
Solicit Donations (not always applicable on competitor sites)
Recruiting Subscribers
All 3 websites featured much more aggressive subscription promotions. Either featuring pop-ups before or after reading or a very prominent and colorful button that was visible at all times. Substack is probably the most aggressive, prompting you to subscribe before you even get to an article, but somehow their simple “subscribe” button everywhere you look doesn’t seem overbearing. In addition, they have another nudge with a “ready for more?” prompt to subscribe.
The Guardian site has a very visible subscribe button at the top of the home page.
Substack’s minimal subscription prompts.
The Washington post has a subscribe button with the price always visible in the header nav bar.
Collecting E-Mail subscriptions
Depending on the business model and importance of their e-mail newsletter, some sites push this more than others. Substack, by nature of the way the site works, they try to push paid subscriptions, but you can get free versions of the newsletters as well via the same button! Guardian handled their e-mail signup promotions with a more muted call to action at the bottom of pages. The washington post’s email newsletter signup is always in view with a persistent, yet somehow clean and not in the way bar on the bottom.
Substack hits you with an email sign up before you can get to the content.
Guardian’s low-key e-mail sign up.
Washington Post’s persistent, yet minimal e-mail sign-up.
Collecting Donations
The Guardian was the only site of the 3 that featured a donation button, and it was visible from the get go at the very top of the page, but pushed slightly less than the subscriptions. It’s worth noting that they also have a detailed explanation of why you should donate and how your donation helps.
The Guardian’s donation pop-up.
Note the clear explanation of benefits.
Secondary Research
After assessing what the competition was up to, I did some research on best practices and tips for increasing subscriptions, collecting e-mail subscriptions, and upping donations.
My research led me to believe that for all of these action items, a few principles hold steady for all of the things we want to improve on this site:
A well-placed and designed CTA/Button is crucial.
A clear explanation of value goes a long way
Simplicity is key.
Primary Research
User Interviews
Here are some of the things they said:
“I appreciate the international aspect of the site, and the different viewpoint from american new outlets”
“Maybe if they curated the international news in a more friendly way?”
“When I shrink the window, some buttons actually disappear!”
“I like how there is always something I would read”
“ All of their Calls to Action are very muted”
Atul provided us access to 4 users of the current site and we met with them via zoom to pick their brains about how they use the site and what they thought of it. Most of the users appreciated the site’s global perspective. They loved the fact that they can read about topics they can’t find much on in mainstream American news sites, but they found the site a little difficult to navigate. Some of the users paid for premium content but didn’t necessarily know what they were paying for, other than to support the site.
It was clear that the site was a little difficult to navigate for existing users. One user said that they simply use the search function to find things because they didn’t know how to find topics and articles that they are interested in by using the navigation.
Also of note, some users reported that the images used for the articles don’t do a lot to support the excellent writing. They felt it was a little “stock image” feeling, and could benefit from a more illustrative approach, as many news sites use for analysis pieces or op-eds.
Affinity map of our user research (via Samantha Wilder).
Usability Testing
To get an outsider perspective on how the site was performing in its current state, we conducted 6 usability tests with random users. We had them run through the basic tasks of our redesign. These tests provided us with valuable insight as to where we could make significant improvements.
The biggest and most important problem we uncovered in our usability testing was that users didn’t know what the site was all about when they loaded the homepage. It was not obvious to them that the site was non-profit, what the angle of the journalism was, or that the site was centered around submissions from all over the world.
“I wish it branded itself better on the front page”
Navigating back to the home page proved to be difficult for most users when they were deeper into the site, as the logo disappeared from the top of the page and there was no clear “home button” to be found. This can frustrate users and lead to people leaving the site. It also means that users are not reminded of what site they are on at all times, something that the Washington Post does exceptionally well.
When asked to complete specific tasks, users often took a roundabout way to find the buttons. For example, most users when asked to locate the “donate” page, went to the hamburger menu, then to the about page to find it. Similarly one user just used the links in the ads to find the “subscribe” page.
Users also had a hard time describing the benefits of signing up for an e-mail list, subscribing, or donating. It was clear that the benefits could be more clearly explained to users.
Many users felt like they didn’t know what kind of news site this was, due to the lack of “branding” on the home page.
When users scroll down, there is no logo visible anywhere or a “home button,” so many users had a hard time navigating back to the homepage.
Synthesizing the Research
With the stockpile of information we learned from both the primary and secondary research, we discussed possible ways forward for our design portion of the project. While we could change many aspects of the site, we needed to have a limited scope in order to create designs within the small window of time. It was clear we needed to:
Improve the branding on the home page to assert the unique content on first load
Make the calls to action much more visible
Always have the logo visible in the header
Clearly explain the benefits of signing up for e-mails, subscribing, and donating
Put the sections into the hamburger menu beyond the front page
Put donate, subscribe, and home into the hamburger menu, as people gravitated to that as a way to find things
After discussing the results of our research and suggesting what we needed to do, the CEO and Developer were on board with the changes we needed to tackle with our design.
Design
Our team of 3 designers decided to split up the designs into 3 parts so we could each tackle one of the problems. I decided to take on the home page, but we all worked together to figure out which things were most important to update. In looking at their existing design, we decided that adding a tagline to the logo, introducing an eye-catching button for subscribe (or donate), and coming up with a way to move the logo into the persistent top navigation bar were the most important.
Our research proved that the tagline was especially crucial to establish an instant identity to anyone visiting the site. We discovered a line in their “about” page that we condensed down to “Informing global citizens of today and tomorrow.”
First-round of designs
I made a couple of sketches to get my plan in order before jumping into Sketch to create the designs. Since we were short on time and we had a limited amount of screens to produce, we essentially went straight into high-resolution mockups, since color and a clear representation of our ideas was important to show our client.
From this, I was able to make an initial mock-up that was essentially a recreation of the home page with our new features implemented. The current site has thumbnail images for each story in the carousel (which don’t scale very well when you change window size.) Since we found that people generally don’t value the images as much as the content of the stories, I opted to change this to the common “dots” indicator of which story you are on in the feature carousel.
Another thing I wanted to improve was the quality of the logo. It was clear that they were using a lower resolution png as a logo, so I made a vector svg of the logo that will look great on all versions of the site.
Quick sketch of proposed solution.
First pass at a homepage redesign.
Second Round of Designs
After my first pass, something we had discussed was that having the logo lay over a photo at all times wasn’t always visually appealing or clear, so we opted to have it sit on a white background. We also decided that the word “Sections” was not necessary and would look cleaner without it. We also removed the “Sign Up” (and e-mail icon) to clean up the space, opting to prompt people to sign up with a pop up in articles.
Since it was clear that the imagery for the articles was not as important to people, cutting into the feature story carousel with a larger header was not the worst design decision.
I also created the version of the header nav where the sections move into the hamburger menu (testing showed that that is where people look for things anyway), and the logo moves into the top and serves to remind people what site they are on at all times and also as a “home” button.
Revised home page layout.
Simplified layout with logo in header navigation bar for when users scroll down or are on interior pages.
Prototyping
After Samantha and Bo, the other two designers on the team, created main article page, e-mail newsletter signup, subscription page and donation pages, and we combined each of our individual contributions into one prototype to present to our client. Normally, we would create and test a prototype with users and iterate our design, but time constraints on the project prevented us from doing that. Samantha assembled a quick prototype to present, and as a team, we walked Atul and Lokendra through each of our design decisions and the reasoning behind them.
Summary
Our final designs were extremely well received. Fair Observer is a small team that they knows they can improve their product, so, in a way that made our job a little easier overall. The client stated that they are in beta testing for their paid subscriptions so they may opt to make the blue button a “donate” button in the meantime, but they will definitely implement that into their designs. There were many changes and tweaks we could make to the design and hierarchy of their site, but as they stated that paid subscriptions, donations, and collecting e-mail subscriptions was their main concern, we opted to work on those for our MVP. We spent a lot of time waiting for users and setting up interviews, so given more time to design and test, we would have discovered many other things about what we could change to make it easier for users. But, all told, I believe this was successful because through research and talking to users, we were able to really pinpoint the problems and design solutions that would ultimately help the client.
