Designed & Prototyped a high-fidelity university course registration system, alleviating the tedious and overwhelming pain experienced by students using existing systems, in collaboration with Microsoft clients.
Scope
Microsoft-Cornell
Capstone project
Capstone project
Role
UX Designer
Frontend Developer
Timeline
Jul - Dec 2023
Team
1 UX Researcher
1 UI/UX Engineer
2 Backend Engineers
2 Project Managers
Process
UX Research
UX Design
Frontend Dev
Recognition
Published on Microsoft Dev Blogs (link)
Project Goals
👩🏽‍💻
My contributions:
User Experience Research
Frontend Development
User Research
Primary Research:
The primary research for the course registration system is focused on understanding user behavior and pain points, particularly with Cornell’s Course Registration System. This involves using a survey method to collect data for UI/UX enhancements. We aimed to evaluate ease of use, function usability, and identify potential improvements. We collected feedback from 28 respondents and the comprehensive data on the survey method and results can be found here. The following are user pain points highlighted by several respondents:
Secondary Research:
To grasp the intricacies of the course registration system’s information architecture, we conducted a thorough secondary analysis of existing university systems. Specifically, we scrutinized the course registration processes at Cornell University, Carnegie Mellon University, and the National University of Singapore. Future works would include analysis of a broader number of university course registration system to understand different university and student needs. Our thorough usability analysis was meticulously compiled into a comprehensive Case Study slide deck.
Subsequently, we synthesized the case study features, identifying five pivotal modules crucial to the student course registration experience: the Home Page, Course Catalog, Schedule, Registration, and Student Information modules. This analysis formed the basis for our Research Analysis, where we distilled key feature takeaways and defined must-haves and nice-to-haves based on our findings, as well as an information architecture to conclude.
Feature Analysis
Information Architecture
Figma Prototypes
We then delved into detailing the Figma Prototype, including Lo-fi, Mid-fi, and Hi-fi Prototypes. This comprehensive approach ensures a clear and systematic understanding of the essential elements guiding the course registration system’s development.
In developing the prototype, we implemented a design system with a color and font scheme from Cornell University. It was chosen as an illustrative example due to our accessibility to its resources. This intentional design choice ensures scalability, facilitating the seamless replacement of colors to align with those of other universities. Within this framework, we integrated PrimeNG Components for development purposes, contributing to a cohesive and visually consistent design system.
Frontend Development
As for the frontend, I developed it using AngularJs framework and utilised third-party packages PrimeNG, PrimeFlex and FullCalendar.io. PrimeNG is an AngularJS-compatible library with UI components that make development faster, cleaner, and more efficient. It is combined with PrimeFlex, a responsive CSS utility library to accompany Prime UI libraries. The most challenging component to develop was the Scheduler screen, as we needed a third-party component compatible with AngularJS. Hence, after much investigation, we used FullCalendar, which had most of the functionalities we needed for our development. However, as we need Premium features to fully display all the features we planned to develop, our Scheduler as of now, is only capable of displaying static data.
We presented the finalized course registration system to our clients and received high praise and appreciation for the development efforts. The clients thoroughly enjoyed the product and has published our work on Microsoft’s Dev Blogs, indicating a successful demonstration of the system's capabilities.
Artifacts
