uCredit
uCredit is a student-made academic planning application. It helps undergraduate students make their 4 year college plan, with a wide course selection and degree tracker. The main goal of our redesign is to restructure the landing page and conduct user research to improve the user flow.
Overview
UI Design Problem
#000000
The functionality of uCredit was well-implemented, but 1) a more appealing home page was needed so that users are able to learn what the product is and how to use the product easily with few clicks. And 2) features of the dashboard, where user plan their schedule, need to be tested for usability and redesigned if problems are found
Design Process
1. Identify problem and initial draft
Research was done on landing page design. Then we listed all the functions needed on the landing page and I did the initial sketch.
sketch for the new home page
sketch for the new home page
sketch for the new team page
2. low-fidelity design
The first draft was selected and a low fidelity prototype in Figma was made
low-fidelity design for home and team page
3. high fidelity design
After several meetings and modifications, the high fidelity design is as shown here:
4. implementation and result
The homepage is put into use in August 2022 at: https://ucredit.me/
​Before redesign
After redesign
UX Research Problem
After homepage redesign, our team started UX research on the user dashboard, where students plan their course schedule, keep track of their degree, and share their plans with others. We conducted usability test on 7 tasks and contextual inquiry on user flow from login to planning out an entire year's schedule.
example: share function redesign
01
during usability test, task for "share" function is given as "please share your plan with the moderator"
02
task completion rate and user's comments during the interview were collected
03
4/9 users confused "share" with "add reviewer" at least once during the test.
04
I redesigned the feature so that 1) explanation for share function is added, 2) the two features are combined so that less click is needed
part of the data collected in affinity diagram
old design: users frequently confuses these two buttons
redesign of share button, popup, and help button so that users now choose one of two options to share (copy link and add reviewer) with explanations.
process with example
process
1 / Plan and User Recruitment
A plan for user interview is made, consisting of contextual inquiry (20 minutes free explore of the site) and usability test (7 tasks step by step to build a complete college plan). 9 users were recruited through email and class connections.
2 / Data collection
The KPIs includes task completion rate, task-completion time, error rate, and post study questionnaire where users were asked to assess usability on a scale of 1 to 5. User's comments during contextual inquiry were also recorded.
3 / Data analysis
We grouped comments on same feature together, calculated average usability score, and identified tasks prone to mistakes, etc.
4 / Redesign
The features identified in the above step are redesigned based on further research and user suggestions.
Conclusions
The goal of our redesign is achieved, for during the anonymous user interview, more than half of the users reported being attracted by the landing page and willing to recommend the product to their friends. The project is an ongoing one, and I am currently designing an interactive new user tutorial for first-time users. uCredit is a product of great teamwork. We aims to help college students visualize their academic plans and have so far achieved satisfactory results.