Mack to Main
CineLab
A little bit about the project…
It was necessary to redesign the user's personal account (cinema). The old interface has not been updated for about 10 years, had outdated visuals and inconvenient navigation built through the top header.
The personal account was used to work with movies, track download statuses, obtain version keys, and manage information about the cinema and the user's profile.
Tasks
Update the UX and UI of your personal account without changing the business logic of the service
Improve the convenience of navigation and daily use
Bring the interface to a single visual image
Simplify working with movie cards and their versions
Visually display the download statuses and key availability
To prepare the design for further transfer to development
What was done
The old interface has been analyzed and a site map based on the old interface has been compiled.
The data structure and priorities of the displayed information were discussed with the technical Director.
An interactive prototype has been assembled, on which the logic of the cabinet has been worked out.
Navigation has been redesigned: instead of the upper header, the left sidebar has been implemented as a more scalable and convenient
solution.
A unified UI approach has been developed for movie cards and state-displayed versions.
A UI Kit has been created using Figma variables to simplify design support and transfer to developers.
Movie List Screen
The screen (1) displays movie cards that are available in the user's cinemas. The versions of each movie and its download status are also displayed. When you click on the movie card, a modal window (2) is displayed, in which you can learn more about the movie.
The "About Cinema" screen
Mobile version
UI-Kit and variables
Thanks for watching!
Back to Main