Web Stories CMS

Project Background

The client, a leading digital news outlet, had been using an external platform to publish Web Stories, but it was transitioning from a free to a paid service. Given the new costs, the technology team decided it was time to develop an in-house platform. This custom platform would not only eliminate the need for the external service but also address issues identified in user research, such as the time it took to create Web Stories, system slowdowns, and design inconsistencies.
The existing content management system (CMS) was not equipped to support this format, necessitating the development of a specialized web app. The goal was to create an intuitive tool that would allow journalists and content creators to easily produce and publish Web Stories directly to the news site.
To address these challenges, we developed a new web app specifically for creating Web Stories. This app was designed to be user-friendly, with templates aligned with the brand and real-time previews. The project included user research, UX/UI design, and full-stack development to ensure a smooth and efficient workflow for content creators.

My Roles & Responsibilities

As the UX/UI Designer for this project, I was responsible for the entire design and development process, including:

• User Research & Personas: Conducted interviews and usability tests with journalists and editors to identify pain points and requirements.
• UX/UI Design: Developed wireframes, prototypes, and high-fidelity designs, focusing on ease of use and seamless integration with existing workflows.
• Development Collaboration: Worked closely with the development team to study the implementation of the design using modern web technologies like React.js and Node.js, ensuring the web app was scalable and maintainable.

Deliverables

• [✔] User Research & Insights
• [✔] UX Process Documentation
• [✔] Style Guide & Design System
• [✔] Wireframe and High-Fidelity Prototype

The Key Problem

The client’s existing platform for creating Web Stories was about to transition from a free service to a paid one, prompting the need for a custom solution. The external platform, while functional, had its limitations, including slow content creation, system lag, and design inconsistencies identified in user research. The need for an in-house platform arose to address these issues and eliminate reliance on a third-party service.
The new platform was designed to streamline the process of creating Web Stories, making it more efficient and user-friendly. This enhancement was crucial for the news outlet to continue producing engaging, mobile-first content quickly, keeping up with the demands of modern digital consumers.
Why we chose to address this problem: The client recognized the growing importance of mobile-optimized content and the need to stay competitive by adopting new content formats that cater to modern news consumers.

The Solution

UX Research

We conducted comprehensive research to understand the workflows and needs of journalists and content creators. This involved user interviews, surveys, and competitive analysis. The research revealed that users needed a tool that was easy to use, offered creative flexibility, and integrated smoothly with the existing CMS.

We developed personas and user journeys to guide the design process, ensuring that the web app would meet the specific needs of its users. Key findings highlighted the need for real-time collaboration features, customizable templates, and intuitive content editing tools.

Blueprint, wireframes and high fidelity prototype

The project started with the creation of a detailed blueprint that outlined the app’s architecture and user flows. Wireframes were then developed to visualize the layout and functionality, followed by high-fidelity prototypes that allowed for initial user testing and iteration.

Key Features

Basic Features

• Sign-up: New users can easily create an account through a streamlined sign-up process. The sign-up form captures essential information and ensures a secure registration, allowing users to access the platform’s full range of features upon verification.
• Dashboard: The dashboard serves as the central hub for users, providing an overview of their activity, recent Web Stories, and quick access to key features. It’s designed for ease of use, displaying important metrics and content management tools at a glance.
• Webstories List: The Webstories List feature allows users to view all their published and draft Web Stories in one place. It offers filtering and sorting options to quickly find specific stories, as well as tools to edit, delete, or publish them directly from the list. This feature is designed to streamline content management and improve workflow efficiency.

Interactive Story Builder

• The Interactive Story Builder was the core feature of the app, designed to offer a seamless content creation experience. It provided users with a range of interactive elements, such as polls and quizzes, which could be easily added to any story. The Story Builder also supported multimedia content, allowing users to add images and videos into their stories. This made it possible to create rich, engaging narratives that could capture the attention of readers in a way that traditional articles could not.
• Template Library: A collection of customizable templates designed to speed up the content creation process.

Real-Time Preview

• This feature allows users to see how their Web Story will look on mobile devices as they build it. The platform also validates the Web Story before publication, ensuring it meets all necessary requirements. Additionally, users can add and optimize elements for SEO directly within the platform, improving the discoverability of their stories in search engines.

Responsive Design

• Building a responsive design ensured that both the Web Stories created with the app and the platform itself would look great on any device, from smartphones to tablets to desktop computers. This was crucial for maintaining a consistent user experience across different platforms and screen sizes.
• The design automatically adjusted layout, font sizes, and interactive elements to provide optimal viewing and interaction regardless of the device being used. This responsiveness not only maximized audience engagement and reach but also allowed content creators to build and edit Web Stories on various devices seamlessly.

Visual/UI Design

The UI design was focused on simplicity and efficiency, ensuring that users could create compelling stories without needing advanced design skills. The design system followed a 12-column grid, with consistent spacing and typography to maintain a clean, professional look across the app.

Colors were chosen to reflect the news outlet’s brand identity, with a focus on accessibility. High contrast was maintained throughout the interface to ensure readability, particularly on mobile devices.

Style Guide and Components:

A detailed style guide was created to ensure consistency in design and functionality. This included specifications for colors, typography, spacing, and component design. A component library was also developed, allowing the design to be easily implemented and maintained by the development team.

Design System:

The design system was built using Storybook, documenting all components and design tokens used in the app. This system ensured that the web app could be easily scaled and adapted for future updates, as well as ensuring that the user experience remained consistent across different platforms.

Takeaways

The WebStories web app was a significant innovation for the news outlet, allowing them to produce high-quality, mobile-first content quickly and efficiently. While the initial release focused on the core features, future updates were planned to include advanced analytics, A/B testing tools, and further customization options.

The project demonstrated the importance of user-centered design in creating tools that not only meet the needs of content creators but also enhance the overall quality and engagement of the news content itself. By staying attuned to the evolving needs of digital news consumers, the client is well-positioned to maintain their competitive edge in the industry.