Designing with Data
We’re constantly looking for new ways to improve how we design at Depop.
This morning Sam, our product manager, posted a link into our Slack channel: Modern Design Tools: Using Real Data.
As the article states, we’re in a state of flux where a designer spends a lot of time creating pixel perfect designs either in their favourite tool, or with prototypes. We’re not making the most of what’s available to us and we’re definitely not excelling by using real data.
Using data, we can see where the problems arise, where the exceptions and edge cases lie and whether our design really works in the way it was intended.
Examples:
– Someone’s first and last names are (too) long and don’t fit where you intended it to.
– Someone’s username is (too) long and doesn’t fit where you intended it to.
– A username that includes emoji and breaks your perfect layout.
and so on…
What can we do about this?
The answer is simple.
Real people use the things we love to build; our products and platforms.
We’ve built a data structure which allows us to use this data to create designs that come to life.
The answer is data.
Getting to work with Sketch and JSON
The team uses Sketch to craft the Depop app for iOS and Android. We find that it’s a tool that compliments the way we work, by enabling us to quickly prototype and iterate on designs.
The thing we love is that is supported by people making all manner of plugins and these extend the functionality of the tool to enable us to work in ways that were just not possible before.
Using Precious Design Studio and Lukas Ondrej’s Sketch Data Populator plugin we were able to quickly prototype a template for the profile view and use a JSON file to add real data to the design.
We start by using placeholders on the parts of the design we wanted to fill with the data. For text we use something like {first_name} or {bio} and simply use the text tool to create these and then apply our text style to these so everything remains intact.
Next, we make sure the text field is of a fixed width so that when populated with data, we retain the design we started with. (This takes a little bit of playing around with, especially when dealing with values of different character lengths).
For the image, we change the layer name to a placeholder reference and in this case we call it {avatar_img}
The JSON file
Next we setup a simple, local JSON file to reflect the same values as the placeholders and use an /assets folder to reference the images we wanted to include in this test:
Making sure that all of the dynamic elements were in a Layer Group, we then call the JSON file with the plugin and by way of magic, the fields are filled with the required data.
What’s next?
As a quick test we used a local JSON file and local assets for any images. Next, we plan to bring a live JSON file using our own internal APIs and produce a modified plugin that will allow us to match any placeholder with its data counterpart.
This means we can design with photos of items people list on Depop in context of their profile, their feed, their activity and so on and this will allow us to further extend our design capabilities.
Sketch will allow us to design a module, let’s say the ‘Suggested User’ block and use JSON to pre fill with live data. Then, we can define this module as a symbol and reuse this with interchangeable data to produce a ‘live’ design.
Benefits
Spend time making sure our designs reflect what we intended and work the way we expected them to.
Believe that our design work is much more than a visual representation of our ideas.
Demonstrate that it’s combination of how it works and looks so by working with data, we’re going a step further to understanding how the design works with the other parts it requires.
Design is a sum of all the parts.
Find out more about my UX work at Depop.
