Project Overview
A mobile course evaluation app designed to help students feel heard, more engaged, and find meaning in the process.
Challenge: Create a non-monetary incentivized course evaluation app for ClassRanked.
Roles: UX Researcher, UI Designer, Interaction Designer
Timeline: 2 Week Sprint
Client: ClassRanked
1. User & Stakeholder Interviews
Pains:
71% of students felt they were not being heard when taking evaluations as they had no idea where the information went or who had access to this information.
57% of students were upset that they were not given access to survey results to compare how they felt with the majority of the class and have their opinions validated.
86% of students did not feel connected or engaged during these evaluations and found them meaningless as they receive no benefits.
Goals:
To see their influence in creating an improvement,
To feel engaged.
To feel like these evaluations benefit them as well.
From my stakeholder interview I learned ClassRanked’s main goal is to create a non-monetary incentivized course evaluation app that could increase student engagement. As they had no data on student experiences and multiple open ended questions needed to be asked to the target group, I held 7 one-on-one interviews with students from 2 university campuses. I then organized all the data into an affinity map to find common trends.
Demographics:
Participants between the ages of 18–22.
Majority of participants: Caucasian, Hispanic, Male, Reside in Miami.
Participants spend an average of 10–15 minutes on course evaluation surveys.
43% students avoided taking course evaluations.
2. Competitive Feature Analysis
I conducted a competitive feature analysis to see what other applications which could be considered competitors of ClassRanked had to offer. I also conducted secondary research to study how other applications enticed users to willingly contribute their feedback. Here are some of the main features from my analysis.
3. User Persona
Based on the research, I then created a user persona. This tool was useful as it synthesized my interview data, helped me empathize with users, and gave me a clear idea of who I would be designing for.
Reflective Rio:
An engineering major at a university.
Feels disengaged and unheard.
Wants benefits, to feel engaged, and the ability to see his responses cause change.
4. Ideation/MVP
After empathizing with user pains, I began ideating and categorized my ideas using the MoSCoW method to obtain my MVP. This included the bare minimum features needed to get the app up and running.
After testing with a few students, I decided that my non-monetary incentive would be priority enrollment.
HMW: How might we make course evaluations more engaging, meaningful, and so that students feel heard?
5. User Flow
I then created a user flow which helped me plan out how many screens I would need to design for the happy path I wanted users to follow.
My path involves a user who opens the app to complete their course evaluations in order to be considered for priority enrollment.
6. Wireframes
With the user flow serving as a guide, I used the Crazy 8’s method in order to sketch out designs before arriving to the lo-fi wireframes shown below. Wireframes were tested with 5 users and feedback was implemented into each redesign.
Lo-Fis User Feedback: The bottom navigation bar icons should be labeled, the terminology for the “course data summary” button was confusing and should be changed, the badge icon for the leaderboard page should be changed as its not recognizable, the title “Rankings” for the leaderboard page needed to be renamed as it wasn’t common terminology users were used to seeing.
Mid-Fis User Feedback: Users stated that “strongly agree” and “strongly disagree” for the survey questions should be switched as that is the order they are used to seeing, users should be given more control to move to the next question in the evaluation manually (Originally, I designed that the next question would automatically load for users after a question was answered).
7. Branding Guide
Before jumping into my hi-fis, I took into consideration ClassRanked’s branding guide in order to make sure my design followed their guidelines. However, we were given the ability to explore and try new things.
8. Design System
Building upon the branding guide, to help maintain consistency between components and elements, I created a design system that could be followed for ClassRanked’s mobile application.
9. Hi -Fis
Following the branding guide and feedback from testing, I was able to create my Hi-fi’s! Below I’ve listed the steps of how it works.
Fun Fact: I created the colored icons used on the home screen using Figma and Illustrator!
Happy Path Steps: Tap on the notification, select BSC 3915 (a biology lab course), Tap on a star and add a comment to answer question 17 and proceed to the next question, repeat for question 18, add a comment and tap “Submit” on question 19, see congratulations screen (after all evaluations are completed a student is eligible for the priority enrollment raffle, select “See class results” to compare how you felt with the class average, select the “x” on the top right, select the leaderboard tab ( access granted after all evaluations completed), see where you stand in how fast you completed all evaluations (everyone on this list is eligible for the raffle), navigate back to home (evaluations screen), receive congratulatory message, navigate to profile page.
Figma Prototype
Below is the prototype I created! Feel free to check it out or click “Test Me!” to open it on another page!