COMPLETE
Course Planning Tool
During my time as a UI/UX Designer at CodeLab, I had the privilege of working closely with the UC Davis Center for Educational Effectiveness on an innovative product for students.
​
My team and I worked to create a new online tool that generates suggested courses and schedules based on a student's desired major or minor. We sought to alleviate student stress surrounding long-term planning.
What you'll find:
User Research
Fidelity Designs
Prototyping
User Stories
Client Work
Cross Functional Teamwork
Branding
Role
UI/UX Designer
Team
1 Project Manager
1 Designer
5 Developers
Timeline
26 weeks
Contributions
-
Meetings with Client, Developers, and Course Visualization
-
User Surveys
-
Competitive Research
-
User Stories
-
Low/Mid Fidelity
-
High Fidelity Prototyping
-
Brand Design
About the Client
Matt Steinwachs at the UC Davis Center for Educational Effectiveness came to CodeLab with a proposal for a project.
Project Ask
A tool that dynamically displays the students' specific degree and university requirements and current progress, while also being able to tentatively plan out their upcoming years.
Client Wants
-
Student inputs all classes currently being taken and all major(s) and minor(s) planning to pursue
-
​Tool comes up with a tentative plan for their next quarters, including which prerequisite classes to take in which quarter and suggestions for when to take a general education requirement.
​
Competitive Research
I started by reviewing and analyzing existing UC Davis planning platforms, such as Oasis and MyDegree, in addition to other college platforms, like Colleague Self Service.
Main stressors of these platforms:
-
Disorganized and hard to navigate
-
Inaccurate degree information
-
Lack of accurate information regarding major classes
.png)
Analysis of UC Davis Oasis website
.png)
Analysis of UC Davis MyDegree website
Analysis of Colleague Self Service website
User Research
The Goal
-
Identify schedule-building tools that students already use
-
Identify likes and dislikes about existing UC Davis platforms
-
Integrate wants and needs into a new schedule-building tool
The Audience
-
We sent out a survey to UC Davis students and received 20 responses.
-
We heard from students across all years and varying majors/minors.
-
Of the respondents, 55% were non-transfer, 45% were transfer students.
Pain Points
-
Long-term planning hard to track with existing platforms
-
Stress surrounding which classes to take (priority vs. non-priority)
-
Overload of information from existing platforms
User Needs
-
Create multiple versions of schedules
-
See suggested prerequisite classes
-
Visualize class schedules
Question Brainstorming
User Survey
.png)
User Survey Results
User Survey Result Synthesis
User Stories
Our client provided us with sample user stories, that I expanded upon with consideration of the student survey responses.
The user follows 5 steps:
1. Opening Course Planning Tool for the first time
2. User creates a worksheet
3. Suggested schedule is generated
4. User completes their edited worksheet
5. User views "All Worksheets" page
Low-Fi Designs
From the user stories, I sketched the beginning designs of the website. My main goal was to ensure that students had access to their desired features, such as customizable worksheets and drag-and-drop classes.
1. Opening Course Planning Tool for the first time
2&3. User creates a worksheet and suggested schedule is generated
4&5. User completes their edited worksheet and returns to "All Worksheets" page
From sketches to mockups...
Landing Page
All Worksheets
Edit Worksheet
Mid-Fi Designs
All Worksheets Page
-
Worksheet tabs
-
Add worksheet button
-
Sort and filter
-
Multi-view
Edit Worksheet Page
-
Search bar
-
Worksheet tabs
-
Input user information
-
Drag and drop class containers
Generate Worksheet Page
-
Search bar
-
Worksheet tabs
-
Requirements list
-
Filled in slots with generated classes
Client Meeting
I then met up with Matt, our client, to discuss my work on the project so far. I also had a few questions for Matt including: Should students be able to edit the worksheet after hitting the generate button? and Are students inputting only their completed classes or should prospective classes be included as well?
He elaborated on his vision for the tool:
-
Students would be able to edit this worksheet with their college advisors.
-
Students should have the flexibility to include summer sessions and additional academic years.
I utilized this feedback to move into high-fidelity iterations.
High-Fidelity Designs
All Worksheets Page
-
A space for students to quickly and efficiently organize their worksheets. On this page, students can edit worksheet name and description.
-
NOTE: This page was taken out of the final design after discussing with developers regarding project scope.
​Editing the worksheet
-
Search bar moved to the left side so it doesn't block any input spaces.
-
Students can drag and drop classes into the perspective places, INCLUDING the ones that they are planning to or have not yet taken. ​This is so that students can work with advisors to develop long-term schedules.
-
​Students also input graduation year/quarter and any prospective majors/minors
​
Generating suggested classes
-
Any class blocks that are not filled are automatically labeled "Suggest!", where the program will place suggested classes for the student to take after the student clicks the "Generate" button.
-
​College and general education requirements are displayed on the left side.
See class information
-
​Accessible class description and details
​
Add/switch between worksheets
-
Easy to navigate sub-navigation bar​
​
Adjusting worksheet
-
Ability to add summer session or fifth class for customizability
Design System
Working with the designers from our sister team, Course Visualization, we developed a landing page to host both tools. Our collective design system models the simplicity and formality of the UC Davis branding.
Landing Page
-
​Sign-in
-
Buttons to each tool
-
Students expressed button overloading with the first design iteration, so we made the new buttons clear and easy to find.​
-
-
Mission statement
-
The center-alignment of the text made the titles more eye-catching and easier to read.​
-
-
Quick descriptions of key features
-
We opted for icons instead of image carousels to reduce clutter on the page​
-
-
About the team
1st Iteration
2nd Iteration
3rd Iteration
Final Handoff and Takeways
Challenges
One thing I struggled with in this project was understanding the project ask and integrating it with the needs of the student. We spent a lot of time checking in with the client and conducting several rounds of research to create a beneficial and thorough project. This project required a lot of communication across teams, and finding a time when everyone was available also proved to be difficult. We ended up moving a lot of meetings or work sessions online.
Learnings
I have a habit of wanting to do things all on my own, but I learned how crucial it was to ask questions when I didn't know how to do a task. At the end of the day, your team is there to help you, and asking questions ensures that you know exactly who you are designing for.