top

Website and IOS App

UX/UI Redesign Case Study

I’m not affiliated with Dailymotion in any capacity.

This case study was done to enhance my experience.

Figure 1. My redesign mockup

What is Dailymotion?

Dailymotion is a French video-sharing technology platform primarily owned by Vivendi. It is available worldwide in 183 languages and 43 localized versions featuring local home pages and local content. It is also one of the most popular video-sharing platforms nowadays.

The first time I've used Dailymotion is in 2010 and I actually love it. I use it to watch all the shows I like and the content up there is very interesting.

Why did I choose to redesign Dailymotion?

After using Dailymotion for a while, I found some user flows on the website and iOS app which can be improved and made better. I think this is absolutely a good chance to enhance the UX/UI design skills for my career in the future so I challenged myself to improve their user experience and interface in any way I could.

Figure 2. My redesign mockup

My Goal

My goal for this project is to take responsibility for various roles such as User Experience Designer, User Interface Designer to enhance my working skills from research to design part.

Current Sitemap

I would like to do the analysis for the app first, then from that, I listed down the sitemaps of the current app, so that we can have a clearer look at the navigation system and all the functionalities that they have.

Figure 3. Current sitemap

They have 4 main pages on the app: Home Page which shows 5 different categories of video recommendation; Following Page lists all the videos from the channels that you'd followed and those videos are arranged separately from each channel; Search Page; Library Page which helps you to save all the library and it also includes the setting section; the side menu will help you to navigate back to the categories on the Home Page.

Heuristic Evaluation

At a very first glance, I found things that I like about the app:

Clear & minimalist design theme
Simple navigation system
Diverse contents
Relevant recommendations

It brings out a modern vibe and feels very neat and suitable for almost everyone to use.

Besides that, there’s still one thing I don’t feel happy experiencing from the app is their visual design which I will explain more in the problem statements below.

Problem

Before jumping into the problem statements, I think it’s necessary to show the actual problems of the app first. Here are the problems I’ve faced while experiencing the Dailymotion app:

The content on Home Page is not interesting enough because it is limited to the 5 categories
The Following Page includes a lot of videos from my following channels list and they are arranged based on the channel’s name. The thing is I can only see the video from one channel at a time and I have to switch it to see more videos from different channels I followed. It makes me feel like I’m viewing the channel page rather than the feed page. It doesn’t trigger the interests inside me and makes me want to continue surfing that page
Thumbnail in Video Listing Page doesn't have Save for Later option. I need to go to the Video Detail Page to select the Save for later option
The Library icon on the Navigation Bar looks like the User Icon and when I click on that, it drives me to Library Page
No User Page. I can’t find a User Page to manage my information. I only can do that when I go to Library Page then click on the Setting button which doesn’t make sense. The symbol for Library page is the user icon which is not appropriately used.
Nothing encourages me to stay in the app longer after I finished watching the video
The main color scheme of Dailymotion is Black/White/Grey which is neutral, not eye-catching, and also not recognizable

Gif 1. The current mobile app on IOS of Dailymotion (September 2021)

Problem Statements

So from there, I came up with these problem statements in order to enhance the user experience:

How might we make the contents more diverse and appropriately organized?
How might we enhance the user experience on Following Page?
How might we improve the convenience for the users while they’re surfing the Home Page?
How might we make all the icons and navigation text become constant?
How might we help the user have more control with their information inside the app?
How might we make the users want to stay longer using the app?
How might we help the users remember the brand longer and recognize the brand easier?

User Flow

There are two main actions the user might want to do in Dailymotion:

Watching video
Uploading video

Since Dailymotion mobile version is more likely to focus on consuming content rather than creating content so the original app doesn’t have the video uploading function. That’s why all my work below focuses more on improving the user experience of consuming content.

Figure 4. User Flow

Suggested Sitemap

After having the user flow, I came up with a couple of pages and link them up together, make it a sitemap:

Figure 5. Information Architecture

Prototype

This is the new Home Page where people can explore various categories and recommendations of videos from Dailymotion.

This is the Video Detail Page, Video Listing Page and Channel Detail Page.

Motivate the users by rewards "Watch more videos, gain more points"

Re-organize the following page by adding the "all" section where people can see videos from different channels base on the timeline they had been uploaded

Redesign the channel detail page

Lastly, we have Search Page and User Page

Add user page instead of library page

Add different tab for search page

Website version

What have I gained after this project?

More experience, both in UX and UI, I would say.

In order to accomplish this project, I have identified the pain points from the current app and base on that, I came out with my solutions for the new flow and visuals. I believe that could help improve the experience for existing users as well as get more attraction from new/old users of the app.

And during the whole process, I’ve enhanced my XD skills. I have learned how to use components, color assets,

and text style to speed up the interface design process. I have learned to use animation to make the transition from

one page to the others smoother. Next steps I will test the usability of this new version of Dailymotion

and keep it updated better and better.