Connect

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

Tools: Sketch, HTML, CSS, JavaScript

Role: UX Design Lead, Front-end Developer

Team: Cross-functional team of 2

 

 

 

WeChat Screenshot_20180311162609.png
 

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.

WeChat Screenshot_20180311162815.png
 

connect has you covered

This web application is going to make the everyday struggle of getting help in the labholding 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.

Process

We created some mockups of the application's interface. We are now in the process of implementing the functionalities of the website. 

WeChat Screenshot_20180311162222.png
 

Prototype

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.

 
WeChat Screenshot_20180311163527.png
 

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. 

 
WeChat Screenshot_20180311161755.png
 
 

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.

 

 
WeChat Screenshot_20180311161408.png
 
 

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.

 
WeChat Screenshot_20180311163917.png
 
 

Implementation

We use HTML, CSS and JavaScript for the implementation. We are still developing our web app. We would like the final deliverable to be simple, intuitive and easy to use. Since we only have around 10 weeks to complete the entire process by two people, there is room for improvement. The Github repository will become public when the quarter ends. For now, I include some screenshots below for our implementation.

 

Login page

The login page is fairly simple to implement. We use javaScript to create a modal for the popup login box. The rest part is just plain HTML and CSS. Since we do not have enough time, we decide not to have a database for our web at this stage.

 
 

Main screen

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. :)

 
WeChat Screenshot_20180311162329.png
 
 

Takeaways

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. :)