DESIGN TOOLS

WEB & DESKTOP / DESIGN OPS

LEAD DESIGNER, TEAM LEAD

PLAYSTATION

Abstract

This was a design delivery tool that was essential for reviewing and handing off designs to all production teams working on the PlayStation 5 launch.

Role & Objectives

  • Built, mentored, and led a team of 3 designers whose workload I managed
  • Led the design strategy for the entire project from foundational phase to production release
  • Managed, tracked, and prioritized an annual list of UX goals and initiatives
  • Led a "continuous research and discovery" strategy, conducting sessions every month. Designers on my team at first shadowed me before giving them sessions to conduct with my guidance and then eventually on their own
  • Designed all the features for the tool as the sole designer for the first year
  • Created and maintained the Sketch UI kit to allow the team to work more efficiently

This tool would play a central role in the delivery of the PS5 and future console generations

  • In order to create a scalable product that could handle future organizational or process changes, I worked with engineering to architect solutions such as persistent URL mapping, revision and version tracking, and overwriting
  • Since all teams were working on the PS5 while Atlas was being built, I had to plan my and my team's workload 6 months to a year ahead of production needs
  • It was essential to conduct regular research sessions and design workshops geared towards uncovering unrealized production needs

Continuous Research and Discovery Strategy

New Learnings Led to Unlearnings

Early studies suggested there were operational challenges that had not been previously understood by the company and were being re-introduced into this new tool

  • Time was restrained and resources were extremely limited to allot adequate research cycles to validate incoming requirements from stakeholders
  • Conducted monthly exploratory research that were either open-ended or goal-oriented, in Tokyo and US offices, in parallel with cycles dedicated to feature work
  • Secondary studies allowed us to uncover new opportunities, discover unmet needs, surface operational inefficiences to upper management, and deprecate features that previously assumed to be beneficial
  • Findings were tracked and workshopped throughout the year, and discussed with product and engineering early and often, allowing UX to come out ahead when proposing UX-led initiatives to upper management.
  • Once the client was in stable state with basic functionality, I was able to get us out of requirement-oriented designing and secure more time for research for every feature moving forward

Sketch Plugin Early Revisions

Previous versions fulfilled basic functionality requirements

ADAPTING TO EVOLVING NEEDS

  • The first version of the plugin was barebones in functionality as it was designed and built to live in Sketch
  • Due to the limits of what could be achieved in a Sketch native plugin, an overwhelming usage that led to an influx of bugs and publishing errors, and limited engineering resources dedicated to plugin development, we decided to strategize on how to move the entire plugin experience to a menulet for easier maintenace and development
  • The second version of the plugin was meant to be a short release, temporarily using iOS UI in order to give engineering the ability to fix major plugin bugs more efficiently

Non-native Sketch Plugin

A web-based plugin allowed for more versatile design and development

  • Users could look at the timeline of when pages were published
  • Users could see which Sketch version is compatible and download it directly
  • This allowed us to be design tool agnostic
  • Challenge: Users had to find their project folder every time they published a new file, which could be buried under a deeply nested folder branch.
  • Risk: To avoid users overwriting each other's files, we limited the Save-As feature to only be allowed in the original folder.

This approach gave us more flexibility with the design and a web-based framework meant we only needed to maintain one set of design patterns

Web Client - Folder View

The folder view allowed users to navigate the folder structure and find design files

This tool became the single source of truth for all PS5 design deliverables. Users across the company relied on Atlas to communicate business decisions, design direction, engineering strategy, and QA coverage

  1. Navigation Menu: Designs were organized by teams
  2. File Viewer This shows a table view of all the files and folders within a folder as well as metadata such as author and timestamp of the last update
  3. Audit History: This shows a historical view of all the actions that were taken on the files in this folder

Web Client - Canvas View

The view for spec reviews, localization, commenting, and tracking progress

  1. Navigation Menu: User could continue to navigate while viewing a design
  2. Toolbar Actions: These actions allowed the user to bookmark coordinates, create a comment, view the design in a string tool, adjust their interface, or be notified of changes via a "Watch" feature
  3. Contextual Sidebar: This area shows all the comments, revision history, localization views, and string layers
  4. Interface Footer: The user can see how far they have zoomed in or out and they can use the "world map" to see where they are in the canvas

This was a major improvement to the previous process of using PDFs and Google Drive to view and share designs.

Maintaining a UI Kit and Component Library

A UI kit with reusable components and patterns was created in order to scale our workload

This work led to opportunities to evangelize and educate upper management about design systems workflows. I became a stakeholder for the PS5 design system team and gave guidance on design-system-oriented engineering.

  • Using several plugins, I was able to quickly create a robust and complete UI Kit within a few days
  • All styling was accounted for, including typography, colors, and iconography
  • I created a stickersheet to make it easier for designers on the team to quickly build with existing modules
  • All the designers were responsible for their own audits, contributing to the component library, and consolidating patterns and styles where necessary
  • Designers rotated responsibility on keeping the UI kit up to date so as to maintain a shared sense of ownership

Design is seeing the world differently
than how it was handed to us.