Sony Pictures Design System

Sony Pictures Entertainment Design System

Overview

The Digital Media Group (DMG) specializes in developing and maintaining asset management and delivery solutions that support lines of businesses across Sony Pictures Entertainment (SPE). Today their portfolio consists of: Runner a digital asset management system, Screeners a digital viewing platform that support sales and distribution for Television and Home Entertainment, and Abacus a support and analytics dashboard that serves the Support and Business Relationship Management teams

Problem

While DMG’s product portfolio has expanded to support new lines of businesses and integrate with new technologies, the design processes in which we’ve built our products had not evolved at the same scale. Shifts in product teams, supporting new platforms, and stale code, has all contributed to the disjointed user experiences across DMG’s products. Additionally, the time spent inspecting code, understanding current feature logic, and building wireframes off of screenshots, resulted in inefficient design workflows and an inconsistent visual design language.

When looking ahead to how our design team was going to iteratively and efficiently create enterprise-level products, it was evident that we needed a design system—a systematic approach to creating cohesive user experiences through reusable components.

Building the design system

Our goal was to create a unified design system that worked for both designers and developers and could be easily adoptable by product teams in the future. To focus our efforts, we kept the initial scope of creating and implementing our design system to just Runner.

Step 1: Form a team In order to obtain buy-in from engineers, we needed to communicate that all components and rules within the design system would be backed by research, industry accessibility guidelines, and within our engineering constraints. This assured engineers that teams in the future would approach problems systematically.

Step 2: Conduct visual design audit We conducted an audit of Runner to identify visual inconsistencies and take inventory of our front-end code. Our findings included:

• Typography Runner’s type was measured in three ways: pixels, points, and ems. Having three units of measurement slowed down the design process, added more spec handoffs between designers and developers, and cluttered the codebase.

• Spacing Inconsistent spacing from no established base number or vocabulary led to more detailed spec handoffs between designers and developers.

• Iconography Icons were inconsistent in its styling and spacing from lack of proper rules or guidelines.

• Color Runner’s color palette had too many neutrals and did not pass the W3C (World Wide Web Consortium) guideline for contrast accessibility. This lack of color contrast resulted in poor usability, especially on Runner’s primary call-to-action buttons.

Step 3: Organizational buy-in We used our findings from the visual audit as evidence to communicate to executives and stakeholders why a design system was necessary to building enterprise-level products within DMG. By communicating that a design system could decrease our product development time, efficiently scale DMG’s products across platforms, and create a foundation for future products leading to a faster go to market rate, we were able to receive organizational buy-in.

Step 4: Establish design principles When we embarked on creating our visual design language, we built our foundation with these principles in mind: accessibility, functionality, and approachability.

• Accessible DMG’s products are designed for internationalization and are built with all of our users in mind.

• Functional Each component serves a purpose and is a part of a larger goal of supporting lines of businesses across SPE.

• Approachable Our focus on user delight through use of illustrations and more human copy, allows us to better connect with our users

Step 5: Establish the rules Our rules for typography, colors, iconography, and spacing were used as the foundation for our reusable components.

• Icon standardization Standardized our icons by creating rules for style, weight, roundness, and spacing.

• Color Accessibility Adjusted Runner’s colors to meet industry color contrast standards that improved accessibility across the site.

• Typography and space scale Worked with developers to settle on naming conventions and measurements for space (px) and typography (rem).

Step 6: Create components All of our components are defined by smaller elements such as imagery, text, or iconography. Some of our elements are optional, and can be used or disregarded depending on the context in which the component is being utilized.

Step 7: Assemble the design kit We compiled all of our components, elements, and style guide into one Sketch file which we called the design kit. The kit was organized into different pages: style guide, components, and layout templates. Within each page, each artboard had a specific naming convention so that we could easily organize the artboards once they were uploaded into Google Gallery.

Google Gallery is a collaborative tool that bridges the gap between developer and designer, streamlining designer’s workflows by eliminating time-consuming specs, and tracks versions of designs. After utilizing both of these tools for a few weeks, we saw huge improvements in the design teams productivity which had a domino effect on the entire product team’s ability to build products faster.

Conclusion

Since the DMG Design System was implemented on Runner, the product team’s productivity increased, code has been refactored, and communication amongst engineers and designers has improved. To date, we have successfully redesigned Runner and have two more products coming down the pipe utilizing the DMG design system.

Overall, the design system has allowed us to efficiently scale DMG’s product portfolio and support more lines of businesses across SPE. Our goal in the future is to align all DMG products with our design system and create an open-source tool that all Sony groups can reference when building their products.