Production Design Blueprints

←Back

Next →

Visual Interface Designer

Snapchat (via Aquent Studios)
 instant messaging camera app

October .21 — September .22

Duration: 3 months 
San Francisco, CA

Tools: Figma, JIRA, Airtable, Quip

Team: Product Designers, Product Managers

Production Design Need

Snap’s core product consisted of different verticals: Growth, Chat, Camera, Spotlight, Map, and Stories. Each vertical is pioneered by product designers to drive new features into the platform. The biggest pain point between feature delivery and execution is creating redline assets for engineers to build. With the high volume of features and lack of interface design support, components are inconsistent across the app.

As part of their Growth & Chat vertical, I built pixel-perfect UI assets in the messaging, friending, and three-dimensional profile space.

Opportunity

Production Design is very new to Snap, so the process is very fresh and ever-changing. Currently, all UI assets are created via Figma using SIG (Snapchat Interface Guidelines) components. This allows live collaboration and live editing, which is flexible for localization and feature updates to the Quip.

Proposed solution

Our team’s goal is to create redlines for each product feature quips that: use Snapchat’s interface components whenever possible, consider accessibility, suggest fluid user journey, and UI variations (long text strings, RTL considerations, screen size, iOS vs Android). Typically, there are four sections of a production spec: story overview, treatment suggestions, UI anatomy, and UI variations.

Production design process

Depending on a production designer’s assigned vertical, the design process will look different. In my vertical: Growth & Chat, are closely tied to SIG. Therefore, I received requests from the engineer’s work funnel to cross-check buildable UI.

“Onboarding Section” in Profile

A feature focused on adding an onboarding section in Snap’s profile

Presently, 62% of new Snap users visit the “My Profile” page by day 7. Hence, the profile is a great home
for helping users onboard to Snapchat.

Prerequisites

In this project, the product designer from the Growth team submitted the request for production help. The initial step was to have the product designer provide an engineer lead or a product manager as a POC (point of contact). If there is no engineer tied to a feature project, it is our right as production designers to reject or de-prioritize the request.

  The next step is to set up a kickoff sync to determine project scope, and how long the spec work will take to complete. During the sync, both the product designers and production designers walk through the Quip to understand the user journey and the overall ask.

Story overview

One of the main aspect of story overview is to lay out the exact user journey for engineers to build. This is typically broken down per noted in Quip.

  I set up the text style, design tokens, UI screens within “Story Overview”, followed by slight interactions of the Interface. This way, screens can be moved or changed around during live time. This makes it quick and easy for engineers to reference.

Treatments

Different treatments can be used for A/B tests to check which interface design is the most optimal. The example below describes Treatment A: a horizontal onboarding cards. Treatment B (not shown) is a vertical component. Horizontal treatment will appear as a carousel, which is important for me to showcase how it will change in different device variation.

Redlines

The anatomy section consists of redlines and touch targets for both Treatment A & B.

Dark mode

It is a best practice to include all UI screens in dark mode, while Snapchat supports system changes to light & dark mode. Inconsistencies can be seen using different elevation modes, color, and design tokens that do not follow design conventions. Dark mode, followed by other variations, is shown in the spec to eradicate that problem.

Takeaways

Don’t start a spec unless there is an engineering POC

A production spec is meant to be used as a resource for engineers. If they are not aware of a feature introduced by a product designer, then the project will be marked as blocked.

Features built were true to spec

A spec is a success when every UI element that was meticulously designed got built from the redlines. All elements were designed using SIG and Human Interface Guideline principles to deliver quality interfaces.