Interactive Dashboard Design
|
The goal of this assignment was to design an interactive dashboard to be used by students and the instructor of a game design course. We were provided a data set and descriptions of three stakeholders of the dashboard. The stakeholders were the Instructor of the game design course, the student listener who was watching their peer give a presentation on their project and a student presenter who was presenting their game design.
|
Identifying Stakeholders
Professor Rodriguez has been teaching Introduction to Game Design for five years. In her class, students create games and iterate them based on feedback from the instructor and peers. She has noticed that in the past, many students check Facebook or go to sleep during student presentations, instead of giving feedback to their peers. She wants listeners to give high-quality feedback that helps the presenting design team, and to make high-quality feedback given by other listeners more visible. She also wants to know if students get distracted or stop providing feedback. Finally, she wants to be able to capture her own feedback during the presentation, over and above what she could tell the team verbally during post-presentation Q&A.
|
Joanna is a student in the Introduction to Game Design class. She is an engineering major who is taking this course as a fun elective, because she used to love making card games for her two younger sisters. She will be presenting her game to the class, along with the rest of her design team. She wants to get helpful feedback from the rest of the class about how to improve her game in the next two weeks. She also wants to be prepared to argue her points if she and the rest of her team disagree about the feedback they received.
|
Frank is a student in the Introduction to Game Design class. He is an art major who wants to work in the game industry. He wants to help his peers make better games, but he sometimes gets social media notifications during class and can be distracted if he has nothing to do. He has a lot of helpful things to say about game art, but has much less feedback to offer about technology and system design.
|
Empathy Maps
|
The first step in designing this dashboard was understanding the perspectives of all the stakeholders. The three stakeholders, or personas, were student presenter, student listener and the instructor. We first mapped out the needs and wants of all three personas in order to see how we could design a dashboard that the stakeholders could use productively.
|
|
Mapping user needs to data
|
The next step in this process was integrating the real-life data with our understanding of what the stakeholders want. For example, the persona description of the instructor was that she wanted to be able to not only monitor the students in the course during presentation times, but also to be able to provide helpful feedback to her students who were presenting their work. As a user, the instructor needed to be able to multitask, without losing focus of the presentation and also needed to be able to monitor students without overly policing them and seeming domineering.
|
|
Good and Bad Data Displays
In order to understand what could make an effective data display, I spent some time researching examples of good and bad data displays. What makes a good data display, good? And a bad one, bad? How can I utilize this information when thinking about my own dashboard design?
Good Data DisplaySo what makes this a good data display? The display is easy to scan and makes it point to the user very clearly. The visualization clearly displays the changes in high school graduation rates from the years 1975 to 2012, enhancing the reader’s understanding of the data. The line graph ensures that the upward trend is clear and makes the takeaway that high school graduation rates have increased in recent years, particularly at their highest under President Obama, obvious. The labels on the graph ensure that the reader knows the context and purpose of the visualization as well. The title clearly states the purpose of the graph. The labels of the presidents names make clear what the high school graduation rate was at the time they were president.
|
Bad Data DisplaySo what makes this an ineffective data display? This graph is ineffective because the pie chart format confuses the reader about the data. Instead of leading the reader to understand that the graph is comparing the results of three different surveys, it seems like it is comparing three different values from 1 survey. At first glance it looks like 51% of the people surveyed have tried marijuana today, 43% of the people surveyed tried it last year and 34% tried it in 1997. Statistically this does not make sense as the numbers do not add to 100. The graph cannot be easily scanned because if you did, you would interpret it incorrectly. Upon further understanding, it seems that there are 3 different surveys, one from today, one from last year and one from 1997, all of which asked people if they have tried marijuana or not.
|
Rough Hand Sketches
|
After gaining a good understanding of what the users needs might be and how the given data fits into this, it was time to start designing! To start, I sketched 3 different designs for the Instructor view and the Student Listener view. The purpose of this step was to think about the different directions the dashboard design could go in by free sketching ideas that popped into my head.
One of the main needs of the instructor was being able to identify inactive students easily. In this Instructor View design I thought about how to incorporate a list of inactive students on the dashboard screen without being extremely prominent. The idea was that the instructor would be able to access such a list easily, without it taking too much space and being in the forefront, because the instructor’s main task was to provide feedback and observe other feedback. In the design for the Student Listener view, I wanted to focus on how to categorize feedback. An aspect of the persona description that intrigued me was that the student listener was concerned that they did not have much to say about the technicalities of the game and was more interested in the design of the game, resulting in them giving more design heavy feedback. I thought about whether it would be possible for feedback categories to be set up so that students could provide comments for a specific aspect of the game. For example, if Frank wanted to provide feedback on an art aspect of the game, he could click on “art” and the feedback would be tagged as art related feedback. This would theoretically also make it easier for the student presenter to sift through the categorized feedback. |
Digital Design Sketches
Creating the digital black and white designs was the next step in the dashboard design process. When creating these designs I really tried to focus on making sure that all the components I thought were necessary were at the forefront. For this step in the process I used Pages.
Student Listener Dashboard
Instructor Dashboard
|
For the student listener I really wanted to include a mechanism to categorize the feedback and a warning to nudge the user to pay attention. Similar to my rough hand sketch, I decided to create categories in which students could put their feedback. Students would be able to click the comment sign with the plus inside in order to add feedback in that domain.
I thought about how to create a warning sign to notify the user that they’ve been inactive without being too overbearing. I didn’t want the student listener to feel like they had to be forced into giving feedback because I feel like that just leads to irrelevant, not helpful feedback. One of the main comments I received on this design was that the method of adding a comment or giving feedback had too many steps. The student needs to first identify the category in which to give their feedback, then click on it, then write the feedback and finally submit it. If we want to encourage a student to pay attention, we need to ensure that the method by which the student submits feedback is clear and present. For the instructor view I tried to enhance my rough hand sketch design which I felt clearly brought everything the instructor needed to the forefront. I made sure that the instructor had a clear place to write notes down that were separate from the feedback. I also attempted to incorporate the use of icons as quick ways to identify whether a student was inactive or active. The idea was that if a teacher were just quickly glancing at the screen, they’d only need to look for the ZZZs to see who was inactive.
I realized that there was no clear point of entry on the page. There are lots of components and features but your eye doesn’t focus in on one thing. The main takeaway from this screen should be that the user can provide feedback to the presenter. The feedback that I received about this screen was that, the main takeaway was not clear. For my next iteration I needed to focus on developing a dashboard that clearly conveyed that takeaway. |
Digital Color Designs
I received a lot of important feedback from my digital black and white designs that I tried to incorporate into my color designs. I realized that including a space for the current slide view was unnecessary, as we wanted the users to stay focused on the presentation as much as possible. I also realized that there was no clear point of entry on the screen. I decided to change that with the use of color. To create these designs I used InVision Studio.
Student Listener Color Design
When observing another student’s black and white design I noticed that they had used hashtags for their method of categorizing feedback. I thought that this was a great way to incorporate a social media aspect into this dashboard and that might make students more engaged. Thus I created hashtags which students would use when typing their feedback, automatically categorizing the feedback while also making it easier for a student to focus on the presentation. I used color to make a clear point of entry on the screen. I wanted to ensure that there was no confusion about where to write feedback and how to post it.
During our class discussions, there was a lot of concern about how students would feel about their comments having upvotes and downvotes and how popular comments may impact what students think. For example, would a very popular comment with lots of upvotes make a student with a different perspective shy about posting their thoughts, or would it de-incentivize a student from posting their own thoughts and rather just like someone else’s. My thought was to allow students to post anonymously and to not display the amount of likes or dislikes on a comment. So students would be able to like or dislike feedback, but they would not know another student’s perspective on that feedback. This would allow students to think for themselves.
Another point of feedback I received from my black and white design was to include the questions that the student presenter wanted feedback on. When I was creating my original designs, I missed that the student presenters already crafted questions that they wanted their audience to answer during their presentation. I realized that it would be important to include that in the screen. But I didn’t want it to be too much in focus, because the main feature was the student listeners ability to post feedback on whatever they thought was important. Thus I have small boxes towards the upper half of the screen which if clicked on would reveal the question, one at a time.
I set a limit on the amount of words a student listener could type for their feedback because I wanted to be mindful that the student presenter would theoretically be sifting through the feedback. It would probably be more useful to them to have quick, straightforward feedback rather than convoluted, long feedback.
During our class discussions, there was a lot of concern about how students would feel about their comments having upvotes and downvotes and how popular comments may impact what students think. For example, would a very popular comment with lots of upvotes make a student with a different perspective shy about posting their thoughts, or would it de-incentivize a student from posting their own thoughts and rather just like someone else’s. My thought was to allow students to post anonymously and to not display the amount of likes or dislikes on a comment. So students would be able to like or dislike feedback, but they would not know another student’s perspective on that feedback. This would allow students to think for themselves.
Another point of feedback I received from my black and white design was to include the questions that the student presenter wanted feedback on. When I was creating my original designs, I missed that the student presenters already crafted questions that they wanted their audience to answer during their presentation. I realized that it would be important to include that in the screen. But I didn’t want it to be too much in focus, because the main feature was the student listeners ability to post feedback on whatever they thought was important. Thus I have small boxes towards the upper half of the screen which if clicked on would reveal the question, one at a time.
I set a limit on the amount of words a student listener could type for their feedback because I wanted to be mindful that the student presenter would theoretically be sifting through the feedback. It would probably be more useful to them to have quick, straightforward feedback rather than convoluted, long feedback.
Instructor Color Design
I wanted to make the Instructor view as similar to the Student Listener view so that the Instructor could get a good sense of what her students see and how they interact with their own dashboards. Thus, I added the hashtag method to tag different categories of feedback and the student presenters questions to ensure that the instructor’s priority of providing feedback was at the forefront of this design. One thing I did want to veer away from in this design was having too many components visible. In my previous design I had that and it lead to no clear point of entry. In this design I used color to create that clear point of entry at the center of the screen at the feedback box. The idea was that the eye is immediately drawn to the “Post” button.
I wanted to ensure that the instructor could still easily identify students who were active vs. non-active, but not have this feature competing with the feedback form. To do this I made the feature clickable. If the instructor wants to view students who are inactive or students who are the most active, they could click on the links and the list would appear. I made the feature an option, so that the instructor could still focus on providing helpful feedback without being distracted.
I wanted to ensure that the instructor could still easily identify students who were active vs. non-active, but not have this feature competing with the feedback form. To do this I made the feature clickable. If the instructor wants to view students who are inactive or students who are the most active, they could click on the links and the list would appear. I made the feature an option, so that the instructor could still focus on providing helpful feedback without being distracted.
Adding Interactions
Much of my color designs relied on features that could not appear until the user clicked on them. This is where the animation came in. In InVision Studio there are options to create “Interactions” which are essentially animations. I utilized those to create the animations for my dashboard design.
Student Listener Designs with Interactions
Instructor Designs with Interactions
