{"id":20405,"date":"2020-06-25T17:35:56","date_gmt":"2020-06-25T16:35:56","guid":{"rendered":"https:\/\/blog.marvelapp.com\/?p=20405"},"modified":"2022-06-01T03:16:56","modified_gmt":"2022-06-01T02:16:56","slug":"designing-ux-data-dashboard","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-ux-data-dashboard\/","title":{"rendered":"How to make a UX data dashboard for your design team"},"content":{"rendered":"

At New York Public Radio (NYPR), we have a variety of brands and digital products such as WNYC, WQXR, WNYC Studios, etc. This year, our digital team is updating the experiences of our brands with a more consistent UX to better serve our diverse audiences. In order to do that, we are looking at the data to understand how our users interact with our digital products today.<\/p>\n

Why make a UX data dashboard for designers?<\/h2>\n

It is important to look at how your digital experiences perform to identify patterns and trends. This is not meant to take away from the value of generative user research which is valuable if you want to understand your user\u2019s journey and identify those underserved user needs. With data, we can get a sense of what users are actually doing and how they use our digital products. Keeping track of these behaviors and patterns and how they evolve over time can help inform new ideas for user research.<\/p>\n

<\/div>
<\/svg><\/div>

\u201cTo design an easy-to-use interface, pay attention to what users do, not what they say.\u201d
\n~ Jakob Nielsen<\/p><\/span><\/blockquote>\n

For our team, designing for multiple brands within a large media company can be challenging when data and insights on user behaviors can easily be siloed amongst individual teams rather than shared broadly. Additionally, having a four person design team means that we need to be able to draw relevant insights in a way that enables quick decision making.<\/p>\n

As a design team, we strive to be human-centered and data-driven. As much as we love spending our hours mining Google Analytics for information, we need a better way of keeping track of how users are finding us and interacting with our experiences. Having something tailored to our team\u2019s data needs would save us time, confusion, and maybe a few tears. Also, it would provide us with visuals using the latest data for any spur-of-the-moment proposals or presentations. Luckily, most of our team has prior experience with data dashboards. For these reasons and with the help of my prior experience, I created a UX Data Dashboard and took an iterative approach to this process.<\/p>\n

\"\"\"\"<\/a><\/p>\n

Process for making the data dashboard<\/h2>\n

Surprisingly, there are not many articles around creating a data dashboard for Design and UX teams. Below is the process I followed for the creation of the dashboard.<\/p>\n

    \n
  1. Define:<\/strong> What are the goals, objectives, and data points that the team wants to track? What questions typically come up when you start a new design project? This will help you think about what data you need and how to format it so that you can quickly extract these insights. This is also a great way to make sure you are incorporating your team in the process and starting to get feedback on the final output. Keep in mind, you might not answer all the questions in the first design of your ux data dashboard and that is okay!<\/li>\n
  2. Research:<\/strong> Once you have questions that you want to answer, figure out where and how you can access the data you need. For this, I collaborated with our data team, engineering team, and product managers. In some cases, I reframed our original questions as we discovered gaps in the available data.<\/li>\n
  3. Select a Medium:<\/strong> Determine the best medium for creating a UX data Dashboard. There is no right answer here, but it is important to think about what will work best for your team. You do not want to create more manual work in the future so find something that will automatically update and be ready to use when it is needed. We use Google Data Studio because it seamlessly pulls from Google Analytics (GA) and our data warehouse. We also add links to our qualitative studies for quick reference.<\/li>\n
  4. Explore and Experiment:<\/strong> Take time to experiment with the data and see what you can do with it. We have multiple properties that we track via GA and we need a way to holistically view performance. After a few tries, I was able to get a view of how the number of sessions varies overtime for 5 different brands.<\/li>\n
  5. User Testing:<\/strong> After creating your first \u201cdesign\u201d of the dashboard, do a quick user test<\/a>. See how quickly your teammates can extract insights from the data and ask if there is any additional data that is needed for better context. Some of my teammates pointed out redundant information or gave me tips on how to better structure or visualize the information to support our team\u2019s needs.<\/li>\n
  6. Validate your data:<\/strong> Collaborate with other teams such as engineering or data & research to make sure you know exactly what your data is telling you and that it is the right information. For example, thanks to our engineering lead, I learned that \u2018Search Queries\u2019 in GA are actually just what users search within our sites. To get the search terms that bring people to our sites, I had to access Google Console data. From our data team, I now know that it is better to look at some of our data by \u2018sessions\u2019 rather than \u2018pageviews\u2019 due to how each one is counted in GA.<\/li>\n
  7. Share it out!:<\/strong> Make sure you give your team an onboarding to the final design and make it easily accessible.<\/li>\n<\/ol>\n

    \"\"\"\"<\/a><\/p>\n

    Our result from this process:<\/h2>\n

    Many of the questions from the first step made it clear that our team wants a quicker way to compare data across different brands. While GA provides a lot of data for each of our properties, it is difficult to do comparisons between two or more.<\/p>\n

    To address this need, the first page on the dashboard is an overview of key data points across our 9 unique digital properties. At first glance, we can quickly see and compare the following:<\/p>\n