Enterprise UX often deals with solving hard problems. At Juniper, we solve a lot of complex problems around networking everyday and a lot of them involve challenges around displaying large amounts of data.

When designing, working with real data is as crucial as sketching before you begin prototyping something. It surfaces unforeseen constraints early on in the process, elicits better feedback from stakeholders and it gives a real picture of what the design would look like when it gets built.

But working with real data is a time consuming process. As designers, we need to be able to quickly get feedback early on in the process and move forward quickly as in order to create good user experiences, rapid iteration is crucial.
And in the end, we often end up compromising either hi-fidelity or speed.

But why should we sacrifice one over the other when we can destroy fast and move faster, balancing both speed and fidelity?

Let me explain —

When laying out mockups, we usually begin by creating elements and laying them in a meaningful order to convey the design. At a later stage, if any edits are to be made, we have to go to each and every element to make the respective changes because we do not want to disturb the order we have spent so much time creating. This process becomes particularly harder when we are dealing with several different data points. For examples, many times I’ve had to quickly turn around updates to the order of columns in a grid right after a stakeholder review. Turned out I had grouped all of my grid elements in rows (damn it! If only I had known earlier — what a waste of time!).

But what if we don’t edit the different elements that we had earlier created, rather destroy and rebuild them once again, in no time?

I would call this the Destroy Fast and Move Faster technique. I’ll explain this further in the context of grids. Grids have been a tried and tested way to visualize large quantities of data for comparison and recognizing meaningful relationships. However, anyone who has ever laid out content for grids would know that it takes a lot of time to create and edit them.

The Destroy Fast and Move Faster technique explained

It involves the use of 3 different Sketch Features/Plugins — The new Scale feature in Sketch 39, CRAFT and RenameIt. These tools have been around for sometime now but I’ll try to tell you how to best use these three together to optimize your workflow when working with grids.

I’ve broken down the technique into 6 steps — I would encourage you to follow along these steps in Sketch as you read through them.

1. Create a table cell

Create a rectangle of height equal to your cell height and any width. Add a text box in it and add a rectangle for margin. Set the text layer and the margin layer to pin to corner and the rectangle to stretch. Now group these 3 layers and rename it to Table Cell.

Tip: Rename your layers in the beginning itself — before you start duplicating them. Use ⌘ + R to quickly rename a selected layer and use Tab/Shift+Tab to quickly move between layers while renaming.

Tip: Always use inner shadows to create dividing lines in your grid. Never create even a single line that you would have to duplicate later. Always use a rectangle. I’ve used a -1px inner shadow in this rectangle, which when repeated would create those grid lines for me effortlessly.

2. Create a table header cell

Add the styling that you want and place it right below the first one.

3. Duplicate horizontally

Hide the Margin layer and then duplicate this cell horizontally to create columns. You can easily add more columns later. We’ll soon see how.

Next, edit the text fields to the categories of data that would be displayed in the grid.

Tip: Use option + drag to duplicate a group and command + D to create a subsequent duplicate which would follow the same rule.

4. Rename Layers

Rename the layers using the RenameIt tool

Tip: Use Cmd + Shift + R to quickly open the dialog to rename your layers and specify the way you want your layers to be renamed.

5. Create your data in CRAFT

Often you’ll find yourself using the same kind of data again and again in your designs and it wouldn’t hurt if you spent some time creating lists of your frequently used data types. In the long run, this would save you tons of hours. Now select each entry in the data cells and select the data type they belong to. Guess what, 99% of your work is done here.

6. Duplicate with a click

The only thing you now need to do is use the duplicate tool in CRAFT to generate your grid! It’s as simple as that.

Tip: When adding text columns, make sure the text width is set to fixed and not auto. On auto, the text does not scale well and might lose alignment.

Those are the 6 easy steps you can follow to quickly create grids with real data. Not too bad, right?

But, I’m sure you must be thinking, how do I edit this thing? Have you seen the number of layers it generates? This isn’t improving my workflow — It’s still going to be a pain to edit this!

Remember I told you about not getting attached to what you made and destroying it fast to move forward? Well, here is how it comes to play.

a. When Adding/Deleting Rows

Easily change the number of rows your want in your grid by selecting the Duplicate Content layer and changing the number of duplicates. Use the same table on multiple different screens and easily change the number of rows.

b. When Adding Columns

Delete all the rows of your grid except the header and the first row, create additional cells and duplicate again. You can also resize your table to retain the original size and the elements would still remain in place.

c. When Editing Columns

Delete all the rows of your grid except the header and the first row and make the required changes and duplicate again.

Closing Thoughts

This is a powerful yet very simple workflow that you can use to optimize your work with grids. The key is to not get attached to what you have done earlier and moving on quickly (seems familiar to dealing with life, right?).
I see myself almost always using this workflow and it has really improved my efficiency — hope it does for you too.