Creative
Boilerplate


Role: Product Design Lead
Duration: 6 months

Building the Creative Boilerplate to for multiple teams was a great experience for me. It’s a tool that standardizes design, optimizes creativity and makes work process and collaboration more efficient.

As our Design Studio was expanding recently, new designer with different background and experience level were joining our team. Some problems came up along, such as inconsistent design styles, miscommunication across teams and complex workflow. The main pain points are 1. Long hours of preparation before actual work 2. Engineers’ confusion with various design styles development. 3. Clients’ request against design best practice.



Goals

Make design and development process efficient, quick and seamless.


To kick off the project, I had a meeting with product manager and other stakeholders to discuss goals, timeline and technical support. We brainstormed and came up with the idea to build out a boilerplate, which will provide clear design guideline, reduce production time, and last but not the least, put no limits on creativity and function development.

Boilerplate will be built in Sketch, a software both designers and engineers can access to and collaborate easily. To have a bigger picture, this tool will benefit designers and engineers to produce better quality and larger quantity of work, in a scalable way.




Research

User Journey


First of all, to understand how collaboration works between designers, engineers and clients, I created a user journey to clarify relationships of each party and look for touchpoints where we can dive deeper and improve.

As shown in the flow below, touchpoints are located on pre-unveil stage, when designers provide first design draft to clients, and integration stage, when designers pass approved design files to engineers.

1:1 Interview


Following the touchpoints research, I conducted 1:1 interviews with 5 designers and 2 engineers. The main goal of this 30-minute interview was to study their thoughts and work behaviors, so that to find out the needs and hidden problems.

Interview Insights


Designers


  1. They want a boilerplate able to modify styles and details.
  2. In general, they spend 6-8 hours to create a design set, and would like to increase the production speed.
  3. It takes a while to make edits if clients request a large amount of updates in the full suite.
  4. They are not very sure what dimensions and guidelines engineers are using, and have to ping them every time to ask.
  5. They want to know the best practice for both teams.



Engineers


  1. They want to align with designers on dimensions, asset sizes, responsive guideline across devices, components placement, spacing specs and variation control.
  2. They want to reduce time integrating various design styles. It’s good to have diversity in design, but it’s more important to ship deliverables on time.


Based on user journey and research insights,
It came up with 3 major problems which needed deeper dive in and solutions synthesis.

Problem 1


Lack of design standards between designers and engineers.


Studying past design work, I analyzed and discovered design pattern across clients and functions, by following the 3 rules:

Reusability
What variant needs?
How does it scale?
What style variables are in use?
Consistency
How to implement across different design and scenarios?
Optimization
How to optimize design styles based on consistent and cohesive modules?


Solution   

Create Hero Liquid Variable to set standards and optimize variations.


Since hero section in email design is the prioritized and essential visual shown to users and it affects performance the most, I focused variety and optimization on hero design, and had the rest of design applied with preset modules created along with best practice.

Reviewing all potential patterns with engineers, we sorted them into 3 groups, based on time spending and technical capability. We called the method Hero Liquid Variable.

Hero Liquid Variable sets standards of design and integration to let designers and engineers practice on the same page. Designers can pick a hero module as a base to jam with creativity. For other variations or future refresh concept, they should use design in same group, so that engineers can integrate and switch assets easily. Most importantly, we can keep outcome consistent both design wise and technical wise.

Problem 2


Design process is complex and inefficient. 


Apart from user journey involving designers, engineers and clients, I did a further user journey focusing on designers’ workflow.

Taking a deeper look at the design process, I found different levels of repetitive execution in the workflow. To eliminate repetition and redundant workload, the easiest and most effective way is to create pre-built modules to save time building framework, and complex symbols for design consistency and precision.


Solution   

Build pre-built modules & compound symbols to lay the groundwork.


Similar to Hero Liquid Variable, pre-built modules and symbols are inspired by good design done in the past, and following the most updated technical guide from engineers. They set the best practice foundation and invite designers to enhance design as deliverables.


Problem 3

Poor web accessibility makes design less “human”.


It’s all about humans. Our deliverables are facing different groups of end users across industries. It’s especially important to make our design accessible for anyone across any digital devices.

Collaborating with engineers and design expert in ADA compliance, I was fortunate to study the latest web accessibility guideline and GDPR requirement. What’s more, to have design work smoothly and cohesively across devices, responsive design is another major touch on this problem.

Solution  

Implement ADA compliance & responsive web accessibility to final design.


To ensure deliverables are accessible and user friendly from the beginning, ADA compliance and GDPR modules were embedded in boilerplate as the guideline for designers. Mobile module with smaller screens best practice was added in boilerplate too. To save time creating design variations across devices, engineers recommended that designers can create only desktop and mobile mockups for the pre-unveil phrase, and leave the rest of work to them later.


Mockup

With solutions complied, here came the prototype of creatives boilerplate, which is ready for usability testing.




Testing

Usability testing was conducted with 6 participants, including 2 new designers and 4 experienced designers. I created a pin-up wall with collections of testing result to gain insights for next step improvement.


Insights

Boilerplate is rated 4.7 in general. (5 is best)
2-4 hours spent in pre-unveil after using boilerplate. (6-8 hours in the past)


Improvements


Designers find boilerplate easy to use and time saving in general, and would like to learn more about best practice of full suite workflow.

  • Research plugins benefiting designers’ daily job and workflow.
  • Give presentation of plugins introduction and practice.


Complex symbols may not be easy to pick up for new designers, and they could be simplified a little.

  • Reduce complexity of buttons and pre-built modules to give designers more freedom to play around design.


It would be nice to have a checklist of design best practice and a guide of how to use the boilerplate.

  • Work on design kick off deck, and onboard new designers with boilerplate.


Takeaway

It was a great experience to work for multiple groups of product users and multiple levels of goals in one project. The challenge is to evaluate conflicting feedback from two very different groups, designer and engineers. It’s important to find out the sweet spot in between, and make the product scalable and optimizable. Fortunately, I was able to conduct iterations and collect testing feedback quickly during the process, which pushes iterations and deliverable move forward smoothly. Creatives Boilerplate was launched has been used for almost 1 year with successful feedback across teams. It is an ongoing project to refine and update it with iterations, and I am excited to push it to the next level.