Industry
GovTech
Company
CivicPlus
Redesigning CivicPlus News Module (Shipped)
Project Overview
According to CivicPlus's survey, over 80% of citizens prefer online information, including policy updates, health alerts, local events, and more. However, the Old News Module can get crowded with old news, making searches difficult. The Featured Section and Categorized Search section makes it easier for people to find relevant information quickly, thereby reducing the number of inquiry calls to the civic body.
As a UX designer, I collaborated with two senior designers and the product owner of what is now known as Municipal Websites Central. I was recognized in a company-wide meeting for introducing the featured section in the news module.
The Problem
The Old News Module system can get cluttered with outdated news, making it difficult to find information that a citizen might be looking for.
Important updates from the city often get mixed up with regular news. This makes it harder to spot these key announcements among all the usual news.
Goals
User: Navigate easily to desired information and highlight important announcements from the civic body on the home page.
Business: Increase engagement on the news page for better communication with citizens.
Product: Maintain our current design standards while implementing new features.
The main goal of this project is to increase engagement on the news page to relay important information quickly and easily and improve communications with the citizens, while simultaneously maintaining our current design standards as we implement these new features.
Design Process
In our sprint retrospective, a key part of our agile approach, we split tasks into three parts: research, insights, and wire-framing. The research part was about collecting information important for our project. The insights part was about understanding this information to get useful knowledge for our project. The wire-framing part was about improving the basic design of our user interface.
Research:
Our assignment, based on the tickets provided, was to conduct a competitive analysis of how certain news sections were segmented for improved engagement.
We kicked off a design sprint together with the Lead Designer. Using Miro as a remote collaboration tool, we gathered inspiration from how other forward-thinking brands craft their landing page and shared what we like about them.
Insights:
Our competitive analysis confirmed what we assumed: a featured news section was crucial for highlighting important information. I suggested this idea to ensure that users can easily find critical updates and stay informed. For users to search, we started working on having search categories. After, receiving feedback from the clients from our initial idea run, we also added a feature where users have the option to add their category for their community since we were improving the news module and every community can have the category they wanted to add.
Wire-framing:
Using insights from our research and analysis, we began the process of wire-framing. The aim was to redesign the News Module to improve user engagement and information searchability. We incorporated the concept of a Featured Section, which would specifically highlight important news, ensuring it doesn't get lost in the general news feed.
Wire-Framing 2.0:
After presenting the initial wireframe in the company-wide meeting, the featured section got the green light, but they requested additional prototypes, such as the search page and news without images. They also wanted to see mobile wireframes for the same features. So we conducted another round of competition analysis and based on their strengths made more wireframes.
Results
This update was a change to the news module on the Municipal Websites Central (Web Central) product which positively impacted 5000+ websites, boosting the site traffic.
Introduction of the featured news section:
This section displays the most important news that might be crucial for most of the citizens to see. We explored various ideas for highlighting the most important information at the top of the page. After gathering votes and conducting tests, we chose to include a slider feature to showcase multiple featured news stories.
These featured news cards are designed differently from regular news cards and are placed prominently at the top of the news page to immediately capture the user's attention with the most important updates.
Categorized search section:
We organized news into different categories to help users find information more easily. Since the left side of the news page was already being used for other purposes by our clients, we placed the category section on the right side.
The category section includes common categories like "Latest News," "Featured," and "Local." Additionally, clients can choose from pre-made categories, and they also have the option to create their own.