Designing with Real Data

In my design work at Sofar Sounds, a website where users can find secret live music gigs in their city, I have to deal with various scenarios which mainly derive from two of our product’s characteristics:

1. Global User Base

Our users are spread over 280 cities all around the world – from London to Singapore to Panama. Different cultures lead to different needs, so we need to consider our user’s environment when designing solutions which aim to be useful for them.

2. Varying Product Depth

The intensity in which our service operates varies between different cities – from one gig per month to three shows per night. Also the information provided about events is not consistent across cities, since they are managed locally. Considering these varying conditions, we need to make sure that our designs adapt and scale.

When real data becomes important

Anticipating these different states and scenarios requires taking a close look at your data. Knowing your product’s status quo doesn’t only help you discover these scenarios, it also sets a realistic foundation for exploring new solutions. You become aware of what is easy to implement, and what requires additional development work.

Here are some simple rules I took away from recent projects:

Do your research

Browsing through your product (front-end and back-end) gives you an understanding of different content levels and reveals inconsistencies you need to consider and may be able to fix in your design.

For example, I found that some cities provide more detailed information about their events than other cities.

different-event-information
While some cities disclose the neighbourhood where the event will take place, others don’t provide this information.

Understand the whole experience

Diving deeply into research on the user-facing side of your product can become inefficient, when you don’t know what to look for or how to put your results in a wider context.
Talking to colleagues from all kinds of disciplines like development and customer support can help turn your initial research results into actual knowledge that informs your designs.

For example, I learned that a missing event location can indicate that the organiser hasn’t received a confirmation for the venue yet and will probably add it at a later time.

Plan out all the states

Fortunately, responsive design offers solutions to the problem of having a varying amount of content. However, these states need to be planned out carefully in order to be prepared for the moment your team’s developer is going to ask: “How does the design behave in scenario XY?”

Avoid artificial data

The amount of content is only one parameter that can be better anticipated by using real data in your designs. Sometimes there might be no content at all. Either way, you shouldn’t base your design on artificial data like Lorem ipsum text, which may fit well into your shiny UI, but won’t give you any clue if your design is going to work.

Designing with existing data

Designing with existing data has the advantage that it keeps you from coming up with unrealistic content. It immediately shows you the constraints your design needs to face.

Sketch offers some amazing tools that makes it an ease to integrate real data into your designs.

Transfer data into Sketch by using Craft

When it comes to putting information together in Sketch, Craft by InVision is a great tool to transfer real data into your designs – and it’s free!

So far, I have used two of the three options available:

1. Web

Select a text or shape layer in your Sketch file and replace it by clicking on a text or image on any website. It feels like magic!

web-craft
By using the Web Plugin within Craft, I can pick event locations directly from the website.

2. JSON

Ask your developer for the API you need, import the API link or JSON file in Sketch and select the values you need for each layer in your Sketch file.

city-list-json
Creating a list of real cities by pulling content from the given API.

By using the Duplicate plugin within Craft, Sketch pulls the data from your API or website while duplicating layers, which lets you quickly create unique elements containing real data.

Limitations

At the end, how your existing data is organised can make the tool more or less effective.
I came across two issues while using Craft, which are not part of the tool itself, but rather show limitations depending on the source of data.

1. The data you need is not available on the web

If you are looking for data with certain characteristics within a larger data group, having this sub group available on a webpage or as an API can save you tons of time. On the downside, if you only have this content available in another form, a spreadsheet for example, you are probably faster copy-pasting data from this source instead of going through your website or API and selecting data from the larger group.

2. Elements are not accessible independently

Many websites, including Sofar Sounds, place text over images which makes the picture unaccessible for Craft.

select-text-layer
Sketch prompts me to select a text layer because it only recognises the overlying text layer.

When it comes to duplicating content, depending on how your content is organised, the diversity of content can either be limited (Craft repeats the same three images) or you end up with content you don’t need, but which is added automatically to your design while duplicating layers.

unwanted-information
While I can select the name of the location independently, Craft duplicates both location and date when using the Duplicate plugin.

To summarise this bit, Craft’s Web and JSON plugins can be a huge time saver and are really fun to use, but have the biggest effect when data is available and accessible through your website and APIs.

Change designs quickly by using Symbols

In case content can’t be inserted fully automatically by using Craft, Symbols in Sketch accelerate the process of altering designs manually.

By converting every design element into a symbol, the content in this element can be easily changed in the Overrides section to match another user scenario.

symbols
An event for a user from London quickly becomes an event for a user from Oslo.

Designing for different scenarios and use cases with Symbols isn’t only a faster way to keep your designs consistent, you will also immediately see if your initial design breaks when you insert other content.
If this is the case, you can easily go to the symbol’s page and edit the master design so that it works for all scenarios. After finishing your master design, all elements following this symbol will automatically adapt the new master design.

Designing without existing data

Whether it’s when building a completely new product or a new feature within an existing product, there might come the moment when you need to create new content. Whether it’s button labels, headlines or profile pictures – at some stage, your designs need content to make sense.

Become the content creator

Instead of using Lorem ipsum, I usually take the time to create content on my own. Even if this is not the content which will finally make it into the released product, I get a much better idea of what the user experience is like.

Also, when creating prototypes for user testing, having informative copy that transports meaning becomes inevitable. Language plays such an important role in the user’s decision making and guidance, so it must not be handled poorly or even ignored.

courses-and-reviews
When designing a completely new website during my work as a freelancer, I drafted all the content myself in order to test different options and create a realistic basis for discussions with my client.

I enjoy putting myself in the shoes of a copywriter, but for those of you who don’t feel comfortable writing copy or simply don’t have the time to do it, here are two other options.

Involve your team

Make use of the people working with you on the same product and get them involved in content production. This could be anyone from clients and stakeholders, to co-workers from development, marketing and customer support. If you have a copy writer in-house, you may want to involve this person as well.

Ask for missing data

If you can’t get people create content for you, ask them for ideas and advice. Make sure they support you with all the knowledge and data you need to come up with a realistic solution on your own. Asking people individually to have a chat (in-person or remote) is probably more efficient than a group meeting, since you get a deeper understanding of their work and what they know about the problem to solve.

Conclusion

Whether you’re working with existing data, or building a completely new product with no content available at all, working with real data will help you create designs, that take different scenarios, states and technical constraints into account and are therefore more user-focused and easier to implement.