Posted by Note this post is an adaptation from my video series Figma + Tableau. You can watch the video if you are on the go instead of reading this post, or bookmark this post for later reference.
I’ve been using Figma for about 2 years now and it has significantly enhanced my dashboard designs as well as my ability to more accurately discuss needs with clients.
If you haven’t been living under a rock for the past few years then you probably already know what Figma is, but if not, let me provide a quick overview.
Figma is:
- A web-based free graphic design tool (there is a paid professional version as well)
- Used for prototyping and design collaboration, as well as user testing
- A highly creative application for creating design systems, illustrations, and UI/UX interfaces
I believe in the process of prototyping so much that I spoke about the topic with Autumn Battani at TC22 – the Tableau Conference in Las Vegas this past spring. Unfortunately, the presentation wasn’t recorded, but we did record a version for the Pittsburg TUG recently.
What is Prototyping?
What is prototyping? Well it’s a process of creating early sketches of a design (a dashboard perhaps in the case of Tableau users) without data so that you can share concepts with stakeholders for early feedback. Providing conceptual designs, and even interactive ones, helps users see and experience how they would interact with a real dashboard and then can provide honest feedback. This process allows you, the developer, to be agile and efficient in your iterations until you have a final design that stakeholders can sign off on before you move into Tableau development.
So when do you prototype and how does this fit into your typical process for building a dashboard or report suite for a client?
The Double Diamond of Design Thinking
The Design Double Diamond is a framework that helps designers and developers take a user-centered approach to solving a user’s problem. The double diamond represents a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking) and originally was separated into only four phases: Discover, Define, Develop, Deliver. However, there was cricicism over the years because the design process, in particular (the second diamond), isn’t linear.
A huge part of design is that it’s iterative. Designers iterate their way forward, which is more accurately represented in a circular approach. In the new model, they added some blue circles to show people the iterative nature of design. Therefore, the final two phases (Develop and Deliver) have since been parsed out into three, more focused phases: Ideate, Prototype, Test.
Let’s consider how you would actually put this method into practice when building a dashboard report for a client.
User-Centered Approach
As shown in the Double Diamond, the process to get from point A (a user has a problem they need to solve) to point B (a delivered solution to the problem), you need to thoroughly understand not only the problem, but the user.
The discovery phase begins with divergent thinking. Imagine you are widening your understanding of something by asking lots of questions. In this phase interviews with users are conducted and a deep understanding of who the users are, their needs, experience/history, and story about the problem is developed.
It is only after this thoughtful process that you can begin the actual sketching of a solution. This often starts with some low-fidelity sketches, perhaps on paper, a whiteboard, or even a tool like Excel, where you can frame out some concepts to help you continue to ask more questions of the users.
Once all parties can converge (Define phase) and agree on both the problem and the possible solution, then the prototyping portion of the process can really take off. It’s here that I turn to Figma to but concepts to “paper” or to a literal canvas on my screen in this case.
In Figma, I can be agile and iterate quickly by adjusting colors, changing the order of charts or metrics, and swapping out text or field names with ease. Often when I’m in a feedback session with clients, I can quickly make changes on the fly so they can see how their suggestion really will look or work in the design.
Once designs have been iterated on a number of times and users or stakeholders agree that the design not only looks good, but will actually function in a way that will meet users needs, do I begin to translate that design into Tableau for the actual development.
Prototyping Best Practices
Autumn and I talk in more depth about best practices in our presentation (mentioned earlier), but this slide below highlights a few key points to be aware of during the prototyping phase. In my opinion, the two most important things to know from the list in the slide image are the following:
- Don’t make up data values. Use placeholders such as “XX” or “##%” or “Customer A” so that during feedback sessions or user testing people don’t get hung up on the values. You want people to focus on the design and to think about if how charts and metrics are organized will make sense for how they will interact with the final dashboard. You don’t want them to say, “Oh, Customer A would never have that many sales because he only sells Tables and we know Tables don’t cost that much!”
- Communicate choices to the stakeholders. You are the one that made the design, so explain your thought process. Additionally, you are likely the one who knows Tableau and probably better than the user (or they wouldn’t have hired you), which means you also know what design choices you made based on what Tableau actually can do or what certain objects in Tableau will actually look like. This will build trust with the user as well as help them clearly understand what decisions you made they can change and which perhaps they cannot.
Lastly, be prepared to make changes and iterate on your designs a number of times. It’s unlikely you will get the whole design right the first time you show a stakeholder.
Iteration is a Huge Part of the Process
While I’m not going to show active iteration in this blog post, you can check out the video to see this in action. That being said, it’s just worth noting that when you are prototyping you need to check your ego at the door. This process isn’t about how good you think you are or how you know more about design than the user or that you really like your first version the best. It doesn’t matter. You are building a user-centered solution and that means being open to listening to their feedback.
Now, the user may have an idea that isn’t the greatest, but the thing about prototyping is that it’s not final and you can easily give them an example with their idea mocked up. Let them see both ideas so they can more accurately make a decision and perhaps come around to your original suggestion.
On the other hand, the more I listen to stakeholders and users and make the changes we discuss, in time, the design strengthens. It’s through these collaborative conversations that I understand their needs and they understand how the design (and the changes we make together) will improve the final solution.
So don’t be afraid to make five versions or more of one dashboard design. Trust me, I’ve done that and more. Another great thing about Figma, is I can quickly copy a design and make changes to it while maintaining the original one for reference. This helps me keep track of changes as well as add back elements later if we end up circling back on prior concepts.
I hope this overview has been helpful! Please share and comment if you have thoughts or questions.
Cheers and happy designing!
Lindsay
Viz Zen Data 