UI/UX Case Study for a Student Portal Schedule Feature
Brief: Provide university class schedule at-a-glance, including wait-listed classes and no time scheduled (online) courses. Classes are easily added to calendaring apps.
Challenge
Many students have difficulty using class schedule information via the MyCUinfo student portal (demo). Problems include:
Findability — schedule is lumped with other account information
Portability — not easily viewed on smart phones, requires zooming and scrolling
Usability — gaps in schedule, which are useful for study and work time planning, are not shown
Convenience — there is no easy way to share and re-use schedule data
Engagement — design feels “old” and outdated
Goals
- Help students retrieve their class schedules, including days, times and locations
- Seamlessly integrate class events into the student’s preferred calendar
- Provide a user interface that is familiar, easily navigable and engaging
- Improve ease-of-use
- Support mobile devices
Proposal
Instead of updating the existing feature in MyCUinfo portal, start over. Show schedule information using a familiar card metaphor so the entire week is visible on a smart phone. Support iCalendar export, thus allowing students to add classes to Google Calendar.
The schedule card will enable students to plan their days and get to class on time, especially during the hectic start of the semester. With calendar integration, students can add alerts, print their schedule and access class details from any connected device.
Design process
Team
The design effort was led by the following individuals, with support from the Office of the Registrar, the Office of Information Technology, Housing Information Technology and student employees:
- UX researchers: Sandra Sawaya, Courtney Paige Fell
- UX student employees: Ruth Baheta, Tarah Dykeman
- UX/UI developer: Luis Ordorica
- UX designer: Ian Hoene
Topic research
Survey data was plentiful. Starting in 2015, we asked students to rate MyCUinfo and share their opinions. Focus groups and student interviews helped complete our understanding. From this research, these themes emerged:
- Simplify/improve layout further
- Generally make things easier to find
- Improve mobile compatibility/responsiveness
- Improve performance
Specific to class schedule, this comment captures the overall student attitude:
Doing anything with class schedule is very complicated, as it requires about 5–10 button clicks and different pages, and is very slow.
How do students access schedules currently?
Not surprisingly, some students invented their own workflows to avoid frustration and overcome MyCUinfo usability issues. Some entered classes into calendaring apps (strictly a copy and paste operation), while others took creative routes. This student invented a paper-based, color-coded class schedule grid:
Mobile phone usage
Mobile phones proved an easy target, with a 2018 study by global tech protection and support company Asurion revealing that people look at their phone on average every 12 minutes.
Although the schedule view was never designed to be viewed on small screen, some students valiantly attempted this anyway:
I have had tons of trouble using the site on an iPhone (and it’s a relatively new iPhone, so it should be technologically capable). Simple functions such as checking enrollment dates have proved extremely difficult due to unwanted zooming of the screen and an inability to zoom out or scroll around.
Insights
We studied dozens of peer higher-education institutions for insights and ideas. It was a fun and revealing process to see how other universities approached student portal design. Following are the universities with notable qualities that inspired us:
University of California, Berkeley
Likes: clean, intuitive, useful without being overbearing, Google integration
University of Montana
Likes: well-branded, organized, clean
Cornell University
Likes: pretty, task-oriented organization
University of Wisconsin-Madison
Likes: scalable design, personalized by affiliation
Visual language
To provide students a familiar UI, we selected the Material Design visual language. Material is a bold, graphic and intentional design framework backed by Google.
Our students communicate and collaborate using cloud apps like Gmail and Google Drive. Since they are in and out of these apps every day, providing similar affordances for navigation, search, browsing and so on seemed a natural fit. And, we love that Material’s motion-based interaction uses visual feedback and hints to help users learn how the UI works.
Material Design is both a specification and a UI framework (Angular Material) for developing apps and web sites. It offers a rich set of components and design patterns, plus excellent accessibility support for screen readers (a must-have for the university). Google is constantly improving Material. A bonus: strong developer community support. Code samples, blogs, knowledgebases and discussion forums provide a helping hand to bootstrap development.
Design principles
In Fall 2016, the Unified Student Experience project team identified success measures with comprehensive design principles. Building on these guidelines and with student and peer research in-hand, we scaffolded UX design principles, with an eye towards customer-driven digital transformation.
- Mobile-friendly
The experience looks great and works properly on smart phones and tablets, and the content scales and flows fluidly on desktop screens. - Personalized
If it is not personalized, it doesn’t belong on the portal. Tailor the experience — get the right content, at the right time, to the student. - Real-time
Schedules can change rapidly. The design should accurately depict course registration and related activity — drops, adds and waitlisted courses, without delay - Customizable
The experience should adapt to the user, not vice-versa. Allow for all scenarios — online classes, multiple sessions within a single term — and make it simple to change views. - Reliable
The first impression must be positive. Students won’t tolerate slowness or missing data. Their experience must be fast and engaging, time after time, and without fail.
The job to be done
Although user personas have a place in audience targeting and definition for design purposes, we framed the design task as a question: what is the job of the class schedule?
In other words, students have a choice. They can “hire” the portal for the job, or not. This forced us to think about the student, and the contexts — time, place, emotional state, social element — of hiring the schedule card.
At the core, they want to advance and move their student career forward. At the start of the semester, when crucial expectations are set and peer / instructor relationships develop, this means untangling the labyrinth of building names, course codes, and days of the week to get in to class on-time.
Students we spoke with provided us clues, like snapping a photo of their laptop screen opened up to the MyCUInfo schedule section and making that their phone home screen. Or printing the web page, cutting out their schedule, and pasting it inside their planner. The pattern we observed was similar — quick, easy lookup at their fingertips. Once students memorized the days, times, and locations of their classes, the schedule crib sheets weren’t needed.
This realization led us to hypothesize that students hire the schedule card as a memorization tool, to help them visualize their week and develop a routine.
Sketching and validation
- Our workshop outputs were 12 concepts to improve the class schedule user experience
- We asked workshop participants to vote for the best idea and tied with two concepts
- We developed two prototypes and tested with students
Early sketches
We drew screens and flows for the two leading concepts, modeled on the daily planner and grid-view:
Prototypes
We prototyped high-fidelity wireframes and simulated interactivity to test with students.
Planner
Schedule
Usability study
We recruited six students, with varied backgrounds ranging from an undeclared freshman to a computer science major. Using the two interactive schedule prototypes, we asked open-ended questions, such as “what is the purpose of this page?”, and “how and when would you use it?”
We observed the students completing tasks. For example:
- Find directions to your Sociology class starting at 8:00 am.
- Find your Sociology class.
- Share your schedule.
- Hide the schedule.
Of the two designs, the schedule view won. Students wanted a weekly view akin to a planner, with shading of the classes to easily tell them apart. We learned the students “hire” their schedule for the first two weeks of the semester. For a given day, show me my courses, start times, and where I need to be — buildings.
Once memorized, they rarely looked up their schedule. If the design mimicked the still-popular flashcard format, students could easily learn their schedule by heart.
The grid layout for the schedule naturally stretches to the edges of the screen, filling the space with just the right amount of information. Class details like maps, room numbers, instructor and so on are easily viewed by tapping on the squares in the grid. Gaps between classes are clearly visible, to plan travel times, study breaks, and so on.
Outcomes
We asked 30 to independently attempt schedule-related tasks in a controlled-beta launch.
- 85% described calendar export as easy
- 90% said the same for finding course details like the building, classroom and instructor
- Overall, 58% rated the schedule app as easy to use, with 33% rating it somewhat easy to use
Student comments were mostly positive:
I really like how simple and all connected all the features are. Excellent job so far, and I would love to get a chance to use this someday for real.
We are repeating the design process as requirements change and we uncover obstacles from student testing. The schedule feature continues to evolve.
TL;DR;
- The University of Colorado Boulder is transforming the student digital experience via the Unified Student Experience (USE) project.
- The USE UX working group conducted surveys and primary research to identify pain points and uncover opportunities.
- We asked the question “why do students hire a schedule?” found the need, and filled it
- The context is first two weeks of classes. The job: class day, time and location lookup.
- We chose the Material design language to redo the schedule view in the student portal.
- In a week-long design sprint, we developed sketches, designs and prototypes.
- We vetted assumptions with student usability testing, using realistic examples for deeper insights
- We concluded the week with a UI specification for development.
