Pra.Ly: Reinventing the
In-Lab Experience

Collaborators

Bayaan Shalaby, Lamia Anjum, Hannah Fletcher,
Nojhat Hrishti, Sahar Karimi, Min Jue Kim
Full stack development
SEPT 2018 - DEC 2018

In 2018 I took a full-stack development course, for which the course project was to design and build a web application. For this project, I took on the role of both UX designer and front-end developer. It was the perfect opportunity to not only learn HTML and CSS, but also understand how a front-end prototype could be developed into a fully-functioning, data-collecting web application.

Not interested in reading the whole project brief? Watch this short demo of the Pra.Ly platform instead to learn what it was all about.
Script, narration and editing by Sarika Goel

Overview

University labs or practicals are where students get the chance to apply the theoretical knowledge they gain in the classroom by working through problems and projects with the help of course teaching assistants (TAs). They can be hugely educational, but the current way in which these labs are designed has rendered them quite inefficient.

RESEARCH

By surveying students and interviewing TAs in the engineering faculty at the University of Toronto, our team was been able to pinpoint a number of problems, including the following:

Ideation

Having spoken to users and identified these problems, we used the “How might we” approach to tackle each problem individually and generate potential solutions.

1. How might we help students get the TAs’ attention without having to keep their hands raised for several minutes?

We could have the students line up in a virtual queue so that they can continue working while waiting for a TA to come over. This will also ensure that the TA attends to students in the correct order.

2. How might we help TAs avoid the problem of repeatedly answering the same question?

We could create a question board, where students could post their questions. Other students could upvote questions that are relevant to them as well, and if a question has enough upvotes, the TA could address the problem in front of the entire class.

3. How might we encourage students to communicate with each other during the lab?

We could create live chats where students could discuss questions posted on the question board and work through them together to reduce the TAs’ workload. Students who have already had the question or problem resolved by a TA could join the chat to help others out too.

4. How might we develop consistency between what is taught in lab vs what is taught in class?

We could have students fill out feedback forms at the end of each lab which could be compiled into analytical reports and sent directly to the TAs and professors of the course, so that there is no miscommunication between the two parties.

Wireframes

Based on the possible solutions generated during the ideation stage of the project, a rough wireframe was generated to iteratively redesign and use as a reference over the course of the project.

Process

Having pinpointed problems and developed potential solutions, the team began constructing a web application to improve the in-lab experience. We employed an agile approach to develop each new feature one at a time. Some members of the team would conduct user testing and research in order to determine what the most ideal interface solution would be, after which they would pass on their results to the designers, who would create page layouts using Axure RP. The designers then passed the layouts onto the front-end developers who would replicate the Axure Prototypes using HTML and CSS, and then pass the pages onto the back-end developers who employed Java and SQL to retrieve, store, and display data.

The final product of this process can be found below!

Other Projects