main thumbnail.png

UX Design, UI Design,

CSUN Connect App

Duration

January 2022 - March 2022

Role

UX Design, UI Designer

Overview

CSUN Connect App is an app where professors and students can build a strong connection.

Problem

CSUN students need a way to communicate with their classmates and professors because they want to build better relationships and feel a sense of community.

Solution

We believe that by creating an app for CSUN students, we will achieve a stronger relationship between students and professors. We will know this to be true when we see bookings increasing on the app.

Design Process

Tools

Figma, Adobe Illustrator

iPhone 13 Pro.png

As the experienced designer for this project, I was responsible for both strategies and visual design.

design process.png

Discover

Qualititave Research

I interviewed 5 CSUN students through zoom to understand the challenges they face when they need to reach out to their professors and classmates for help.

Questions

1. How do you build relationships with your professors and classmates?
2. Is it difficult to reach your professors or classmates when you need help?
3. Do you and your classmates use another platform to communicate with each other?
4. How fast can you get a response from your professors or classmates when you need help?

5. What is something that you want to change, so it can be easy for you to communicate with professors and classmates?

Key insights derived from the interviews

  • Some students join their professor's office hours to meet them.

  • Some professors take long to respond through email and canvas.

  • Students use slack, discord, and basecamp to message their professors and classmates, but to video chat they use Zoom.

  • Professors sometimes respond to students in 1hr to a day, but classmates reply fast through other platforms that CSUN doesn’t use.

  • Students hope that there is a platform where everything can be done on one and not have to use other ones.

Quantitative Research

A survey was conducted using qualtrics with 34 CSUN students to identify how they interact with their professors and if they feel that they have a strong relationship with them.

Briefly elaborate on what you want to dcuss 8.png
Briefly elaborate on what you want to dcuss 5.png
Briefly elaborate on what you want to dcuss 9.png
Briefly elaborate on what you want to dcuss 7.png

46%

CSUN students somewhat agree that they find it difficult to reach out to their classmates.

31%

CSUN students somewhat agree that they wish there was a faster way to get a hold of their classmates
and professors.

30%

CSUN students strongly disagree that all of their professors use the same platform to communicate.

30%

CSUN students strongly agree that they rather use another platform that CSUN doesn't use.

Key insights derived from the survey

  • About 50% of CSUN students somewhat agree that it’s difficult to reach out to their professors.

  • Another 50% of students find it easy to ask for help from their professors.

  • A lot of students and professors don’t use canvas to communicate with each other.

  • Students prefer to use another platform that CSUN doesn’t use.

Competitive Analysis

Analysis of competitors' characteristics is carried out to identify the strengths and weaknesses of competitors in comparison with our product.

Group 673.png

Define

Personas

Creating personas helps to understand who is our product’s users, what their goals and frustrations, and for what purposes they will use the product. The result should be believable people with their own experiences and values.

Group 515.png
Group 516.png

Empathy Map

In order to get a deeper understanding of user behaviors and decisions, I used the Empathy Mapping method. An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. 

Group 661.png

Ideate

Userflow

To outline all necessary functionality I created a simplified flow diagram of the main tasks the user can do.

userflow.png

Style Tile

Once the user flow was complete, I started by defining the typography, color, icons, and buttons. 

new style tile.png

Mid-fidelity Wireframes

After I organized all my insights from the define phase, I began to build my mid-fidelity wireframes, using my user flow and style tile as a guide.

Group 626.png
Group 666.png
Group 667.png
Group 668.png
profile.png
Group 670.png
Group 636.png
book a meeting_mid.png

Test

Usability Testing

After the visual design was completed I tested the prototype with 5 CSUN students to see how user-friendly the app is. The test was conducted over Zoom where the participants were given the following tasks while I observed how thy navigated through the app.

Tasks

1. Setting up a meeting through zoom with the professor & classmates.
2. Sending a message to professor Shally.
3. To look for a Joel Campos in Art 358 class.

 

Suggestions to make the experience better

  • Need to add an edit option on my “My Schedule” screen, so the user can cancel or reschedule their appointment.

  • Maybe make the “All People” section where it shows the professor and students a whole button instead of clicking the arrows.

  • Make the logo clickable, so the user goes to the dashboard.

  • Add a feature where the users can book an appointment

Implementing Feedback

The suggestions from usabilty testing were considered and the following changes were made. Here is the final product.

iPhone 13 Pro.png
iPhone 13 Pro.png
iPhone 13 Pro-2.png
iPhone 13 Pro-2.png
iPhone 13 Pro-1.png
iPhone 13 Pro-3.png
onboarding_new.png
iPhone 13 Pro-4.png
sign in.png
Message.png
iPhone 13 Pro.png
iPhone 13 Pro-5.png
book meeting time.png
iPhone 13 Pro-6.png
iPhone 13 Pro-7.png
iPhone 13 Pro-9.png
iPhone 13 Pro-10.png
iPhone 13 Pro-11.png

Next Steps

Perform more user tests on the most recent designs and iterate upon feedback.

More Case Studies

salsa&beer_thumbnail.png

UX Design, UI Design

Salsa & Beer

recyclerefund_thumbnail.png

UX Design, UI Design

RecycleFund