Design Operation Framework at Smule

2018 Q1 - Q3

Topics

  • The Context

  • A Chicken-And-Egg Problem

  • Design’s Missions

  • The North Star Design

  • Design Methodology

  • UI System

  • Design-Engineer Collaboration

Personnels

Matt Danzig - SVP of Design

Wang Liang - Director of Design

Alan Chappell - Design Architect

Oscar Corrol - Sr Visual Designer

Chuck Espeleta - Sr Product Designer

Simon Lai - Design Operation


2_context_overview.png
 

I’ve been informally leading this effort since 2018, and officially since 2019 Q1, with my manager Matt Danzig’s supervision and a few core team member’s effort (listed on the left).

So far we’ve made meaningful and promising progress as expanded below.

 

 

A Chicken-And-Egg Problem

Smule’s product has obviously usability problems, such as inconsistent UX/UI patterns, conflicted CTAs on the same screen, and illogical screen flows.

We have been trying to ship a product design overhaul in over two years with no major progress, mainly due to two reasons*:

  • Near-term-focused product operation style

  • Crippling product debts

 
 

As a result, the product debts have been mounting to a crippling degree, mainly in 3 aspects:

  1. Tech Debts - convoluted codebases from front-end to back-end that slow down the development speed.

  2. Design Debts - Inconsistent user-facing UI/UX across platforms.

  3. Analytical Debts - incomplete analytical events/infrastructure that lead to potentially misleading metric readings.

    Eventually, the products are trapped by their own debts, without enough space to improve nor determination to break free.

 

Please find the teammates’ full names, titles with LinkedIn links on the left.

 

To set off, we defined our design principles as:

Usable

A design needs to make sense to people and easy to use, from day 1 to day 30. This is both the most important and the bare minimum.

Consistent

Nothing should be learned twice. Using Smule’s products is like listening to your favorite songs - always familiar regardless where and when.

Fun

Smule’s fun is is full of whimsical vibes and quirky details, we aim at the highest quality but don’t take ourselves seriously.

 

 

The North Star Design

The design lab team led the exploration of The North Star Design that are validated and believed in by our customers as well as the team.

I’m routinely involved in design discussions, customer-validation sessions and design decision-makings. So far we have validated the majority of the new creation/consumption/connect mechanisms, general usability and visual styles.

Will introduce more details after the design is finalized and released publicly.

 

6_design_methodology 3.png
 

To help us get to The North Star Design efficiently enough, we need a more efficient product iteration process, which started with a re-defined Smule Design Methodology.

In a few weeks, I completed the definition of our methodology from conceptual level to specific file structures, with design and other team’s feedback and alignment.

So far we have been practicing and improving it together with SF and Bulgaria design teams. The day-to-day design operation is getting obviously more streamlined and transparent.

Shortly after, the Chief Product Officer started a company-wide product-design-engineer process re-define based on the design team’s.

Below are the methodology part on our design site.
Mostly defined and written by me:

 

7_UI_System_overview_blue.png
 

A highly collaborative and scalable UI system is critical to our vision.

The goal is to streamline design team’s work flow and to facilitate design-engineer collaborations by defining and building the four pipelines together.

 
9_Component_structure.png
 

The goal of defining a component structure is to have a logic way of breaking down the design into building blocks that not only help future design consistency, but also facilitate design-engineer work flow, as will covered in the next topic.

The component system now has 12 categories that includes all the design elements from badges to navigations.

So far we have been producing components for the North Star Design, sharing the definitions and specs on our website, and working with engineer teams on implementation.

Below are some examples and work in progress.

 

9_design_eng_collab 3.png
 

The pipelines are the most valuable when they are built by design and engineer together.

The vision here is that with the new pipelines, the product design team can maintain the majority of the live UI without having to go through the client release cycles (not to say the tech debts), therefore achieving much higher speed for iterations and tests.

With the momentum from other design missions and promising progress on the component-ization of the new design, we have gotten the buy-in from the heads of Engineer team and have started prototyping with engineer architects to explore tech details.

 

Summary

By now, we're marching towards this new design operation framework with fruitful results for the four missions in logical order, and have been sharing the progress with the whole company, which excites people and creates a momentum to get there.

10_summary 3.png

*Some statements are inevitably subjective, only representing my perspective.