CU Boulder Instructor Touch Panels
CU Boulder Instructor Touch Panels
A redesigned interface for 300 touch panels at the University of Colorado Boulder with a focus on streamlining alert resolution for instructors while teaching
A redesigned interface for 300 touch panels at the University of Colorado Boulder with a focus on streamlining alert resolution for instructors while teaching
Client
Client
CU Boulder Learning Spaces Technology Team
CU Boulder Learning Spaces Technology Team
Platform
10-inch Crestron touch panels
10-inch Crestron touch panels
Duration
5 months
5 months
My Role
Content Strategist and UX Designer
Content Strategist and UX Designer
Team
Me
Senior UX Designer
Senior UX Researcher
Project Manager
Me
Senior UX Designer
Senior UX Researcher
Project Manager
Background
Background
Learning Spaces Technology at CU Boulder
Learning Spaces Technology at CU Boulder
The Learning Spaces Technology (LST) team maintains and supports over 300 technology-equipped classrooms at the University of Colorado Boulder. Each of these classrooms contains a Crestron touch panel, used by instructors to present content on classroom displays, manage audio on classroom microphones, and record lectures for distribution to students.
The Learning Spaces Technology (LST) team maintains and supports over 300 technology-equipped classrooms at the University of Colorado Boulder. Each of these classrooms contains a Crestron touch panel, used by instructors to present content on classroom displays, manage audio on classroom microphones, and record lectures for distribution to students.
Problem
Problem
Instructors struggled to resolve touch panel alerts and the LST team was being inundated with urgent support requests
Instructors struggled to resolve touch panel alerts and the LST team was being inundated with urgent support requests
Prior to the start of this project, the LST team implemented a set of touch panel alerts (along with an alarm sound) to notify instructors if their classroom microphones have low battery, are powered off, or are muted during recorded lecture periods. However, many instructors could not get their microphones working properly in order to resolve the alerts and would request help from LST's support staff during lectures.
Prior to the start of this project, the LST team implemented a set of touch panel alerts (along with an alarm sound) to notify instructors if their classroom microphones have low battery, are powered off, or are muted during recorded lecture periods. However, many instructors could not get their microphones working properly in order to resolve the alerts and would request help from LST's support staff during lectures.
Existing alert design
Existing alert design
I feel like there's a lot going on, and I'm not quite sure what I should focus on. I can see that I have one alert, but like what's my alert? So it says one alert, but then I see three things. I'm not really sure what the problem is.
I feel like there's a lot going on, and I'm not quite sure what I should focus on. I can see that I have one alert, but like what's my alert? So it says one alert, but then I see three things. I'm not really sure what the problem is.
With the goal of creating a better teaching experience for instructors and alleviating the strain on their support staff, the LST team consulted my team (CU Boulder User Experience Research & Design Team) to take a user-centered approach in improving the touch panel experience.
With the goal of creating a better teaching experience for instructors and alleviating the strain on their support staff, the LST team consulted my team (CU Boulder User Experience Research & Design Team) to take a user-centered approach in improving the touch panel experience.
Heuristic Evaluation
Heuristic Evaluation
Building familiarity and identifying design opportunities
Building familiarity and identifying design opportunities
Having never used the touch panels, I visited a classroom on campus with my team, where I simulated each alert and reviewed relevant screens through a heuristic evaluation. I began building familiarity with the touch panel system while identifying opportunities for usability improvements.
In reviewing the existing alerts, I identified 4 main problems.
In reviewing the existing alerts, I identified 4 main problems.
Information overload
Information overload
The alerts are cluttered and text-heavy, making it hard for instructors to quickly read and understand the issue. The layout makes it seem like there are 3 alerts going on at once.
The alerts are cluttered and text-heavy, making it hard for instructors to quickly read and understand the issue. The layout makes it seem like there are 3 alerts going on at once.
💡
How might we streamline the alert copy and layout to maximize readability?
How might we streamline the alert copy and layout to maximize readability?
Unclear path to resolution
Unclear path to resolution
In order to resolve some alerts, instructors must navigate to a Microphones page, but the navigation menu is disabled and instructors may not understand where to go next.
In order to resolve some alerts, instructors must navigate to a Microphones page, but the navigation menu is disabled and instructors may not understand where to go next.
💡
How might we reduce the number of steps needed to resolve alerts?
How might we reduce the number of steps needed to resolve alerts?
Poor use of color
Poor use of color
Colors such as yellow and red are used inconsistently and do not bring attention to the most important elements of the interface that might help instructors to resolve alerts.
Colors such as yellow and red are used inconsistently and do not bring attention to the most important elements of the interface that might help instructors to resolve alerts.
💡
How might we use color to better direct instructors towards alert resolution?
How might we use color to better direct instructors towards alert resolution?
Distracting elements
Distracting elements
Elements of the user interface such as the weather and the large red “EXIT” arrow can be distracting to instructors who are trying to understand the issue.
Elements of the user interface such as the weather and the large red “EXIT” arrow can be distracting to instructors who are trying to understand the issue.
💡
How might we remove elements to bring focus towards the alerts?
How might we remove elements to bring focus towards the alerts?
UX Research
UX Research
Assessing the existing touch panel experience through an instructor survey
Assessing the existing touch panel experience through an instructor survey
After sharing our findings with the client, it was important to hear from instructors to see if their concerns matched up with the issues found during our heuristic evaluation. Because many instructors were on summer break during this project, I worked with our senior UX researcher and project manager to craft an online survey that would elicit more responses from instructors.
The survey was completed by 64 instructors who teach in large lecture halls. 2/3 of respondents had received touch panel training or had more than 4 semesters of experience using the existing touch panel system.
After sharing our findings with the client, it was important to hear from instructors to see if their concerns matched up with the issues found during our heuristic evaluation. Because many instructors were on summer break during this project, I worked with our senior UX researcher and project manager to craft an online survey that would elicit more responses from instructors.
The survey was completed by 64 instructors who teach in large lecture halls. 2/3 of respondents had received touch panel training or had more than 4 semesters of experience using the existing touch panel system.
With an experienced group of respondents, touch panel ratings looked good...
With an experienced group of respondents, touch panel ratings looked good...
How would you rate your overall experience teaching using the touch panel in a large lecture classroom?
How would you rate your overall experience teaching using the touch panel in a large lecture classroom?
...but qualitative comments revealed that these positive responses may have been coming from a place of familiarity rather than from a simple and easy-to-use interface.
...but qualitative comments revealed that these positive responses may have been coming from a place of familiarity rather than from a simple and easy-to-use interface.
Too many options but once familiarized, I generally stay in that lane. Simplification is lacking.
Too many options but once familiarized, I generally stay in that lane. Simplification is lacking.
Confirming my heuristic evaluation findings, instructors found the touch panel interface to be overwhelming and in need of simplification. We needed to reduce the learning curve for new instructors while being careful not to disrupt the touch panel system that experienced instructors had become familiar with.
Confirming my heuristic evaluation findings, instructors found the touch panel interface to be overwhelming and in need of simplification. We needed to reduce the learning curve for new instructors while being careful not to disrupt the touch panel system that experienced instructors had become familiar with.
Despite a good overall experience with the touch panels, instructors expressed clear struggles with understanding and resolving alerts.
Despite a good overall experience with the touch panels, instructors expressed clear struggles with understanding and resolving alerts.
I have a good experience when it goes well, but I recently had two warning notices come up while teaching. I could not figure out how to resolve them…After class, I figured out that they had something to do with the handheld microphone…But in the midst of things, I had no information from the touchscreen on what to do.
I have a good experience when it goes well, but I recently had two warning notices come up while teaching. I could not figure out how to resolve them…After class, I figured out that they had something to do with the handheld microphone…But in the midst of things, I had no information from the touchscreen on what to do.
After discussions with the client, our research insights ultimately led us to propose 3 areas of focus:
After discussions with the client, our research insights ultimately led us to propose 3 areas of focus:
1
Streamline the copy and design of the 10 existing alerts
Streamline the copy and design of the 10 existing alerts
2
Simplify the touch panel interface
Simplify the touch panel interface
3
Make microphone controls more visible
Make microphone controls more visible
Design Iterations
Design Iterations
Exploring focus areas with client feedback
Exploring focus areas with client feedback
With limited time to deliver designs to the client before the start of the fall semester, I jumped right into high-fidelity mockups with our senior UX designer. We worked on a regular basis with the client’s AV engineer to ensure the technical feasibility of designs and provided bi-weekly design presentations to the larger client team to gather feedback upon each iteration. Here are some of the many design ideas that we explored:
With limited time to deliver designs to the client before the start of the fall semester, I jumped right into high-fidelity mockups with our senior UX designer. We worked on a regular basis with the client’s AV engineer to ensure the technical feasibility of designs and provided bi-weekly design presentations to the larger client team to gather feedback upon each iteration. Here are some of the many design ideas that we explored:
Alert variations
Alert variations
Simplified user interface
Simplified user interface
More visible microphone controls
More visible microphone controls
Usability Testing
Usability Testing
Validating designs with 5 large lecture hall instructors
Validating designs with 5 large lecture hall instructors
With the client’s input, we narrowed down our ideas to the most promising designs. I then validated these designs by leading 1-1 usability testing sessions over Zoom with 5 large lecture hall instructors across a variety of academic departments.
With the client’s input, we narrowed down our ideas to the most promising designs. I then validated these designs by leading 1-1 usability testing sessions over Zoom with 5 large lecture hall instructors across a variety of academic departments.
Instructors preferred fullscreen alerts over those that cover only part of the screen
Instructors preferred fullscreen alerts over those that cover only part of the screen
3 out of 5 instructors preferred the fullscreen alert design. The client also felt that this design would better encourage instructors to resolve alerts before interacting with the Source Selection screen.
3 out of 5 instructors preferred the fullscreen alert design. The client also felt that this design would better encourage instructors to resolve alerts before interacting with the Source Selection screen.
Instructors preferred for multiple alerts to be displayed on one screen
Instructors preferred for multiple alerts to be displayed on one screen
All instructors preferred for multiple alerts to be shown on one screen. This format made it easier for instructors to understand all issues at a glance without having to click through multiple screens.
All instructors preferred for multiple alerts to be shown on one screen. This format made it easier for instructors to understand all issues at a glance without having to click through multiple screens.
Instructors found contextual pop-up alerts to be redundant and unnecessary
Instructors found contextual pop-up alerts to be redundant and unnecessary
Though we felt that these contextual messages might better direct instructors towards alert resolution, most instructors found them to be redundant and unnecessary. We decided to scrap this idea and stick with the fullscreen alerts.
Though we felt that these contextual messages might better direct instructors towards alert resolution, most instructors found them to be redundant and unnecessary. We decided to scrap this idea and stick with the fullscreen alerts.
The microphones menu helped instructors resolve alerts faster
The microphones menu helped instructors resolve alerts faster
With the addition of the All Microphones menu, instructors were more easily able to resolve alerts. They enjoyed having more control and visibility over the classroom microphones.
With the addition of the All Microphones menu, instructors were more easily able to resolve alerts. They enjoyed having more control and visibility over the classroom microphones.
Final Designs
Final Designs
Streamlined fullpage alerts
Streamlined fullpage alerts
With instructors not always standing at the podium while teaching, fullscreen alerts with high contrast best caught the attention of instructors during usability testing. By redesigning the existing fullpage alerts and writing more concise alert copy, I was able to remove clutter and better direct instructors towards alert resolution without disrupting instructor familiarity with the fullpage design pattern.
With instructors not always standing at the podium while teaching, fullscreen alerts with high contrast best caught the attention of instructors during usability testing. By redesigning the existing fullpage alerts and writing more concise alert copy, I was able to remove clutter and better direct instructors towards alert resolution without disrupting instructor familiarity with the fullpage design pattern.
Before: Single Alert
Before: Single Alert
After: Single Alert
After: Single Alert
When there are multiple system alerts at once, instructors did not like having to click through multiple pages to understand what is going on. The new design allows instructors to see all alerts at a glance so they can quickly and easily resolve them.
When there are multiple system alerts at once, instructors did not like having to click through multiple pages to understand what is going on. The new design allows instructors to see all alerts at a glance so they can quickly and easily resolve them.
Before: Multiple Alerts
Before: Multiple Alerts
After: Multiple Alerts
After: Multiple Alerts
Simplified user interface
Simplified user interface
By designing new components with our senior UX designer, I was able to simplify the user interface in the top and bottom control bars. These elements use color more consistently to keep instructors informed about the status of the classroom (microphones, classroom recording, input source, etc.), using orange to direct the eye towards alert resolution.
By designing new components with our senior UX designer, I was able to simplify the user interface in the top and bottom control bars. These elements use color more consistently to keep instructors informed about the status of the classroom (microphones, classroom recording, input source, etc.), using orange to direct the eye towards alert resolution.
New components
New components
Before: Top and bottom control UI
Before: Top and bottom control UI
After: Top and bottom control UI
After: Top and bottom control UI
Visible microphone controls
Visible microphone controls
The existing Microphones page, needed to resolve some of the alerts, was hidden behind the touch panel navigation menu and was infrequently used by instructors. With the new microphone expander in place, instructors have precise control over all classroom microphones and can resolve alerts in fewer clicks.
The existing Microphones page, needed to resolve some of the alerts, was hidden behind the touch panel navigation menu and was infrequently used by instructors. With the new microphone expander in place, instructors have precise control over all classroom microphones and can resolve alerts in fewer clicks.
Before: 4 clicks to resolve alert
Before: 4 clicks to resolve alert
1
Dismiss alert
Dismiss alert
2
Open menu
Open menu
3
Go to Microphones page
Go to Microphones page
4
Unmute a microphone
Unmute a microphone
Alert resolved
Alert resolved
After: 2 clicks to resolve alert
After: 2 clicks to resolve alert
1
Open All Microphones expander
Open All Microphones expander
2
Unmute a microphone
Unmute a microphone
Alert resolved
Alert resolved
Results
Results
Phased implementation across 300 large lecture hall touch panels
Phased implementation across 300 large lecture hall touch panels
With classes back in session, the LST team plans to implement the new designs on one classroom touch panel so they can make sure that everything works properly with continued feedback from instructors. Assuming all goes well, the designs are set to be implemented on more than 300 large lecture hall touch panels across CU Boulder’s campus.
Though I was not with my team long enough to see the implementation of our proposed design solutions, I believe that the success of these touch panel changes could be assessed based on the following metrics:
• Increase in touch panel system usability scale (SUS) score
• Decrease in instructor support requests
• Reduced time to resolve alerts
With classes back in session, the LST team plans to implement the new designs on one classroom touch panel so they can make sure that everything works properly with continued feedback from instructors. Assuming all goes well, the designs are set to be implemented on more than 300 large lecture hall touch panels across CU Boulder’s campus.
Though I was not with my team long enough to see the implementation of our proposed design solutions, I believe that the success of these touch panel changes could be assessed based on the following metrics:
• Increase in touch panel system usability scale (SUS) score
• Decrease in instructor support requests
• Reduced time to resolve alerts
Reflections
Reflections
Share work early and often
Share work early and often
By working with LST’s AV engineer and providing bi-weekly presentations to the client, we were able to avoid going down a rabbit hole with design directions that would not be technically feasible on the touch panels. Our design process was made more efficient by gathering frequent feedback from the client and weighing their recommendations alongside those of instructors.
By working with LST’s AV engineer and providing bi-weekly presentations to the client, we were able to avoid going down a rabbit hole with design directions that would not be technically feasible on the touch panels. Our design process was made more efficient by gathering frequent feedback from the client and weighing their recommendations alongside those of instructors.
Avoid scope creep
Avoid scope creep
With a tight timeline on the project, there were times where the scope of our ideas became too large for the client, and we were forced to let go. This project improved my ability to decipher the most important improvements that need to be made in order to meet client deadlines while still providing an excellent user experience.
With a tight timeline on the project, there were times where the scope of our ideas became too large for the client, and we were forced to let go. This project improved my ability to decipher the most important improvements that need to be made in order to meet client deadlines while still providing an excellent user experience.
Transparency is key
Transparency is key
At the start of the project, the LST team was reluctant to adopt our human-centered design process. Though we were forced to cut out some steps due to a tight timeline, we made sure to keep their team involved in each step while informing them on what’s to come. Our transparency led many members of the LST team to see the benefits of designing with and for their end users, making them more likely to continue using human-centered practices in their future projects.
At the start of the project, the LST team was reluctant to adopt our human-centered design process. Though we were forced to cut out some steps due to a tight timeline, we made sure to keep their team involved in each step while informing them on what’s to come. Our transparency led many members of the LST team to see the benefits of designing with and for their end users, making them more likely to continue using human-centered practices in their future projects.
More Projects
Empowering undergraduate students to seek academic support
A new feature for the University of Colorado Boulder’s student portal that matches students with free tutoring and learning resources provided by the university
A new feature for the University of Colorado Boulder’s student portal that matches students with free tutoring and learning resources provided by the university
Simplifying prescription processes for university pharmacy patients
A mobile app that enables patients of the University of Colorado Boulder’s on-campus pharmacy to manage, fill, and track their prescriptions with ease
A mobile app that enables patients of the University of Colorado Boulder’s on-campus pharmacy to manage, fill, and track their prescriptions with ease