Unit Data Plugin

Overview

When: October 2019

Length: 1 day

Role: Primary designer and developer

Team: Just myself

Task: Create a Sketch data plugin that would automate the collection and insertion of unit data into Vacasa mockups

1

Define

Working with the Guest Experience design team at Vacasa meant creating plenty of designs that used, what we called, the 'Unit Card'. This is the card containing unit data that we used on the search results page and many other places.

To create life-like designs using the unit card, we would add the base card component (pictured right) to our sketch file, and then we would visit the Vacasa search results page to grab unit names, prices, cities, details, and images.

This process of skimming content from the site was inefficient and something I knew we could improve.

Unit card component in Sketch
2

Ideate

It seemed to me that there were two ways we could improve the process of bringing life to the Unit Card component:

  1. Add unit data to the component within our sketch library
  2. Create a data plugin to dynamically populate the component

Option 1 was the simpler of the two however it did not effectively solve the problem. Even if I populated the component with unit data in the sketch library, it would still be static and bound to the region or unit I grabbed the data from.

Option 2 was more complex but it allowed me to have each design filled with unique unit data. Giving designs and prototypes a very true-to-life feel.

3

Build

With only one day to pull this off, I began work on a Sketch data plugin that would integrate with the Vacasa unit data APIs and inject real unit data into designs. I worked with engineers who taught me how to call an API and securely handle the necessary keys.

In the end, I was able to deliver to the design team exactly what I had set out to create. The plugin could be called from within Sketch and it would dynamically grab unit data and inject it into designs.

4

Iterate

As I had time, I returned to the plugin so I could improve the code. In later versions, I was able to add multi-select support so a designer could add multiple cards to a view, select many elements, and populate all of them with data with a single click.

5

Lookback

What I liked:

  • Opened the door to future design process automation at Vacasa.
  • Ability to add real unit data to a design without having to repetitively copy and paste data from the site.

What I learned:

  • Working with design tool plugins. Sketch and Figma both use Javascript for their plugins so the knowledge extends to both.

What I would do differently:

  • Add a region search so that a designer could specify regions for the unit data. This would be helpful for targeted tests where we may have wanted to use units from the same region as our test subjects.
  • Add support for unit image injection.
  • Optimize the workflow so that a designer could select a whole card and have the plugin detect which pieces to swap based on their layer name in Sketch.