[x] Improve touchscreen/teleprompter user experience

[amberreeves]

Finding: Most users focused their eyes on the touchscreen and were not immediately aware that the teleprompter above was part of the experience. As they tapped through the first couple of screens on the touchscreen, they did not realize the content on the teleprompter was changing. One visitor acknowledged the teleprompter once they reached the first question screen and looked for additional context. In all instances, once we explained to users that they had to look up to interact with both the teleprompter and the touchscreen, they were able to easily move through the rest of the experience.

Improvement options

• Use timed animation throughout the experience to draw the visitor’s eye back up to the teleprompter screen. For example, we will fade in the content on the teleprompter screen before the touchscreen to trigger users to look up.
• Add an instructional prompt to the beginning of the experience to indicate to visitors to use both screens for the experience.
• Add a reminder to the touchscreen to indicate to visitors to look up at the teleprompter during critical steps, such as answering questions or watching the instructional animation.

[amberreeves]

let's start with this one and the audio and see how it goes

Use timed animation throughout the experience to draw the visitor’s eye back up to the teleprompter screen. For example, we will fade in the content on the teleprompter screen before the touchscreen to trigger users to look up.

[strangemodern]

I'm using react-transition-group for this. Ran into a bug, but should work pretty seamlessly.

[strangemodern]

Scratch that, just a simple css transition on the teleprompter and touchscreen divs.