Prototyping

Storyboarding

This is the initial start of the prototyping process, where we use storyboarding to represent our initial ideas of the website. We thought account authentication could be a good way for users to keep track of their listening skills. The welcoming page after the user logins gives the user some time to begin watching the video. While the user watches the video, the user is being recorded with OpenFace to track the user's facial expressions. Then the results are displayed for the user on whether their facial gestures are attributes of being a good listener.

Invision Studio Wireframe

This is our second part of the prototyping process, where there is an emphasis in functionality. The main point of utilizing the Invision Studio Wireframe is to showcase how the website functions and how the user navigates throughout the website.

What We Ended Up With

We could not test this third iteration of the prototype because we had a difficult time connecting the front end and back end. So, we ended up with a separate front-end portion and separate back-end portion. Connecting between the two was more difficult than we realized. We could not figure out how to record the user while the user watches the video and send that recording to OpenFace on a server, and get the results from OpenFace to be displayed to the user interface. Overall, we found it challenging.

You can view the source code for our project here: https://github.com/diarrabell/ListeningBot/

While we did not have time to complete integrating OpenFace, the source code is based off the OpenFace web demo: https://github.com/cmusatyalab/openface/tree/master/demos/web