As a UX/UI designer at Webedia GmbH, I was tasked with redesigning Moviepilot’s
user-generated
list pages. These pages are created by registered users and can contain movies, series, or
persons. Users create lists to keep track of their watched movies and series, and to determine
the best ones for certain occasions.
The redesign involved three types of pages: the list overview page, the list detail view page,
and
the view of a user’s own list in edit mode.
List overview page
The list overview page displays the latest lists that users have created, as well as categories
and a CTA to access a user’s own profile.
After conducting a Hotjar analysis, we made several changes to the previous design, such as
displaying list categories as horizontally scrollable lists and adding two new list categories.
We also simplified the process of creating a new list and removed the information slider. In
mobile view, “Create list” button became a floating action button.
List overview page in mobile view
The following video showcases the overview page featuring the most recent and popular user-created lists. Additionally, it provides a glimpse of the mobile view’s dialog box, demonstrating how a user creates new lists.
List detail view in edit mode
In edit mode on the list detail view page, users have the ability to modify list details and entries. This includes adding, deleting, and reordering entries, as well as providing descriptive text. We removed the rating slider due to technical complexity, but users can still rate movies and series on their detail pages. We also removed the “Add to list” interaction on the own list view and the function for reporting and subscribing to one’s own list.
Edit mode in mobile view
This video demonstrates the edit mode of a user's own list. Users can add a description to each entry and rearrange the list according to their preferences.
Conclusion
In summary, redesigning the user-generated lists for Moviepilot was a major UI challenge that had to reflect the company's identity. Even with limited time, the old interface was successfully updated and new design elements were introduced. While user testing would have been helpful to confirm the design’s success, the project was launched after I left Webedia, so I couldn’t gather more feedback.