Embedded Files
Project Description
Project Description
Due to COVID-19, the University of Rochester's administration decided in early Fall 2020 to prohibit painting in UR's iconic painted tunnel. The Virtual Painted Tunnel was created in a response to this decision, to recreate the social significance of a collective artistic space without any of the dangerous constraints that come with packing hundreds of students into a tiny underground tunnel during a global pandemic. An additional benefit of a virtual platform is the increased opportunity for accessible information, such as image descriptions and links to club pages. This project utilizes an HTML canvas paired with Jusuf Sezer's javascript-canvas-painting module to record users' drawn images, and an SQLAlchemy databse for storing user, image, and organization data.
Low-Fidelity Prototype
Low-Fidelity Prototype
Storyboard
Storyboard
User Flows
User Flows
Login/Register
Login/Register
User opens the web application
User clicks account button, where they have the option to log in with an existing account or register for a new one
User enters their email address, username, and a password.
They click submit and are now registered and able to paint.
Painting/Publishing an Image
Painting/Publishing an Image
User opens web app and clicks into draw mode
User creates image, and can change stroke color and stroke width
User clicks the submit button and adds an image description.
User chooses to affiliate their drawing with an organization from the ones they are affiliated with on campus.
User clicks submit button and publishes their image.
Gallery View
Gallery View
User opens application.
User clicks on gallery view button
User scrolls through the gallery of published images and can read different descriptions of these images.
User clicks on image to find out more.
Working Prototype
Working Prototype
Demonstrating User Flows
Demonstrating User Flows
login.mp4Login/Register
Login/Register
gallery.mp4Painting/Publishing an Image
Painting/Publishing an Image
gallery.mp4Gallery View
Gallery View
Demo Video
Demo Video
CSC211.mp4Evaluation Highlights
Evaluation Highlights
Goals: Evaluate usability, effectiveness, and intuition of the Virtual Painted Tunnel
2/3 of our users said they would return to our app in the future
2/3 of our users said they would return to our app in the future
Positive Feedback - What do our users like?
Positive Feedback - What do our users like?
These are direct quotes from our users during the evaluation process.
“Simplicity of design: the drawing/design features were easy to use and understand; it was easy to make and navigate away from the "art" without destroying/losing it.”
“I like how other students' images are visible to all viewers, regardless of if they're a student of the university or not”
Things to Work On - How can we improve?
Things to Work On - How can we improve?
Provided are what users would like to see changed and how we plan to satisfy their needs.
User responses:
User responses:
“I had a little bit of trouble saving the artwork and had to click around a bit.”, “Because one of the steps was to save the image, it would be helpful to have a save image button, but for a user that doesn't have those instructions I think it was great!”
Our Response:
Our Response:
We could add labels to the buttons, as the logos may not be as intuitive as we might’ve thought. This would also help with accessibility concerns.
User response:
User response:
“The drawing functionality could use some more features. Drawing on a computer with a mouse is already difficult; it can be frustrating working with such basic tools”
Our response:
Our response:
We could add support for Wacom tablets and touchscreen devices such as iPads and smartphones.
Page updated
Report abuse