OVERVIEW
During my 2022 Fall, I collaborated with peers to delve deeper in the human-centered design process. Our key focus was on extracting relevant data that will fit specific stakeholders’ needs; essentially figuring out what is important for a specific persona’s goals.
INTERACTIVE DASHBOARD
Web Development
User Research
MY ROLE
TOOLS
THE TEAM
TIMELINE
USER
Create interactive dashboards that meet the needs of and cater to all three personas.
Designer
Responsible for UX design (ideation to wireframe to final prototype), UX research
Yiting Chen Peiran Ge Alexis Sudjianto
Oct - Nov 2022
Figma Procreate
GOAL
Instructor: Facilitate participation, improve and summarize feedback quality
Student Listeners: Give effective feedback in real time while staying engaged with presentations
The process of creating interactive dashboards that met the needs of all three stakeholders (instructor, student listener, and student presenter) started by understanding the backgrounds of all the stakeholders of Introduction to Game Design.
From here, we were able to conduct research by using the personas provided and creating empathy maps along with database analysis, which eventually informed an overall needs analysis. All findings from our research was synthesized to create a full picture of what each stakeholder needed and wanted.
PROCESS BREAKDOWN
From here, we entered the brainstorming phase. Not wanting to pigeon-hole ourselves into a particular solution or aesthetic for the dashboard, our group individually generated rough concept sketches and eventually combined them into one design with a final idea to take to the digital sketches phase.
From the digital sketches, we slowly progressed to higher fidelities of prototypes with changes being informed by class and instructor critiques and following key design principles. The primary user of each dashboard was kept in mind and informed all design decisions.
Our team created interactive dashboards, which serve as a vehicle for the listeners and instructor to give real-time feedback to the student presenters.
FOCUS
We concentrated on a hypothetical situation of a high school classroom where teams of students each take turns giving live demonstrations and receiving feedback of their game prototypes. The three stakeholders, or personas, in this context are the student listeners, instructor, and student presenters. The purpose of the demonstration is to give interim feedback from student listeners and the instructor.
Research + Synthesis
Empathy Maps
Our team organized the information presented for each persona to better visualize their needs and understand how compassion can enhance designs to fit each users’ need.
We were presented with 3 different personas (Student Presenter (Murphy Campbell), Student Listener (Frank Tan), and Instructor (Alana Rodriguez)) and analyzed their needs and goals based off of their personalities.
chart of specific questions
Brainstorming + Creating
Needs Analysis
Goal: Understand the intersection of each personas main goals and pain points found during creation of empathy maps. Use the needs analysis to recognize what our interactive dashboards require to address these unmet needs of each user.
Instructor Dashboard Demo Process
Instructor
Overall Goals:
Ensure class participation
Compile and provide effective, quality feedback to the student presenter
Improve quality of feedback that is given
Pain Points:
Hard to track all student listeners’ focus
Struggles to pinpoint specific students
Student Listener
Overall Goals:
Give clear, articulated and effective feedback to his peers
Engage with Student Presenter while still giving feedback
Pain Points:
Distracted/gets bored easily
Not structured/ articulate
Has trouble organizing his thoughts and ideas
Student Presenter
Overall Goals:
Receive good, quality feedback from classmates
Facilitate conversation/ generate ideas in detail with group
Pain Points:
Shy presenter
Conscious of room for improvement
Although the student presenter is essential to the situation, they are not the focus for this project as they do not need a dashboard design. However, their need for quality feedback greatly influenced our design decisions.
Instructor + Student Presenter
Student Listener + Instructor
Quality, summarized feedback for the presenters from both instructor & listeners
Easy feedback exchange & communication
Focus on student presenter
Student Presenter + Student Listener
Easy communication of feedback
Easy articulation of ideas and feedback
Student Listener + Instructor + Student Presenter
Needs Analysis Diagram for Student Presenter, Instructor, and Student Listener
Improved, effective feedback quality
Easy access to feedback
Brainstorming + Creating
Data Analysis
Goal: Determine the relevant data by hierarchical (primary, secondary, tertiary) importance for each persona. This process helps organize which variables and data should be selected and presented in our dashboard prototypes.
Minimizing the number of main variables as the instructor needs to monitor the physical environment in class.
Minimizing distraction, while after presentation, the questions and answers would be essential for them.
Should enable engagement while keeping the interface clean. The most important variables are the questions and responses. An upvote feature is crucial for the feedback feature that corresponds to the needs of presenters
Brainstorming + Creating
Rough Concept Sketches
Goal: Broadly brainstorm possible dashboards for both student listener and instructor views to ensure that we are filling all unmet needs of both users. After brainstorming, we wanted to end up with two final rough concept sketches that would serve as our Lo-Fi prototype. These rough concept sketches should address the needs of our users with our design implementations.
Data visualization is something that we wanted to integrate to give feedback to the instructor and keep the student listener engaged. We knew that benchmarking would be important so everyone understands what our data visualizations represent.
Instructor
Student Presenter
Student Listener
INSTRUCTOR DASHBOARD PROCESS
Instructor View
Rough Concept Sketch
Needs: Enforce and track student listener participation and efficiently and effectively summarize the feedback for the student presenter.
Targets specific students to encourage them to participate directly
Targets entire class to encourage the entire class to participate
Bell Notification
General Message Function
Allows instructor to gauge participation clearly and quickly
Student participation bar tracker
Instructor View
Digital Sketches
We limited our sketches to black & white helped us focus on the content, hierarchy, and layout versus the aesthetics. At this step, we made several changes from the rough concept sketches.
Ensuring student participation
Giving quality feedback
Data Visualization
Rubric
Compiling Quality Feedback
Liking and Moderation of Messages
We found it important to give the instructor visual feedback on student participation. The importance of student participation is emphasized through her ability to see the results of the participation and track individual students with the bars.
A previous feature that was absent, this allows the instructor to cultivate quality feedback with ease and control her classroom.
Instructor can judge the student presenters’ work without being distracted with room for comments.
Instructor View
Interactivity and Animation
At this step, we incorporated color and added elements of interactivity and animation. During this step, we also reflected on how our grid organized the information and data on the dashboard.
We separated the feedback section from the participation/announcement section with different color backgrounds. This made navigation more intuitive.
We found that making the interactions consistent with established norms helped our dashboard work intuitively.
Background
Consistency
We added interactivity and animation with the deletion and liking of messages. This helped us see how our prototype would fare in practice.
Delete/ Like Messages
Instructor View
Color Implementation
Used less color compared to the student listener view
Mainly blue for accessibility and to give the feeling of confidence and security.
Instructor does not become easily bored unlike student listeners
Easier for instructor to navigate
Smaller type size helped build information architecture for questions answered since it was not the main focus of student participation. It is there to benchmark and supplement analytics for student participation.
Limited Palette
With the same layout of the instructor, the header provides essential information about the presentation.
The darker gray bar that suggests the current question slides smoothly while students navigate through all the questions. We believe this is a straight forward and interesting way to show students where they are during the presentation.
Less important → header, presentation information.
Bolded and less saturated colors in text used for navigating through each function.
Typeface Size
Needs
Additional multiple choice helps student listeners like Frank Tan give quality feedback without the mental pressure of needing to provide words. This also facilitates student listeners to better engage with the in-person presentation of the game.
Different background colors for individual chat messages were used to create consistency with how chat features are displayed on well-recognized platforms.
Information architecture was well established at this step with the variety of bolding for important headings and pieces of information (such as student names) and the italicization of messages to guide the user to perform certain actions.
Student Listener View
Rating System
Text box for additional input
Student Listener View
Student Listener View
Instructor View
Used red, yellow, and green for the participation bar, which are the universal colors for bad, adequate, and good
Easier for the instructor to visualize
Color is not main indicator of participation which makes it more accessible
Final Design Refinement
Consistent Header
Smooth Slide for Current Question:
Activated Margins
Multiple Choice + Additional Comment
STUDENT LISTENER DASHBOARD PROCESS
Rough Concept Sketch
Interactivity & Animation
Color Implementation
Final Design Refinement
Participation Bar
We knew we had space to work with to incorporate data visualization. This implementation was a goal we had when increasing the fidelity of our prototype from Lo-Fi to Mid-Fi.
Digital Sketches
Using a larger, more emphasized question column, and smaller answer column draws student listeners’ attention to the feedback.
Design Goals:
Animation is an effective way to guide user’s attention. We want the students to shift their attention to the multiple choice results and comments after they submit their answer.
Feature:
By keeping the same layered squares as outlines for each column, and utilizing Figma’s Smart Animation feature, this animation helps guide students’ attention from the multiple choices they just submitted to what their fellow classmates have chosen for a given question.
Animation
To further emphasize the multiple choices, we implemented a hover to highlight feature. As shown in choice b., the red button is highlighted with a more saturated red. This both interests users, and suggest the click to choose and highlight function.
Overall Color Scheme
Most background colors are blue, gray and white, which facilitates a formal, engaging but not too distracting page.
Bold fonts for selected option and submit button after clicking.
Different font sizes for Question + Comment sections draw student listener eyes to the most important sections.
Not too eye-catching to distract students, but incentivizes students to submit questions.
Background
Information Architecture
Design Implementations
Simple, non distracting, effective way to give feedback
Student Listener Dashboard Demo
This is an easy way to give clear feedback and will not distract from the student presenter.
Easily facilitates giving feedback for people who struggle with articulating their thoughts
Balance between giving good feedback while also staying focused on the presenter
This allows students to give further feedback/ extra ideas on a specific topic.
2:1 Column Arrangement
Design Goal: Improve upon our concept sketch, make responding to presentation questions easier and more effective, and add engaging features and data from other students.
Student Listener View
Improvement upon Mid-Fi: Different types of animation has different effects on the user experience, and the timing of it is essential. Therefore we added smooth, consistent smart animation for most navigations.
Student Listener View
Feedforward and Feedback:
Accessible Color on Upvoting Button
We want our page to be colorblind-friendly, while maintaining a coherent color palette. Green is both a better choice for accessibility than red, and is closer with blue on the color wheel.
Progress Bar
Highlighting current question, and change the color of answered questions, so that students can visually see their progress.
Consistent and Colorful Multiple Choice Options
Emphasizing the multiple choice buttons makes the page visually engaging. The consistent connection between the data visualization bars and choices help create a less text-heavy data visualization.
Text Weight & Size
Blurred Image
Consistent and Colorful Multiple Choice Options
This project allowed everyone in the team to be more aware of stakeholders’ needs and goals and ensure good user experience.
Going in depth with the empathy maps and needs analysis organized the information provided and allowed us to more easily and effectively hit every need.
Although I am becoming more used to implementing animation to my designs from previous projects, I feel as though focusing more on animation this project made me more aware of how greatly animation affects the user experience.
Researching varying design methods and techniques, especially for data and dashboards, made me more insightful to really strengthen the design and engage the user.
What Could Go Wrong:
Problematic student listeners can distract the instructor with unnecessary comments in the general comment section.
Student listeners can become lazy and not utilize the optional additional message function, and only use the mandatory rating system. This would cause the quality of the feedback to decrease.
