About Screenrights
​
​​
-
Screenrights provides rights and royalty management services to the film, television & radio industry.
Eg. Jerry Seinfeld continues to earn from 'Seinfeld' reruns -
It has been doing so for 30 years, $50 million each year is paid to the rights holders
-
The objective was to build a royalty management portal, subsequently building a UI Kit and a visual brand identity
Balancing requirements
​​
In design, understanding our constraints / requirements is essential. This helps streamline workflows and maintain efficiency. Requirements and responsibilities sometimes overlap, which is where collaboration is essential. Especially since requirements change. Below are requirements from the teams I'd be working with and my responsibilities from those requirements.
Provided Requirements
Developers are using the frameworks of tailwind for css and reactjs for their javascript library
My Responsibilities ​
-
Follow design patterns that are already provided by these frameworks
-
Maintain ongoing and clear communication (documented and verbal) during handover
Taking inspiration from the office
As a client or employee walks into the office, they see curated pictures of Australian Movies. Screenrights and it's employees are proud to contribute to the success of the Australian film industry. I wanted to reflect this through our UI
From that, UI Touch points were developed
From their first touchpoint, and throughout their journey of the portal, customers are able to recognise the unique brand identity of Screenrights, while still keeping a clean clear design:
this ticked more than the visual boxes​
-
Maintaining authentic brand of Screenrights & while still keeping up with proper design behaviours
-
Giving our clients recognition, something that has already received positive feedback
-
A variety of curated images shown every time a user refreshes the page
-
Showing diverse Australian faces, which is a core value of Screenrights and important for the industry
*as pictures are copyrighted, images above are copyright free (hence not Australian films)
Recycle and reuse - Components
(A selection)
​Making a sustainable system that will be able to be replicated by designers in the future using atomic design principles
A Closer Look
The button and input components have several states which I carefully considered and designed
(A selection)
design Elements
Colours were established with tailwind css frameworks in mind. Brand colours were also changed for accessibility reasons. All colours have been checked for contrast, brand colours / colour hierarchy fall under WCAG AA rating
The construction of an interaction
The animation (left) highlights various components and states (right) needed to make a simple interaction.
The components are made from scratch. The interactions follow the design pattern that was provided by the developers.
INTERACTION
COMPONENTS / PROPERTIES / STATES
Making it responsive
Below is a demonstration in creating responsive designs using auto layout function on figma, ensuring optimal user experience across different screen resolutions
A discussion of appropriate breakpoints were decided based on our user and was created:
DESKTOP
TABLET
LAPTOP
MOBILE
Consistency is key (Save Interaction)
This save interaction demonstrates one of the key principles of how I design using consistency. Consistency helps users establish expectations, improves learnability and enhances efficiency (for both designers / developers)
