Dashboard to track and monitor student feedback during in-class presentations.

Dashboard Design | November 2020 (3 weeks)

**My Role**

UX Designer

Interaction Designer

Storyteller

Tools

Figma

Principle

Google Slides

Team

April Wu

Bingjie Sheng

Nancy Zuo (me)

Problem

Focusing during in-class presentations is hard.

Cell phone notifications and different tabs open on a computer combined with an already limited attention span make it difficult for students to listen attentively to class presentations.

How might we design a dashboard to incentivize student input, monitor feedback, and keep students focused?

Our Solution

iFocus is a dashboard that keeps students focused on class presentations ****by keeping them engaged in providing feedback throughout the presentation. It allows teachers to monitor student focus and gain a snapshot of the focus level of the class, and student presenters to aggregate feedback from the class to gain insight into methods that would improve their presentation.

👉 view final process book

Personas

We began our research by analyzing three personas: student listener Frank Tan, student presenter Joanna Blaine, and Game Design class instructor Alanna Rodriguez. We sought to understand the needs, and analyze the commonalities between them to create a focus point for our dashboard design.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a3f091fa-2f53-498f-90a4-907b4f0d0c7f/Screen_Shot_2020-12-29_at_12.27.16_PM.png

Concept Sketches

After synthesizing our findings, we created concept sketches of an instructor and student dashboard that focused on meeting the needs of all three parties. For this sketch, I focused on having a timeline to record the time of each comment, so viewers are able to easily access the timing of each comment.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3e08a461-af4f-4861-8cba-51895f1a0227/IMG_0642.jpg

In the instructor view, the graphical measures help the instructor gain a snapshot of the class and their activity. The status of the students allows the instructor to easily notify students to pay attention to the presentation when they lose focus.

In the student view, students are able to track their tasks and give feedback on the presentation. There is less information on the dashboard to allow students to keep their attention on the current presentation.

Low Fidelity Wireframes

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7e437083-948c-4625-99d4-f273c9ac8008/Color_Instructor.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/40a861a4-a859-42fa-a0ec-88738736942e/Color_Listener_2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9ea9c6e3-5e09-4a3d-a8bd-24fffa8084af/Color_Listener_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/54f31cf2-9fcb-4dc0-90df-38be78828691/Color_Listener_3.png

Adding Color

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/61f060d6-36ab-4ce1-9529-26b451606593/Screen_Shot_2021-01-05_at_8.53.44_PM.png

For the color palette, we drew inspiration from Dribbble, and looked at different color choices that we liked from other dashboard designs. We sought to find a color palette that would reflect the mood of a classroom setting, with contrasting colors that could be used to highlight important aspects on the dashboard.

We did some experimentation with the color palettes to assess the fit, and eventually went with one cool color and two warm colors. We decided to go with these three colors because the green color has a good contrast with the brighter red and yellow colors. The balance of soft and loud colors would allow us to use the colors to highlight specific parts of the dashboard to draw the teacher or listener’s attention.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0b0c67ad-37f2-4c6c-b0e8-a681b7a1cbae/Screen_Shot_2021-01-05_at_8.56.58_PM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e92425a2-f62f-432e-b7a1-96fe4201bdfc/Color_Instructor_(1).png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b26a6acb-9cb4-4394-a5fe-872b2c6a2d9f/Color_Instructor_(2).png