Help center

Redesign of the Dailymotion Help Center

Role Product Designer
Duration4 months

Introduction

In 2018, Dailymotion's branding experienced a significant evolution. In order to assume a more premium visual identity, Dailymotion's main colors became black and white, passing the historical blue as a secondary color.

This change obviously had an impact on more than just the dailymotion.com website. Many other sites of the company had to have their design modified, notably the Help Center. The Help Center also had some ergonomic and navigation issues, so this redesign was the right time to rework all that!

The help center, or FAQ, is the website that gathers frequently asked questions from users, product details, guides, policies and more. It’s a smart knowledge base that is built to help our users that our support team continuously improve with new content and keep it up to date.

It was one of the first big projects at dailymotion on which I worked as the only designer, preparing everything from research to dev support during the implementation of the new solution.

Goals

Rebranding

Tuning the help center with dailymotion's new branding

Improve experience

Resolve the many ergonomic and navigational problems from which the former help center suffered

Previous version

Old design and problems

For this project, I could not do a user search directly. The problems raised were directly reported to me by the support team, which collects all the concerns that our users encounter on our platform.

Overall, the website was not aligned with the new brand and was not responsive either. Then, each page had its own problems.

Research

Understanding the different categories and analyze competitors

01. Zendesk

Customer Service Platform

Zendesk is the solution that Dailymotion uses for its Help Center. It is a rather complete solution that offers many templates and structures to facilitate the creation and update of support sites.

Very practical to use for our support team, this solution nevertheless has some limitations in terms of possibilities. I had to discover them and take them into consideration during my work throughout this project.

02. Benchmark

Analyze the competitors

I have analyzed many Help Centers from different services and platforms, whether video related or not. The purpose of this benchmark was to discover best practices in this area to find out how to improve our Help Center website, especially the navigation through categories and articles.

Base

Working on wireframes

I then worked on wireframes, doing numerous iterations on what the best solution for our help center could be. The main thing I kept in mind was to have a clear and easy-to-use navigation so that our users could easily find the information they were looking for, but also, that they could easily switch from one item to another. You can see below some tests I made for the categories page.

One item I paid a lot of attention to was the article page, which is at the center of our help center.

Mockups iteration

Trying different UI styles

Once the wireframes were validated, in particular by the support team, I worked on different styles of UI that we could have on our Help Center and that would perfectly respect our new graphic charter.

Solutions

Final designs

Conclusion

Once the final mockups were completed, the development team took charge of integrating them. I followed the development phase carefully, remaining available for the developers to answer their questions but also to make some changes to the design when needed.

All this exchange with the developers during the integration of the design was very enriching and allowed us to improve our product even more.

You can discover the live site here.

Thanks for reading ! ✌

If you want to discover more awesome projects, click here !

Watchmusic

UI/UX/Motion

Watchmusic Neon

Motion

Les Vieilles Charrues

Brand Identity/UI

Dailymotion

UI/UX/Motion