BACK
PC ● End-to-End Product Design
Revolutionizing course planning experience for 10,000 U of Rochester students
ROLE
UI/UX Design Intern
Time
Summer 2023
TEam
Yitong (design mentor), 1 PM, 3 in-house engineers
CONTRIBUTION
As the Product Design Lead of a team of 5 designers, I:
Facilitated design workshops with designers
Communicated with PM and engineers to assess feasibility and prioritize tasks
Conducted user research to understand pain points
Transformed abstract user needs into tangible prototype features
Iterated design through user testing and feedback
Problem
"HMW make it easier for students to efficiently find courses they need and seamlessly add it to schedule for registration?"
RocLab is a student developers organization at the University of Rochester that aims to solve problems on campus through design and technology. Melcourses is the second website we launched in 2023. As the design team, we aimed to redesign existing course planning tools (CDCS and Workday) and introduce new features to address the existing user experience problems.
The existing course planning website, CDCS, hasn't been updated for 14 year. The UI is outdated and the information presentation is text-heavy.
PROCESS
Creating a website End-to-End
getting started
RocLab operates like a startup. We began with the successful launch of Unicycle in February 2023. I served as the marketing lead, creating visually appealing branding and promotional materials that boosted engagement.
Motivated by this success, we started an ambitious new project: developing a course platform to help students managing their academic journey efficiently, from finding courses to creating schedules. My shift in passion towards UX design led me to take the lead of the UX team, marking the beginning of our design journey.
Research
Conducted interviews and contextual inquiries with 15 students to understand user pain points using current tools.
We began by recruiting 15 students from diverse academic backgrounds and years to ensure varied perspectives.
User insights from both methods were consolidated into sticky notes and organized collaboratively in a Figjam affinity diagram. This approach helped identify patterns and connections, facilitating the discovery of more general problems and guiding the design process effectively, following a bottom-up approach.
🗣️
Interviews
What we want to get:
directly inquire to gather users' needs
users' explicit opinions about the current tools
How we did it:
Open-ended questions to elicit detailed responses, allowing participants to express their thoughts about the current tools and potential improvements.
e.g. "What tools do you use to search for courses? How do you feel while using this tool?"
👁️
Contextual inquiries
What we want to get:
how users interacted with the existing tools
users' implicit needs and pain points
How we did it:
ask user to navigate through the current websites while explaining their actions and thought processes
a list of tasks as a supplement of observation
e.g. search for a specific course, find the prerequisite of a course
Phase 2: DEFINE
Problem #1
Complex navigation
User insight
Users encountered navigation challenges on Workday for course searching and scheduling. Multiple students expressed this difficulty.
Josh
Junior student
It’s so annoying to create schedules...
I have to jump back and forth between all these pages, and it takes me years to find the right lab session that can fit into my schedule.
Through the user insight, we found out the current navigation on Workday is overly complex, requires 10+ steps to add a single class to a schedule.
Current user flow for adding a single class to a schedule
Problem #2
Unorganized information presentation
User insight
Users struggled in certain tasks related to finding certain information, about half of the users found it hard or unable to find the prerequisite of a course.
Nancy
Freshman student
What's the relationship between these two sections?
How do I know if there's any sub-courses required for a course?
The CDCS user interface has remained unchanged for 14 years, resulting in a dense and unclear information presentation. During the user research phase, about half of the users found it hard or unable to find the prerequisite of a course. The lack of visual hierarchy makes scanning difficult, As a result, finding necessary information becomes a challenge.
Converge
"How Might We streamline the course search-to-schedule process and enhance visual hierarchy for clearer course requirement searching?"
Contraints
A working prototype in 1 month? We were ambitious.
🔥
Time Constraint
✂️
Technical Challenge
As our engineering team consisted of mainly undergrad students, we faced limitations in implementing complex features we brainstormed, such as AI-powered course recommendations.
My solution
↓
Communicate with developers and led workshops to to gather feedbacks on feature, ensuring integration of design and engineering efforts
ideation
Brainstormed features based on the problem, and grouped them into information architecture (IA)
Based on the problems, we started by information architecture, allowing engineers to estimate the amount of work.
Prototyping
Visualized solutions into low-fi prototypes, collected in-team feedback, and updated them into high-fi prototype
For the next step, we prototyped over 100 screens to visualize each solution. At the same time, we created user flows for each scenarios to guide our design.
Iteration
Added a feature to increase the ease of scanning based on user feedbacks
After the website is launch, we continued to collect feedback from user. Based on one of the main concern, we made each subcourses section expandable, making it easier for scanning.
There’s 10+ subcourses for some lectures
Redesigned course card with toggles
We collaborated closely with engineers to ensure the implementation of the prototype design. Subsequently, we conducted user testing, gathered valuable feedback, and iterated on our design to enhance user experience.
Design Solutions
solution #1
Streamlined Userflow from course searching to scheduling
By redesigning the user flow, we integrated course searching and scheduling, cutting redundant steps to significantly save users time and boost overall efficiency.
Before
After
solution #2
Course card redesign
Revamping the course card design involved a clearer visual hierarchy that significantly enhances the ease of scanning. This thoughtful approach empowers users to retrieve information more efficiently
Before
After
Impact
Launched in November 2023, revolutionizing course planning for 10,000 University of Rochester students.
By revamping the existing website into Melcourses.com, we offered students a streamlined and innovative course planning experience, simplifying course searching and scheduling while improving the visual layout for clearer course requirements
Our redesigned website, Melcourses.com
Next Step
Our next move is focused on refining the platform through ongoing user feedback. More specifically, after communicated with PM, here are the things we are planning for.
New features
Based on user feedback, we identified desired features like personalized course suggestions and a customizable four-year plan that weren't implemented for the launch. To address user needs and enhance functionality, I'll be incorporating these features as our next goal of design.
Iterative Refinement
For the currently live features, ongoing refinement will be driven by continuous user feedback, ensuring a responsive and user-centric design.
Lessons Learned
Involve developers in the loop
A key lesson learned was the early involvement of developers in the design process. To address this, we ensured weekly check-ins with the developers. This not only streamlined development but also led to a more cohesive and successful final product.
