The Town Common Media
The Town Common Newspaper’s design and sales team knew it was time for a website refresh; their current website had usability, organization and functionality issues, causing problems for readers and staff. The challenge and goal for this project was to redesign the website from the ground up.
How did we actually make this decision? Read my analysis of decision making in the link below:
Throughout this project, I drove our design process and ensured it was as user-centered as possible. This was a complex project and the research & testing took more than half the time; here’s a very high-level overview of what our process looked like.
Meet with readers, local businesses, journalists, photographers, sales people.
Personas, requirements, user stories.
Design sprints (sketch, prototype), detailed user stories, design system.
Usability testing, venting with readers, businesses.
Analytics & site survey review, usability testing
Before we got into the redesign, my team and I wanted to get a handle on trends and problems with the current website. I did an early sub-project that involved the following:
Interviews & baseline usability testing: I did quick ‘guerrilla’ interviews with readers during local events or at church, along with semi-structured interviews and usability testing; 15 people in all. The goal was to understand more about why people use the newspaper’s website, how easy is for them to find new/old articles and to discover additional usability issues.
Analyzing open-ended results from a recent survey about the website. This was a great way to get feedback from the users and empathize with them.
Analyzing website analytics- this happened after publishing the website to test usability issues. Prior to the redesign, there was only an online pdf version of the site providing no ways to collect data.
I assembled a report with key insights and recommendations according to difficulty level of usability.
- To read new articles
- To zoom in and out of pictures
- To see the ads
- To click on links and redirect back to the site
- To scroll (in the pdf version)
- To read small fonts in the classified ads (not accessible)
- To find old articles
- To save content to read later
- To share with others
- To read in all platforms (not responsive)
Screenshot of the join the conversation section of Daily News based in Newburyport, Ma. In blue highlighted follow, share this button, and the discussion section.
Screenshot of the event page of Daily News based in Newburyport, Ma. In red shown Google ads and event calendar example.
Competitive analysis & inspiration gathering
Conducted a research of other local newspapers such as The Newburyport News and Daily Item in Lynn. Kept notes and made a list of what the team liked from these websites and what we didn’t.
- Hierarchy of stories – the most important and recent news takes the biggest space with the largest title and picture.
- Search button, share option, save button.
- Join the conversation with other readers – a way to bring the community closer (must create an account for this).
- Event Calendar.
- Google Ads – too much noise, distractions, sometimes inappropriate.
- Long pages – endless scrolling.
- A full body text instead of paragraphs.
- Too many colors, fonts etc. – consistency is key throughout the site.
Feature & content requirements
I kept a running list of requirements, thoughts, and ideas as our project progressed. Here are a few features from the list:
- Responsive design
- Advertisement space – customizable
- Conversation space – account needed
- Integration with social media
- Search/Share/Save buttons
- CTA buttons – Subscribe/Advertise
- Easy to navigate & find old articles
- Current event calendar
- A breaking news section – only when needed
Early on in this process, our team needed to totally rethink the website’s information architecture. Having audited our content and gathered inspiration from other successful websites, we went through a few exercises.
Open card sorting
Using a representative sampling of website topics, me and my team members organized them into categories and named them.
Closed card sorting
I wrote every page title from our website, as well as category headings, and our team physically grouped the pages to see whether they all had a home. We were surprised by how well most of the content fit.
Finally, we took that same closed card sorting exercise to the group of journalists, readers and the founder of the newspaper and got valuable additional feedback.
Our team also had to spend a lot of time thinking about different content types; I mapped out a diagram of our content types and how they related to one another. This helped us start to plan and account for interface requirements.
Missing social media because at the time the newspaper did not have any social media accounts.
Using data collected throughout the project, I put together a set of 4 illustrated personas to represent some of our key users’ needs, goals, and state of mind.
According to the book Design for Real Life it is important to take into account the ‘stress case’ (or worst case scenario) that users may encounter. For our stress case, we created Ibrahim, coming from Morocco with limited language skills he is trying to adjust to the new lifestyle and be part of the community.
These personas followed us on every Zoom or in person meeting. Our personas were very central to this project and were an important part of staying focused on our users’ needs.
User journey flow maps
Using our personas, I put together flow maps to illustrate how users could accomplish common tasks. Here’s an excerpt:
Article page example – showing hamburger bar menu and recent news section.
Test, Feedback, Reflect, Repeat
Since the deadline and the budget were very tight, we collaborated with journalists, the founder of the newspaper and users – our own relatives without sharing any insights. We designed part of the navigation and asked them to complete tasks. It was mind-blowing how many things we did right and wrong.
For example, 6 out of 10 readers preferred Recent News section at the bottom of the article where they would find other topics to continue reading rather than at the top right side of the article. We eventually decided to put it in both places.
Another helpful insight was the navigation bar. When a user clicks to read an article, the navigation bar changes to a hamburger icon. Although, it was familiar for a designer and developer to recognize its function, 9/10 users did not know what it was about. So, we wrote the name menu next to it.
Team meeting facilitation
Our meetings took place in a candle shop, half of the space of which was covered with newspapers piles, computers, table and chairs. I care about making meetings useful. I spent time each week planning activities to ensure our team got what we needed to out of each meeting, while also making sure each team member had a voice – and that we all had fun. Lots of essential oil smells were part of the process.
Stakeholder meetings & presentations
Right from the beginning of this project, we held meetings to get input from key stakeholders. We presented to the newspaper management team multiple times, conducted content meetings with the journalists, photographers and loyal readers; we also held feedback sessions with many other departments.
These meetings were vital to the success of the site and helped us bring stakeholders along through the process.
Sketching, prototyping, design system planning
All the research and testing took us half of the time of the project. Eventhough we were in a tight deadline, by doing all these steps we trusted the process and felt more confident.
With one and half week left, I was in charge to design the interface of each page but specifically details such as what would happen if a user were to click the + icons in the community news page – how the page would look like. Or also, what size the ads needed to be on in order to maximize the white space. This way when I collaborated with the developer he understood what different design elements meant.
I designed the website in Sketch and then send the developer the files in a shared group Sketch folder.
Key elements I kept in mind while doing the design of this website:
- Consistency matters – followed branding id guidelines throughout the website.
- Easy to navigate designs – I read the book Don’t Make Me Think during this project and was struck by the importance of simple explanatory designs – naming the navigation bar menu made a big difference in the readers experience.
- Hirerachy is IMPORTANT! -(upper case cause thats how I had written it on my notes.) I sketched out and designed the homepage putting pieces together like a puzzle. The main story needed a big space, then there were secondary articles on the left upper corner where the eye of the reader goes secondly after seeing the main story.
- Positioned the ads to the right side of the page consistenly throughout the site user is used to finding them in one place rather than popping up in different directions while reading.
- Designed responsive designs – how would it look in phone screens and iPads. A lot of the readers preferred reading on different platforms.
- As accessible as possible – helped the developer turn the site into an accessible site for all readers by Include alt-text for content, use proper headings and HTML tags, name/describe the images as best as we could etc.
We published the website in April of 2021 within 4 weeks of the deadline. After publishing it, we encouraged everyone to give us all the feedback they could and we got back to the site and made changes accordingly. The community was very happy and grateful. Getting such wonderful feedback, my team and I felt grateful to have made this possible!
Thank you for building such a beautiful news website. It is clean, easy to read, and navigate. You are making such a difference for our little community news outlet.
Author at TCM
Outcome of the newspaper website redesign
- Site reached over 1M viewers in the first year.
- Increased by 25% in readers in the first month and 500 new subscribers.
- User testing showed a strong preference for layout and content display.
- Positive reaction from users and improved traffic to all site areas..
- Increased revenue by 2.3% translating in $15K revenue gain per year through local business advertising.
- Around 48 new journalists, photographers, reporters applied for a job position to join the team.