Entertainment Partners Website Refresh

Evolving the digital experience of a trusted leader in entertainment

UI screens for Entertainment Partners' website refresh for the desktop, tablet and mobile experience

role
Lead Digital Designer
Scope
UI Design, Visual Identity, UX Design, Design Systems
Company
Entertainment Partners
overview
Entertainment Partners (EP) is the global leader in entertainment payroll, workforce management, residuals, tax incentives, finance, and other integrated production management solutions with 15 offices in the U.S., Canada, London, and Tokyo. Currently on a mission to digitize the paper-heavy back office processes, EP is the production partner in the evolution of the entertainment industry.

As part of that evolution, a website refresh was greenlit in coordination with Liquid Agency for brand strategy and identity and AE Studio for web development. My role in overseeing the development of the new website was to provide the design deliverables necessary for its success, including a modular design system for the web components that would make up many of the page templates.
Background
The Entertainment Partners website digital refresh was just one of four work streams happening in tandem — the other three included brand/portfolio architecture revisions, a master brand expression refresh, and product launches for several key products and feature updates in the EP product suite. Needless to say, none of the initiatives would be considered easy, low-hanging fruit, let alone all four projects happening simultaneously with stakeholders and core members working across one or more work streams. The challenge was on.

Lots of Room for Improvement
The previous Entertainment Partners (EP) digital experience consisted of disjointed landing pages and niche microsites. There were inconsistent visual cues and patterns between the public non-authenticated pages and the authenticated sign-in experience. Legacy pages have been thoughtlessly tacked onto navigation bars and the footer with no consideration of the organization of the site architecture. 

Instead of its current check-box state of design, there was potential to transform the EP website into an essential touchpoint that unified functionality, consistency, and trust of the brand. In essence, EP could greatly benefit with the inclusion of a dynamic design system to house design components, patterns that made web creation more efficient while satisfying the business requirements of the company.
Process
With the brand strategy and master brand expression projects midway through their cycle, I was brought in to begin work on the website redesign. There were three primary objectives that the new EP.com website would accomplish:
Objective #1
Lead generator for all EP products and services
Objective #2
Portal for employees to view payroll collections and participate in the production community
Establishing EP’s legacy as the leading payroll tool for the entertainment industry by a creating a thought leadership hub within its blog and news resources

Objective #3
Establishing EP’s legacy as the leading payroll tool for the entertainment industry by a creating a thought leadership hub within its blog and news resources

JTBD (Jobs-to-Be-Done)
Using the Jobs-to-Be-Done framework, we mapped out the most common roles within the entertainment industry that would refer to EP.com for achieving a particular outcome.

JTBD outlined the most common tasks on the website based on the most common overseers of studio financials

Starting with the look and feel
Working closely with the creative director and UX designer, we began exploring new graphic identities for the website that pulled directly from the new brand expression and message. Referencing the agile methodology, the team mapped out a 3-month timeline for how we would finish the specified deliverables:
  • Required UI mockup screens for every page on the EP.com public site
  • Updated copy and messaging reflecting the new brand tone
  • A dynamic design system that would improve site maintenance and cohesiveness

Referencing the new website navigation model, we went forth constructing web mockups

Starting with the visual direction, we came up with three visual design mockups referencing a high traffic landing page within the Entertainment Partners website.
direction #1
Digital Contemporary
direction #2
Cinematic
direction #3
Hollywood Tech
building a Design system from the ground up
After settling with Direction #1 (Digital Contemporary) and Direction #3 (Hollywood Tech), we started to create a rough design system on Sketch containing the components that would be included on most page templates. Working in an agile environment, we made sure to communicate weekly with the stakeholders and developer team to remind them that design rationale would be incorporated during each update as we moved along in the project.
the solution
After most updates to the design system have been solidified, we were able to then move into screens for the pages and subpages of the Entertainment Partners website refresh. Using Abstract, we imported all desktop, tablet, and mobile screens into the application and would share the specs with the developer team through weekly demo meetings. In addition, if there were any retroactive updates that came up, we made sure we communicated this to the team through comments on the Abstract mockups.

Desktop UI screen mockups

Mobile UI screen mockups