Alpha Prototype

1. Design Evolution

Based on the formative feedback we have received, we made several main modifications to our computer prototype:

1. Clearer emojis

A few users were confused by what the 🙈, 🙉,🙊 emojis in the reaction panel. Users were not able to recognize that those emoticons were for signalling audio/visual errors. Hence, we have decided to use custom icons rather than emoticons to remediate to this situation. We replaced the ambiguous monkey emoji with clearer icons:

Similarly, our design team noticed that some of the emojis that were available in the reaction panel were redundant. For example, it might be difficult for the presenter to interpret if some participants use ❌ and others use 👎 for a same given question (or ✅ and 👍). We hence decided to just keep the thumbs-up/thumbs-down emojis to avoid ambiguities in the participants’ reactions.

2. Graph labels

Users had a hard time understanding what graphs meant. One way we address this is by including more labeling for our graphs, such as titles and axis labels.

3. Bigger font

The evaluating team observed that certain users were squinting when interacting with the computer prototype. In the alpha system, the font size has been increased to a minimum of 16px to ensure that all text is visible and readable for all types of users.

4. Feature labeling

Another concern raised by the testing is the “Question Queue” wording. Users didn’t automatically associate asking a question to raising their hand as some prefer to ask their questions in the chat. We decided to rename the “Question Queue” to the “Raised Hand Queue” to not cause any confusion.

5. Simplify graphs

Finally, we decided to simplify the ‘level of understanding’ graph to make it easier to code up. Initially, we were planning to have participants rate their level of understanding in a continuum and the graph will show the aggregate distribution of all participants' reactions. We decided to switch this to a histogram, where each participant can move the cursor to a discrete value.

Missing functionality

In order to properly assess our prototype, one should keep in mind we have yet to implement the following features:

Error handling and Undo

We hope to have more “undo” options, and confirmations on certain

Collapsible UI

In order to reduce cognitive load, we hope to hide all our main features (level of understanding, reactions, etc) in collapse sections. This way users aren’t so overwhelmed when they first open the app.

Meeting room functionality

Meeting IDs are not hooked up, it only supports one global meeting room. This will need to be changed.

Removing participants from queue (individual and clear)

From the presenters point of view, the ability to remove people from the queue or clear the queue are not implemented.

Emoji reaction not connected to the back end

Emojis are under developed and not connected to the backend

Deselecting emojis should remove a data point in reactions graph

Currently, the user is only able to deselect in the reaction panel. The graph is updating with respect to clicks rather than the selection.

Reactions expiry Emoji

Reactions expiry Graph

Reactions do not expire after a certain interval of time but will in the final product. This also applies to the level of understanding responses which should expire after 10 seconds.

A/V problem error message

Program displays a small error message when enough participants emote with the can’t hear or can’t see icon to notify the presenter of A/V problems.

Who online’s tab

A list of online users will be displayed in a separate tab, next to the chat’s UI.

Click on bar graph

The ability to “vote” on an emote of level of understanding bar by click on the bar in the graph

Styling

We will improve the consistency and the level of contrast of the different UI elements to ensure all text is readable and accessible to all target users.

2. Prototype Revisions

Note: the web-app has evolved since this page was written so the following link directs to the latest version, to view the alpha version UI, please refer to the screenshots on the user manuals down below
Please navigate Here!

3. Refinement of user manual

Presenter User Manual
Participant User Manual