UX/UI Design
QC Messenger
QC Messenger is an app created exclusively for Queens College as a messaging platform for students to collaborate efficiently and seamlessly.
Role
Research
Interaction Design
Visual Design
Problem
Collaborating on assignments are a necessity for college students. The process of exchanging contact information is often inefficient and tedious. There are too many pieces of information being exchanged, such as names, numbers, and which app is used. The problem gets worse when there are more than 2 students exchanging contacts. Students should have access to an app that allows them to communicate and collaborate efficiently. Being a student has many challenges, collaborating should not be one of them.
Target users
The target users are Queens College students.
Why did I want to solve this problem?
It became apparent to me while I was exchanging contact information with a group of classmates during an assignment. We were all scrambling to exchange our information because everyone had different messaging platforms. Between the different operating systems android, ios, and the abundance of messaging apps available, it was clear to me that this was an highly inefficient process. My solution was to use the college's credentials that every student has to create a unified platform for students to collaborate seamlessly.
Competitive Analysis
I analyzed the most popularly used communication apps and determined what their strengths and weaknesses were.
User Research
The interviews were conducted with the purpose of gaining insights on students communication habits, specifically, their experiences while exchanging contact information. I wanted to learn what apps they were using to communicate, why they were using these apps, and what they wanted on the apps to improve their experiences.
Interview Questions
Describe the experience of exchanging contact information with other students.
What apps do you use for communication and why do you choose that app?
What communication apps do you prefer to use for collaborative assignment purposes and why?
What improvements or features would you like to see on the apps?
Persona
Persona was created to provide insights on a typical student from Queens College and what their needs are based on the qualitative data collected from the interviews.
Empathy Map
Single Exchange
This empathy map was created to get inside a users head during an exchange of contact information. It maps out what a user is saying, thinking, feeling, and what they would do during this exchange.
Empathy Map
Group Exchange
How Might We…?
Possible solutions to solve the problem
have students information already available
use student ID as credential to collaborate
have CUNY provide a messaging platform
increase efficiency of exchanging contacts
provide a unified messaging platform for students
How-Now-Wow Matrix
This matrix offers a realistic and easy to implement solution, an innovative and easy solution, and an innovative hard to implement solution.
Wireframe 1.0
Using a UI template, I designed the basic layout of the app. With simplicity in mind, I only wanted to include core functionalities that helps the user navigate through the tedious task of exchanging contacts and to enhance the experience of peer collaborative work.
Journey Map
This map represents a users journey as they progress through the app. The goal of this map is to uncover problems and opportunities based on the user research I had previously conducted. Each section of this map provides user insight in further developing the app.
A/B Testing
Using the journey map, I was able to identify an issue with file sharing. An app built for academic purposes should have an easy experience sharing files. For my A/B test, I wanted to find out if having the file sharing icon in a secondary menu would have an impact on a users experience.
Wireframe 2.0
After A/B testing, the interface was updated with new features based on what was learned from the journey map and A/B testing. The file sharing interface has been updated to meet the user expectations through A/B testing. A channel feature has also been implemented because of the success of apps like Slack, which is prominent in group collaboration settings. This second version of the wireframe is used to create the final high-fidelity prototype of this app.
UI Kit
Onboarding
High Fidelity Prototype 1.0
Accessibility
A program was used to check for any low contrasting abnormalities. It was important to have an inclusive design for everyone to be able to use the app. Some of the grey accents were tooo difficult to distinguish against the background color. The solution was to darken these accents until the contrast was high enough for any visually impaired user to see.
