uCredit
Commenting made easy for students and advisors
ROLE
UX Designer
DURATION
Feb - March 2023
TEAM
Jam Navarro (UX Researcher), Jooyoung Ryu (UX Researcher), Sean Pak (PM)
KEY SKILLS
UX Design, Web App, Prototyping
Background
uCredit is a web-app that democratizes degree planning for Johns Hopkins students. uCredit's commenting system was launched in Spring 2022. It is heavily underutilized, has several user flow breakdowns and archaic UI, and is missing several features of a functional commenting system. Our project goal was to solve these user pain points as well as streamline communication between students and advisors for academic scheduling.
01 - CURRENT DESIGN
Research
Since the commenting system went through a cycle of user research before I joined uCredit, I identified insights and design opportunities from uCredit's most recent contextual inquiries that interviewed 4 students and 4 advisors. Following this research synthesis, I conducted competitive research on Google Docs and Google Sheets as well as research on industry best practices for commenting systems. I then identified 6 key functional features that are standard of strong commenting systems and industry best practices.
User Pain Points
From this data triangulation of research, I came up with 3 main user pain points.
Students and advisors don't have visibility for connected conversation threads.
❌ Adding reply doesn’t start reply thread
❌ Relationship between comments has no visual cues except for the time postedStudents and advisors don't have a way to edit and resolve comments.
❌ Deleting and writing new comment takes too long, leading to low conversion rates
❌ Unresolvable action items creates digital clutter -> violates Hick’s LawStudents don’t use UCredit to communicate with advisors because there is no notification system. Instead, they use email.
❌ Users don’t initiate comments because email is easier
❌ Without a notification system, users have no way of being alerted a new comment was left
Defining the Problem
From our research, we determined the scope of our redesign. Our goal was to design a commenting system for students and advisors to communicate about degree planning in a way that is more efficient than email.
Specifically, we hypothesized that implementing best practice features that competitors use would lead to high conversion rates, decrease time on task, and increase uCredit's Net Promoter Score.
02 - HYPOTHESIZED FEATURES
Wireframing
After identifying key features to implement that we hypothesized would help solve user pain points, I created a user flow map to plan out the user flow of the redesigned commenting system to help guide the wireframing process.
03 - USER FLOW
04 - WIREFRAME
I then created wireframes to sketch out what the redesigned commenting system would look like with these new features, aligning with the existing design interface to adhere to engineering constraints.
Final Designs
FEATURE 1: Create comment threads
Users can now create comment threads and reply to other users. Users can also mention people and use emotes. Instead of writing text, a simple thumbs up is sufficient and is easy and quick for users to process.
FEATURE 2: Edit and resolve comments
Users can now edit their comments and resolve action items. By resolving action items, students can clarify what still needs to be done. This declutters the interface, decreasing the time it takes for a user to make a decision.
FEATURE 3: Notification system
Instead of updating their advisor via email, whenever students resolve an action, leave a reply, or mention their advisor, their advisor will be notified. Students will also be notified if advisors approve their academic plans.
Testing
05- TESTING RESULTS
THE GOOD
We saw a 70% conversion rate and cut time on task by 30%. Among 3 students and 3 advisors, users generally found deleting comments intuitive. The flow was easier to navigate as well. Users would even recommend the product as is, with an increase in Net Promoter Score by 20%.
THE BAD
However, users indicated that some buttons or icons were too small. They also noted that the resolve feature and comment threads may not be necessary for their goals. Users also indicated a preference for comments to be centralized in one location.
Reflection
IF I HAD MORE TIME…
I would make key actions (ex. reply button) more discoverable and accessible as well as conduct additional design iterations and testing based on qualitative feedback.
In the end, our hypothesis was only partially true. But that's okay.
Not all features that we tested were best suitable for our users. However, our testing data suggests that we created a positive impact on our users. Ultimately, we created a way for users to alert advisors/students about new comments and action items and implemented foundational commenting features (ex. edit, replies, resolve).
uCredit
Commenting made easy for students and advisors
ROLE
UX Designer
DURATION
Feb - March 2023
TEAM
Jam Navarro (UX Researcher), Jooyoung Ryu (UX Researcher), Sean Pak (PM)
KEY SKILLS
UX Design, Web App, Prototyping
Background
uCredit is a web-app that democratizes degree planning for Johns Hopkins students. uCredit's commenting system was launched in Spring 2022. It is heavily underutilized, has several user flow breakdowns and archaic UI, and is missing several features of a functional commenting system. Our project goal was to solve these user pain points as well as streamline communication between students and advisors for academic scheduling.
01 - CURRENT DESIGN
Research
Since the commenting system went through a cycle of user research before I joined uCredit, I identified insights and design opportunities from uCredit's most recent contextual inquiries that interviewed 4 students and 4 advisors. Following this research synthesis, I conducted competitive research on Google Docs and Google Sheets as well as research on industry best practices for commenting systems. I then identified 6 key functional features that are standard of strong commenting systems and industry best practices.
Users don't have visibility for connected conversation threads.
❌ Adding reply doesn’t start reply thread
❌ Relationship between comments has no visual cues except for the time postedUsers don't have a way to edit and resolve comments.
❌ Deleting and writing new comment takes too long, leading to low conversion rates
❌ Unresolvable action items creates digital clutter -> violates Hick’s LawUsers don’t use UCredit to communicate with advisors because there is no notification system. Instead, they use email.
❌ Users don’t initiate comments because email is easier
❌ Without a notification system, users have no way of being alerted a new comment was left
User Pain Points
Defining the Problem
From our research, we determined the scope of our redesign. Our goal was to design a commenting system for students and advisors to communicate about degree planning in a way that is more efficient than email.
Specifically, we hypothesized that implementing best practice features that competitors use would lead to high conversion rates, decrease time on task, and increase uCredit's Net Promoter Score.
03 - HYPOTHESIZED FEATURES
Wireframing
After identifying key features to implement that we hypothesized would help solve user pain points, I created a user flow map to plan out the user flow of the redesigned commenting system to help guide the wireframing process.
04 - USER FLOW
05 - WIREFRAME
I then created wireframes to sketch out what the redesigned commenting system would look like with these new features, aligning with the existing design interface to adhere to engineering constraints.
Final Designs
FEATURE 1: Create comment threads
Users can now create comment threads and reply to other users. Users can also mention people and use emotes. Instead of writing text, a simple thumbs up is sufficient and is easy and quick for users to process.
FEATURE 2: Edit and resolve comments
Users can now edit their comments and resolve action items. By resolving action items, students can clarify what still needs to be done. This declutters the interface, decreasing the time it takes for a user to make a decision.
FEATURE 3: Notification system
Instead of updating their advisor via email, whenever students resolve an action, leave a reply, or mention their advisor, their advisor will be notified. Students will also be notified if advisors approve their academic plans.
Testing
06 - TESTING RESULTS
THE GOOD
We saw a 70% conversion rate and cut time on task by 30%. Among 3 students and 3 advisors, users generally found deleting comments intuitive. The flow was easier to navigate as well. Users would even recommend the product as is, with an increase in Net Promoter Score by 20%.
THE BAD
However, users indicated that some buttons or icons were too small. They also noted that the resolve feature and comment threads may not be necessary for their goals. Users also indicated a preference for comments to be centralized in one location.
Reflection
IF I HAD MORE TIME…
I would make key actions (ex. reply button) more discoverable and accessible as well as conduct additional design iterations and testing based on qualitative feedback.
In the end, our hypothesis was only partially true.
But that's okay.
Not all features that we tested were best suitable for our users. However, our testing data suggests that we created a positive impact on our users. Ultimately, we created a way for users to alert advisors/students about new comments and action items and implemented foundational commenting features (ex. edit, replies, resolve).
uCredit
Commenting made easy for students andd advisors
ROLE
UX Designer
DURATION
Feb - March 2023
KEY SKILLS
UX Design, Web App, Prototyping
Background
uCredit is a web-app that democratizes degree planning for Johns Hopkins students. uCredit's commenting system was launched in Spring 2022. It is heavily underutilized, has several user flow breakdowns and archaic UI, and is missing several features of a functional commenting system. Our project goal was to solve these user pain points as well as streamline communication between students and advisors for academic scheduling.
01 - CURRENT DESIGN
Research
User Pain Points
Users don't have visibility for connected conversation threads.
❌ Adding reply doesn’t start reply thread
❌ Relationship between comments has no visual cues except for the time postedUsers don't have a way to edit and resolve comments.
❌ Deleting and writing new comment takes too long, leading to low conversion rates
❌ Unresolvable action items creates digital clutter -> violates Hick’s LawUsers don’t use UCredit to communicate with advisors because there is no notification system. Instead, they use email.
❌ Users don’t initiate comments because email is easier
❌ Without a notification system, users have no way of being alerted a new comment was left
Defining the Problem
From our research, we determined the scope of our redesign. Our goal was to design a commenting system for students and advisors to communicate about degree planning in a way that is more efficient than email.
Specifically, we hypothesized that implementing best practice features that competitors use would lead to high conversion rates, decrease time on task, and increase uCredit's Net Promoter Score.
03 - HYPOTHESIZED FEATURES
Wireframing
After identifying key features to implement that we hypothesized would help solve user pain points, I created a user flow map to plan out the user flow of the redesigned commenting system to help guide the wireframing process.
04 - USER FLOW
I then created wireframes to sketch out what the redesigned commenting system would look like with these new features, aligning with the existing design interface to adhere to engineering constraints.
05 - WIREFRAME
Final Designs
FEATURE 1: Create comment threads
Users can now create comment threads and reply to other users. Users can also mention people and use emotes. Instead of writing text, a simple thumbs up is sufficient and is easy and quick for users to process.
FEATURE 2: Edit and resolve comments
Users can now edit their comments and resolve action items. By resolving action items, students can clarify what still needs to be done. This declutters the interface, decreasing the time it takes for a user to make a decision.
FEATURE 3: Notification system
Instead of updating their advisor via email, whenever students resolve an action, leave a reply, or mention their advisor, their advisor will be notified. Students will also be notified if advisors approve their academic plans.
Testing
06 - TESTING RESULTS
THE GOOD
We saw a 70% conversion rate and cut time on task by 30%. Among 3 students and 3 advisors, users generally found deleting comments intuitive. The flow was easier to navigate as well. Users would even recommend the product as is, with an increase in Net Promoter Score by 20%.
THE BAD
However, users indicated that some buttons or icons were too small. They also noted that the resolve feature and comment threads may not be necessary for their goals. Users also indicated a preference for comments to be centralized in one location.
Reflection
IF I HAD MORE TIME…
I would make key actions (ex. reply button) more discoverable and accessible as well as conduct additional design iterations and testing based on qualitative feedback.
In the end, our hypothesis was only partially true. But that's okay.
Not all features that we tested were best suitable for our users. However, our testing data suggests that we created a positive impact on our users. Ultimately, we created a way for users to alert advisors/students about new comments and action items and implemented foundational commenting features (ex. edit, replies, resolve).