Visual design & UX

Prezly Help Docs

When re-designing the Help center, we prioritised user-friendliness by organising information logically and providing a clear navigation structure. I added a comprehensive search functionality and categorising content effectively. Utilised visually appealing design elements, such as icons and colors, to enhance user experience.

We regularly updated and maintained the Help center to ensure that information remains accurate and relevant.

Highlights

Wire-framing and designing
New Figma components
Improvements to the Design system
Working with the support team
Updating product visuals and articles

Webinar Emails

Webinar emails were sent out each time we hosted an educational webinar featuring a guest who showcased how they use Prezly and the benefits it offers.

These emails were also used for product webinars hosted by our designers and customer success teams. Each email included a registration button, allowing us to track the number of attendees.

Follow-up emails were sent out periodically to remind our customers of the upcoming event.

Introduction

In this project, we've chosen to redesign and enhance the Prezly Help Docs. As a key resource for the product and for educating users on how to maximize its potential, our goal was to make it clearer and more user-friendly.

Problem

General Help Center issues

Missing Search Option: There is no search functionality available for articles, making it difficult for users to find specific content.
Lack of Breadcrumbs: The absence of breadcrumb navigation makes it challenging for users to easily navigate between sections and pages, reducing overall site usability.
No Popular Articles Section: The site lacks a dedicated section showcasing popular articles, missing an opportunity to engage users with high-interest content.
Small Videos: The video section features videos that are too small, making them difficult to view and diminishing their impact on users.
Outdated UI and Branding: The site’s overall user interface and branding appear outdated, which affects the site's modern appeal and user engagement.
Missing "Search Results" Page: There is no dedicated page to display search results, limiting users' ability to explore content effectively when they search for something specific.

Issues inside articles

Difficult navigation, and no Table of Contents / anchor points: The current Table of Contents and anchor points within articles are difficult to use, making navigation across long-form content cumbersome.
Missing read time indicator: Articles lack a read time indicator, which could help manage user expectations and increase engagement, especially for longer pieces.
No author information: The absence of author information reduces the credibility of the articles, as users are unable to see who is responsible for the content.
Outdated UI and branding: The articles, like the rest of the site, suffer from an outdated visual design, which makes the reading experience feel less polished and modern.
Broken components in narrow layouts: Several components within articles do not function properly when displayed in narrow layouts, affecting mobile responsiveness and usability.
Small dropdown menu: The dropdown menu on article pages is too small and sometimes broken, making it difficult for users to interact with and navigate other sections of the content.
Sticky social media buttons overlap with images: The sticky social media buttons overlap with images in articles, obstructing the view and detracting from the overall reading experience. This poor placement can frustrate users and affect content engagement.

These combined issues highlight areas that need attention to improve both the general site usability and the article reading experience, ensuring better navigation, interaction, and user satisfaction.

Research

In my research, I found that successful help centers share several key features:

Easy navigation: They were simple to navigate, with prominent and user-friendly search functions and well-designed search results pages.
Sticky table of contents: This feature allows users to track which section they're in and how far down the page they are, improving orientation within the article.
Breadcrumbs: These were consistently used for smooth navigation between pages.
Clear visuals: Help centers featured clear images and well-produced videos that effectively demonstrated solutions to common issues, enhancing the user experience

Design process

In close collaboration with the support team, we worked to identify the most important articles and categories to showcase to our users. We experimented with different layouts inspired by our research to find the best fit for our product. Meanwhile, the copywriters were developing real content to populate the page.

At this stage, I also began working on the article page to ensure that both the Help Center and the articles would be ready for launch at the same time.

Final design

The final redesign of the Help Center has successfully addressed all the issues we identified earlier. It now features a much-improved structure, with enhanced navigation, a more user-friendly dropdown menu, and clearer sections supported by breadcrumbs for easier navigation.

We also introduced a dedicated search results page and improved the article layout, adding missing elements such as a table of contents, author information, and fixing broken components. Overall, the Help Center is now more intuitive and functional.

Next project