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
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.
It seemed to me that there were two ways we could improve the process of bringing life to the Unit Card 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.
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.
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.
What I liked:
What I learned:
What I would do differently: