A website that connects students with their peers and their instructors. It streamlines your workflow.
Goal: Design and develop a web application that integrated Piazza and Autograder
Date: Dec 2016 - Present
Skills: UX Design, Interaction Design, Prototyping, Usability Testing, Web Development
Role: UX Design Lead, Front-end Developer
Team: Cross-functional team of 2
Overcome the frustrating scenario
Imagine this scenario: Allen is a 1st year at UC San Diego, where he is studying Computer Science. Once he encountered a bug in his code. As a freshman, he did not know what to do with it. Thus, he emailed the professor to see if he could do anything about his bug. The professor told Allen to go to the CSE Lab and seek help from TAs and Tutors. Allen was asked to 'submit a ticket' on Autograder. Then a tutor found him and tried to solve his problem. However, the tutor could only spent 5 mins on each student. He was not able to figure out what was going on. The tutor then asked Allen to 'make a post' on Piazza. After 8 hours, Allen got a feedback on Piazza. The instructor asked Allen to go to the CSE Lab and seek help from TAs and Tutors.
connect has you covered
This web application is going to make the everyday struggle of getting help in the lab, holding an office hour and interacting with other people after class at UC San Diego a better experience. Connect will make the user more productive and less stressed.
We created some mockups of the application's interface. We are now in the process of implementing the functionalities of the website.
The following prototype was created with Sketch and depicts the look of our web app. We reached to consensus for a style guide of specific styles, font weights, color schemes, and secondary color schemes. We wanted to keep a consistent styling for the actual UI implementation.
Add/join a class in 3 seconds
The instructor will be able to add a class while the student will be able to join a class. The instructor only needs to name a class and then click add. A chat room will be created with some default channels and the invitation code will be generated. The student only have to enter the invitation code as to join the class.
everything in one place
Public Channels: Channels for projects and group that are open to anyone in the class. Messages in these channels are accessible by search.
Private Channels: For more sensitive or private topics, private channels keep conversation contained to an invited group. The instructor will be able to hold a remote discussion here. The student will be able to secure a spot during the lab hour to get help.
Direct Messages: One-to-one small group messaging adds flexibility around more focused conversations. the student will be able to post their codes for inspection here.
help everyone find the answer they need
The student does not have to go every course website to stay informed. Connect builds a searchable archive of the conversations and notifications. Also, the information of the instructors will be shown.
Plan to add: Adding the office hour to one's calendar in one click by using Google's APIs.
Plan to add: Adding a emoji reaction to the message. The instructor will be able to check off a student by marking a check on the message.
Since we do not have a database, we have to use the send button for messages to avoid refreshing the page. As the project continues, more cool functions will be added. :)
I would like to change a few aspects if we have more time. The project is still ongoing, but we may not be able to finish all the implementation parts.
I value empathy in every step of my design. I would want to add usability tests before the actual implementation. Usability testing is a key part in this process. It is very valuable to gain feedback from potential users. I would like to to do an A/B test if possible. So that I can find things that may have been intuitive to me as the designer, was not necessary intuitive to the user.
For the time period given to complete this project, I am proud and happy with the result. I take pride in the progress and growth I help to foster for this project. :)