Design Lab

Client: CollabChat

Duration: 5 months

Role: UX/UI Designer

CollabChat is a learning app that helps students interact with peers and faculty members. 

Overview

Communication is vital for the students to receive the proper resources and information to succeed in the classroom. CollabChat allows students to have their questions resolved promptly.

As a UX designer,  I developed the user flows, low-fidelity wireframes, user testing, high-fidelity wireframes, and clickable prototypes for the app. The goal was to increase user engagement and activity on the platform. In my portfolio, I have created the product from conception to the final product.

The Challenge

The inspiration of this app came from the realization that it can be challenging for students to find the resources for assignment help. This sparked an idea for a mobile app that allows student to communicate with their peers and professors. Initially, the goal was to create an app that connects the bridge between student and tutor. However, upon further in-person interviews with members of the faculty, some institutions do not condone current students to internally run a business within the college setting. Therefore, the new goal was to center a product that builds a social community that benefits every student instead. The business model includes the universities to pay a fee to allow a number of students to use the app.

User Research

To better understand the student’s pain point, I’ve conducted private user interviews and sent out email surveys.

When accessible are the tutors, majority of the students felt that their tutors are somewhat accessible. During the private interviews, some students expressed that they find it difficult to set up a time to meet. 

I then asked students how confident they feel about asking other students for academic assistance. 

If we were to create an app, I also asked how we can enhance the student experience. Majority of the students want an app that focuses on study only.  

Problem

Based on the user interviews and surveys, the student want to learn the course material without going to tutor. They want to save money and have more free time for social activities. The students want a reliable source to get questions resolved promptly. I’ve gathered all the information and synthesized several root problems and potential solutions through user persona, storyboarding, card sorting, and user flow.

Solution

To solve this problem, I centered the project on user interfaces (UI) that makes it easy for students to post questions. By making the UI simple and intuitive, students can easily digest and find relevant information. The goal is to make the user feel that the app is reliable and useful. 

User Persona

Sarah Lace 21 Y.O. College student. Mathematics major. 

“I like to study with friends and I want to improve my grades. But finding a tutor is a hassle and I just have a couple of questions.”  

The Busy Student

Sarah is a meticulous student, who take notes and get good grades. As she starts her advanced level Mathematics courses, she finds some of the problems to be challenging. With a full time job, Sarah doesn’t have the time to be going to tutors on the side. She’s on a budget. Sarah decides to check out CollabChat, an app that helps student get work done.

Goals

  • Ask a quick math question and get it resolved right away
  • Homework help done without paying for tutor 
  • Have more free time to hang with friends and join school activities

Motivation

  • Make new friends in her grade
  • Get better grades in class
  • Help other students academically

Pain Points

  • Don’t want to spend on a tutor session

  • Current circle of friends don’t know how to solve the math problem

  • Wants to ask other students but don’t know their academic background

UX Storyboard

Storyboarding assisted me in visualizing how the student would discover the app and recommend it to their peers.

1.  During Class

  • Professor teaches the lesson
  • Instructs students to check online for Powerpoint notes
  • Also let students know about CollabChat and how to download the app

2. After Class

  • Student begins to gather class notes online through Powerpoints
  • Checks online to download any online document

3. Study Period

  • Student begins to study for a few hours
  • Develops a couple of questions
  • Student does not want to spend time and money on a tutor 
  • Seeking to quickly resolve their questions

4. App Usage 

  • Student downloads CollabChat 
  • Discovers courses relating to their majors
  • Student relies on the app as a fast communication between other students and faculty members

5. Outcome

  • Student see’s improvement in grades
  • Can find themselves being the person to provide resources
  • Can also make a meetup schedule for meetups through the chat room feature
  • Student perceives the app as a way to maximize their studying strategy

6. Growth Period

  • Student finds the app helpful and recommends it to their friends
  • The students can make plans to work on projects together and continue to stay connected through CollabChat
  • The app services to separate personal social media information and just focus on the study component

Card Sorting

To create the information architecture of the app, I used card sorting to organize the features.

User Flow

The user flow was split to onboarding and forum interaction. The forum boards will be displayed based on the users’ major.

The most fundamental user flow of the app is to initiate the communication response. This begins with finding information that relates to the student’s major.

Wireframes

Usability Test

Once a clear content inventory was established, I sketched out wireframes for the main user flows, then digitized using Sketch. A clickable prototype was created and two rounds of usability testing were conducted.

During the testing, users were asked to complete three tasks based on the five main user flows: sign up for an account, search for courses, then post and answer questions. Some major testing results and iterations are summarized as below.

A user states shared the screen for the chat function button isn’t shown. Only shows the screen where you click message on the person’s profile. To resolve the issue, I’ve created the home screen for the chat feature so the user can keep a collection of past chats.

The users also shared that the forum section should be more intuitive. While they liked the simplicity of the layout, the students wanted to see an interface that include details of answers that were already posted. After a second usability test, the students preferred the newer layout for its simplicity, intuitiveness, and easy navigation.

Style Guide

Logo

To create the logo, I took the idea of a paper plane to portray the movement of ideas from one location to another.

Navigation

Summary

During the initial usability test, I was genuinely surprised to see how many users completely ignored the reply button. It was not as obvious of an affordance as I thought, so I re-designed the reply feature. This tested to be much more effective with users. 

Throughout the project, I learned about the process of creating an iOS app on Sketch. The most difficult part about the project was iterating on design solutions based from the user feedback. 

Moving forward, the prototype will be continuously tested until the final prototype. I would then export the files and hand them to the Software Engineer. 

Final Product

Like What You See?

Contact me for inquiries. 

alicemariechong@gmail.com

10 + 1 =