Conference Poster & Supporting Material

Poster

Brochure

'Scannable' Student Writing Sheets

Short Pitch Outline

DigiLit is a piece of classroom-based social technology that benefits both teachers and students. Students scan in their handwritten responses to questions or a class discussion, and those responses are posted to the social feed using handwriting detection. The system also provides an engaging way for students to work and learn, and incentivises good work, while also subtly teaching them the benefits, downfalls, and best use of social media. For teachers, it allows them to set and organise a much more responsive and effective teaching method when compared to conventional methods such as lecturing or worksheets.

Prototype

Prototype Link

To view the completed final prototype click here.

Instructions of Use

Note:

The prototype is designed to be run on a specific setup (see the Showcase section), with a laptop and a monitor acting as the teacher and student sides of the system interaction, respectively. It will still function on a normal setup, but it will be oddly spaced and horizontally scrollable.

Student's Instructions:

1. Write/Pick a message in response to the question presented on the screen.
2. Insert the message into the scanner.
3. Agree to uploading the message to Digilit.
4. Interact with other students messages by starring posts on the public display screen.

Teacher's Instructions:

1. Read through, like posts and interact on the laptop screen.
2. Turn on approval mode, where the user can approve or decline messages uploaded to Digilit.
3. Add new subjects or topics that student's can respond to.

For the Prototype:

1. Press 1, 2, 3, 4, and/or 5 on the keyboard to bring up the "confirm post" popup on the far right side.
2. Click ok to submit the post(s).
3. Once posts are in the teacher's approval screen (far left side):

• Approve the post with the green tick on the teacher's view (far left side) to move the post to the public screen (screen on the right) or...
• Decline the post with the red cross and enter a message saying why the post was deleted. This will send a form to an email address or...
• Toggle the review switch to move all posts in the teacher's view to the public display board.
• Interact with posts by pressing the star button.
• Navigate the tabs and input a question relevant to that class.

Summary

Problem Space

The problem space established by the group was teaching teacher's to education students around being responsible online. Digilit does this with the target audience of kids from 7-11, this age has been established because of research conducted that said kids usually discover social media around the age of 12. Our project hopes to establish responsible interactions on social media before the students have the chance to access it for themselves. It does this by allowing students to post to a forum like website and speak their minds in a safe learning environment. Teacher's have their own interactive screen that can monitor the student's comments, they can also enable deleting comments if they see something inappropriate. The teacher can then send a message to the student over email explaining why the comment was deleted. This gives the students the freedom to post anything like social media does, however our prototype has an educational barrier to help children understand that online is public information.

Process

The team used an iterative design process on the DigiLit project, with an ongoing cycle of Designing, Prototyping, Evaluating, and Analyzing. The following sections chronicle each stage of this process, showing what design elements changed between each prototype, and the research that was evaluated and analyzed to lead to these changes.

Requirements Gathering and Research

A summary of the domain and problem space can be seen in the proposal document. The summary of findings as part of requirements gathering can be seen here, and the raw responses can be seen here (access will need to be requested.)

Brainstorming Ideas/Sketches

After forming around the domain and problem space, the team began to brainstorm potential elements of a design that could address these issues. Early on, taking the design in the direction of tangible computing within the classroom was an interest. As the idea began to grow and take shape, rough sketches were drawn up (see Wireframes), and a text-based UML/system description was written to help solidify the teams understanding of the interaction flow and highlight any issues (see UML Guide).

A/B Testing UI wireframes

Two wireframes were tested to decide on the best interface for DigiLit. The following wireframes were used for the testing session:

Option A Option B

From A/B testing, it was discovered that option B was the preferred interface, however aspects of option A were incorporated into the design, such as the coloured tabs and the logo. The settings icon and account icon were also included in the design so that the teacher could change the settings, manage the students' barcodes, edit their names, flag, or delete a user. The iterated wireframes can be seen in wireframes.

Low Fidelity Digital Prototype

The low fidelity prototype was created in marvel and can be seen here: https://marvelapp.com/35fbb83 The questions asked, general results, and changes implemented from the user testing session can be found here. The raw results can be found here (access will need to be granted.)

High Fidelity Digital Prototype

The high fidelity prototype was created in HTML, CSS and JavaScript. The user testing tasks, questions and general responses can be seen here. All the responses can be seen here (access will need to be granted.)

• Delete was changed to submit
• Picture posts for younger children
• Handwriting may be messy and therefore not recognised, however this is intentional in the design, as it would improve the children's handwriting skills

Showcase

Showcase setup

While the showcase was a time to show off the work TeamTeamyTeam had put into DigiLit over the semester, it was also an opportune time to gather one last round of user feedback. While no strict testing process was followed, most users interacted with the system in the intended way (Steps 1 - 4 shown above). Overall, feedback was very positive and served to reinforce the changes made to the system based on previous user requirements. Importantly, we gained feedback from a Research and Schools Outreach Officer, who gave us the first-hand classroom insight that we'd struggled to test on during the semester, and praised the safe-space/social media training wheels elements of the design. While there was no negative feedback towards the design, testers gave us various factors to consider including analysing the real-world effects of specific DigiLit interactions on a larger scale, and considering the implementation of anonymity, drawing posts, and comment threads.

Limitations

The main limitations for this project were accessing the target users and time constraints. User testing had to mostly be done with the general public rather than the intended users of teachers and students. Feedback was received from two people who would have a real life application for this project, and while this feedback was very valuable, it would have been favourable to have more testing sessions with the intended users. The time constraints also meant the project had to be hardcoded and therefore not have the amount of interaction we would have liked. The prototype, however, was definitely sufficient for demonstrating how the system would work.

Future Considerations

Future considerations are potential elements of DigiLit that cropped up over the semester but lacked either the design or testing resources to be feasibly implemented into the final prototype. Nevertheless, for theoretical future iterations of the system, these elements are worth investigating.

Expanding upon the tangible interaction of the design, written posts could be joined by drawing posts that allow artwork or diagrams instead of just handwriting. This would add picture posts to DigiLit and increase the diversity of content allowed on the platform.

Expanding upon the social media aspects of the design, depth could be added in a multitude of ways. This includes allowing responses/comments on posts, adding different emotion reacts instead of just likes/stars, and adding badges for students who have received a certain amount of likes across their posts to reward positive engagement with the system.

Distribution of Work

Zoe Arnold

• Proposal/Team Charter Documentation
• Documentation on Wiki
• Basic design elements (logo/mock-ups/wireframes)
• Construction of physical prototype ("the scanner")
• Conducting and Summarizing User Testing Research
• Content for Poster and Promo materials

Kate Edwards

• Proposal/Team Charter Documentation
• Conducting User Testing
• Gathering Requirements
• Coding the Prototype
• Documentation on Wiki
• Developing secondary prototype for User Testing (Round 2)

Max Cartwright

• Proposal/Team Charter Documentation
• Basic Design Elements (mock-ups and wire frames)
• Designing Poster and Promo materials
• Content for Poster and Promo materials
• Documentation on Wiki
• Developing original prototype for User Testing (Round 1)

Aiden Taylor

• Proposal/Team Charter Documentation

References

Miedinger, M. and Hoffman, E. (1961). Helvetica® font family | Linotype.com. [online] Linotype.com. Available at: https://www.linotype.com/1308886/helvetica-family.html.

DiAngelo, M. (2013). Blop Sounds | Effects | Sound Bites. [online] Soundbible.com. Available at: http://soundbible.com/2067-Blop.html [Accessed 23 Oct. 2018].

Qr Code Generator. (2018). [online] Available at: https://www.qr-code-generator.com/ [Accessed 19 Oct. 2018].