UX/UI design & development

Newsroom

Designing a newsroom that enables users to get important Cybersecurity news and updates in a centralized place.

My Role

UX Designer
UI Designer
Developer

Tools

Sketch

Figma

Html / CSS / C# / .NET

Details

August 2023
Cross-Functional Project
Live Version

Impact

+2,700 page views per quarter, decreased bounce rate by 15%

Where's the news?

Rapid7 relies on their press releases and research to maintain / gain credibility, keep people updated on relevant cybersecurity information, and to entice prospective customers to learn more about Rapid7's involvement in the cybersecurity world. This information lived on a landing page (consisting of just four small tiles) that was impossible to find - the only way to get to the page was through a sub-item on the footer. Once you finally found the page, you had to continuously click in / out of the tiles to view related pages. Site visitors were frustrated, and were spend too much time trying to find the important information they needed.

Mapping out the Solution

This project was brought to me by the CCO. While it was clear to me that this section of our website needed some TLC, I wanted to better understand the business need of this project and align on expectations with the broader communications team. I met with stakeholders to go through the following: What is the problem, from your perspective? Who is this for? What do you hope to solve with this solution? Where on the website will this live?

We identified project requirements from a business and CFX team perspective and established project goals of the project.

Requirement 1: Up to date news section

Requirement 2: Fast facts about the company

Requirement 3: News-related contacts and their information

Requirement 4: Easy way for the communications team to update information themselves

Goals:
1. Create a centralized place for news and related information that site viewers can find quickly
2. Increase press release accessibility

What Makes a Newsroom Effective?

I conducted preliminary research on digital newsrooms and completed a comparative analysis, with a goal of learning what factors contribute to an effective, enjoyable newsroom.

Specifics concepts that I found in each examples included breaking up content, brief descriptions on content with clear CTA's, a top news section, and adding credentials whenever applicable. The broader themes of success that I noted included providing clear and engaging ways of viewing content, easy navigation, continuity across the page, and visual distinction for content. Identifying these consistencies led me to a great starting point for my design ideation phase.

Structuring the Newsroom

With my comparative analysis and project requirements in mind, I created low-fidelity wireframes and prototypes to test out different ideas. The prototyping was minimal, since most sections linked to pre-existing pages. If I could go back, I would have created a more extensive flow to get better understanding of the holistic experience.

I connected with the Senior UX Web Designer to receive feedback on each iteration, making changes until the wireframe felt like it met our goals. I created two versions of the final low-fidelity wireframe: one without content, and one with content to map out which areas would require new block components and which areas could use older block components that we could improve.

(Almost) Completed Newsroom

With the final design established, I created a high-fidelity mockup and developed the page using HTML, CSS, C# and .NET. To maintain a consistent navigation experience for the user, we kept the page's URL structure the same, and as a result we were able to use GA to measure KPIs such as bounce rate and page views to determine the success of our solutions.

The impact: the newsroom had +2,700 page views per quarter and had a decreased bounce rate of 15% compared to the prior news landing page.

Completed, Refreshed Newsroom

The design above was on the site for ~1 year, until the team took on a larger initiative to refresh the Rapid7 website and branding. To maintain a consistent brand experience for the user, I updated the newsroom's color palette, fonts, and structure to align with our new design system. Explore the live version here!

The Future of the Newsroom

The positive feedback from site visitors and data in GA supports the idea that site visitors find value in having a centralized place with up-to-date news communication and company information. I sadly left the company before next steps, but if I hadn't, I would have loved to interview site visitors to determine areas of refinement. This project stemmed from internal needs, and I'd love to hear from site visitors directly to determine if their needs are being met and/or if they've changed with this new experience.