Frontend Development for MyAdvisor
Building a responsive, accessible, and intuitive user interface for UCT's virtual student advising platform
As the frontend developer for the MyAdvisor project, I was responsible for creating the complete user interface and user experience for a web-based academic advising platform at the University of Cape Town. This three-person honours project divided responsibilities between frontend development, chatbot implementation, and database management, with my role focusing entirely on the presentation layer and client-side functionality.
My primary responsibility was to transform complex academic advising workflows into an intuitive, accessible interface that students could navigate effortlessly. Using React.js, Next.js, Tailwind CSS, and TypeScript, I built eight core features including simplified handbook displays, a chatbot interface, advisor communication forms, an interactive degree roadmap, FAQ sections, glossaries, advisor directories, and course catalogs. Each component was designed with a mobile-first approach, recognizing that many UCT students primarily access university resources through smartphones.
The frontend architecture emphasizes component reusability, accessibility compliance (WCAG 2.1 AA), and performance optimization. Through iterative development and continuous user testing with 18 students, the interface achieved unanimous 5/5 ratings across all usability metrics, with participants describing tasks as "very easy" and strongly recommending UCT adopt the system. This page documents my individual contribution to the project, showcasing the design decisions, technical implementation, challenges overcome, and evaluation results that validate the frontend's effectiveness.
Goals & Motivation
Problem Statement
Even though digital tools are easily accessible, many UCT students struggle to use them efficiently. Since many students use mobile devices, the main obstacle is not hardware or internet connectivity, but rather the usability of the current information systems. Interpreting faculty handbooks, figuring out prerequisites for courses, and deciding which courses to enrol in after failing or passing a subject are all common challenges for students.
Confusion, repeated advisor consultations for simple facts, and inefficiencies in the advising process are caused by these problems. Answering queries that could be automated or made simpler with the correct technology is a burden for advisors themselves.
Primary Objectives
Provide centralized, user-friendly access to academic advising resources in an approachable, well-structured format
Design a responsive, mobile-first interface accessible across smartphones, tablets, and desktop computers
Reduce repetitive advisor consultations by providing automated assistance through the Helpbot and comprehensive resources
Empower students with visual degree planning tools that clarify prerequisites and course eligibility
Design Philosophy
MyAdvisor's main goal is to provide UCT students with a centralized, user-friendly platform for academic advising. The platform presents academic information in an easy-to-understand, well-structured, and engaging way, unlike existing handbooks and portals that require students to navigate complicated content and fragmented online interfaces. The solution supports desktop or laptop use as well as mobile devices to give students freedom and accessibility across the platforms they use most frequently.
Technologies Used
React & Next.js
Modern React framework providing server-side rendering, routing, and optimal performance for building the application structure and component hierarchy.
Tailwind CSS
Utility-first CSS framework enabling rapid, consistent styling with responsive design patterns and custom theming capabilities.
shadcn/ui
Accessible component library built on Radix UI primitives, providing pre-built, customizable components that follow best practices for accessibility.
TypeScript
Type-safe JavaScript superset ensuring code reliability, better developer experience, and catching errors during development rather than runtime.
Backend Integration
The frontend integrates with a Django REST Framework backend and PostgreSQL database. The three-tier architecture (presentation layer, application layer, and data layer) ensures scalability and maintainability, allowing for future modifications without interfering with current operation.
Design Process & UI Development
Development Methodology
The Agile technique was used to incorporate frequent feedback from student testers and enable iterative development. Because we place a strong focus on flexibility and incremental delivery, agile methods are particularly useful for student-facing projects whose needs change frequently. This was essential for coordinating development with the institutional requirements of UCT and user expectations.
Requirements Gathering
Collected feedback from advisors and students, analyzing constraints from the 2021 ADVICE project. Students cited difficulty using current handbooks and portals, while advisors emphasized repetitive questions that could be automated.
System Architecture Design
Designed a three-tier architecture with clear separation between presentation, application, and data layers. This modular design allows for future modifications without interfering with current operation.
Component Development
Built reusable React components following atomic design principles, ensuring consistency across all pages and features while maintaining mobile-first responsiveness.
Iterative Testing & Refinement
Conducted continuous user testing with 18 students, incorporating feedback to refine usability and accessibility. Regular team meetings and code reviews maintained consistency across the full stack.
Design Principles
Mobile-First
Designed for smartphones first, then enhanced for larger screens
Accessibility
WCAG 2.1 AA compliant with proper ARIA labels and keyboard navigation
Usability
Intuitive for students with limited technical skills
Core Frontend Features
Simplified Handbook Display
Streamlined access to Science and Commerce faculty handbooks
Students no longer must interpret complex text to access degree requirements and course information thanks to the simplification and organization of faculty handbooks. Faculty handbooks were parsed into a structured database, allowing students to dynamically search, filter, and explore. This enhances mobile usability and accessibility, reducing confusion compared to static PDF documents.
Helpbot Interface
AI-powered chatbot interface for common advising inquiries
Created a conversational UI with message bubbles, typing indicators, and suggested prompts. The Helpbot is an AI-powered chatbot that can handle common advising inquiries and lessen the workload for advisers. It is educated on UCT-specific data and previous student inquiries, providing prompt answers and raising complex problems to advisors when needed.
Ask an Advisor Feature
Structured communication channel for direct advisor queries
A function that enables students to send inquiries straight to the relevant adviser, categorized to guarantee that requests are routed effectively. Built a comprehensive form with validation, file upload capabilities, and clear feedback messages, acknowledging that certain questions still need to be answered by a human. This ensures the most qualified employee responds to questions, improving response efficiency and accuracy.
Degree Roadmap Tool
Interactive visualization of academic progress and course eligibility
The platform offers a degree roadmap tool that helps students better plan their studies by visualizing their academic progress and using pass/fail outcomes to determine course eligibility for upcoming years. Developed an interactive roadmap showing course sequences, prerequisites, and degree requirements with filtering and search functionality.
FAQ Section
Searchable database of frequently asked questions
Students have instant access to typical responses through a searchable database of commonly asked questions built from previous inquiries. This enhances the Helpbot by providing a static fallback option, as students frequently prefer self-service solutions before interacting with chatbots.
Glossary
Comprehensive academic terminology reference
First-year students and individuals who are not familiar with higher education surroundings can understand academic and institutional terminology thanks to a well-organized glossary. The terminology is a significant barrier to students' use of academic portals, making this feature essential for accessibility.
Find Advisor Directory
Searchable directory of advisors by faculty and expertise
The advising process is made more transparent and navigable with a directory of advisors that can be searched by professor and area of expertise. This addresses student frustration when they are unsure of "who to ask" for specific questions.
Courses Page
Interactive course catalog with filtering and search
Requirements, prerequisites, credits, and descriptions are shown in an interactive course catalog designed for dynamic navigation and filtering. Implemented accordion components and tabs for organized information display with quick access to relevant sections, directly addressing students' needs for simplified course discovery.
Challenges & Solutions
Responsive Design Across Devices
CHALLENGE
Ensuring consistent performance across smartphones, tablets, and desktops. The degree roadmap was particularly challenging to display on mobile due to complex course hierarchies.
SOLUTION
Implemented mobile-first approach with collapsible sections and horizontal scrolling. Added toggle between list and visual views based on device size.
Helpbot Integration
CHALLENGE
Performance issues with long conversation histories caused lag. Unclear student queries challenged the NLP algorithms.
SOLUTION
Implemented virtual scrolling and message pagination to render only visible messages. Added optimistic UI updates for responsive feel while awaiting backend responses.
Security & Privacy Compliance
CHALLENGE
Meeting POPIA compliance for sensitive student-advisor communications. Ensuring WCAG 2.1 AA accessibility standards while maintaining modern design aesthetics.
SOLUTION
Implemented encryption and authentication for secure communications. Conducted thorough accessibility audits with proper ARIA labels, keyboard navigation, and sufficient color contrast.
System Performance at Scale
CHALLENGE
Anticipated performance bottlenecks during peak loads like course registration periods.
SOLUTION
Optimized rendering with React memoization, implemented code splitting for faster loads, and used efficient state management to minimize re-renders.
Testing & Evaluation
Task Difficulty Rating
Participants
Recommend UCT Adopt
Evaluation Methodology
The purpose of the MyAdvisor evaluation was to gauge the system's functional efficacy as well as non-functional attributes that affect adoption, like usability and design quality. Eighteen undergraduate students from the faculties of Science and Commerce participated in a user testing study. Ten representative advising tasks spanning the primary system features were required of each participant.
Participants were asked to rate the difficulty of each task after doing it, with 1 denoting "very hard" and 5 denoting "very easy." The overall design and the possibility of institutional adoption were evaluated by two further non-functional evaluation questions. This evaluation methodology was selected in accordance with best practices in usability research.
Functional Evaluation Tasks
Retrieving course prerequisites
Create an account
Locating an advisor in the Find Advisor page
Submitting a question through Ask an Advisor
Browsing courses and credits
Using the Helpbot for FAQs
Navigating the FAQ section
Consulting the glossary
Viewing progress through degree roadmap
Comparing handbook information
Key Findings
Functional Success
The majority average of 5 evaluations from all 18 participants were significant since they showed that students found the system to be user-friendly and intuitive in addition to proving its technical functionality. The system successfully addressed the main pain points found in previous research and throughout the project motivation phase.
Design Quality
Participants gave the design a 5/5 rating, validating the mobile-first, accessible approach. The clean visual hierarchy, intuitive navigation, and responsive layout were particularly praised by users.
Institutional Value
The resounding support for institutional adoption underscores MyAdvisor's capacity to revolutionize UCT advising. All participants unanimously recommended that UCT implement the system, demonstrating strong confidence in its real-world applicability.
Reflections & Learnings
Project Impact
The platform successfully resolved recurring student advising issues at UCT. Results showed considerable decreases in task completion time and error rates when using the streamlined interface versus static PDF handbooks.
Technical Growth
Gained deep experience with React ecosystem, modern state management, and performance optimization. TypeScript improved my ability to write maintainable code, while Tailwind CSS taught utility-first design and mobile-first responsive patterns.
User-Centered Design Validation
User testing revealed assumptions about behavior that didn't match reality, reinforcing the importance of iterative design and early feedback. The 100% satisfaction rate validated our user-centered approach and continuous refinements.
Collaboration and Integration
Working with chatbot and database team members taught valuable lessons about API design and clear documentation. The three-tier architecture enabled concurrent development and maintained consistency across the full stack.
Future Potential
Unanimous positive response highlights potential for institutional adoption and scalability beyond Science and Commerce faculties. The architecture provides a foundation for expansion throughout UCT and potentially to other universities.
Supporting Materials
Final Paper
Complete documentation of the frontend development process, design decisions, technical implementation, and evaluation results.
Literture Review
Initial project proposal outlining goals, methodology, and expected outcomes for the frontend component.
Source Code
Complete frontend source code including all React components, styles, and configuration files.
Live Demo
Access the live MyAdvisor application to experience the frontend implementation firsthand.
(External, non-permanent link)
Additional Resources
- Design Mockups and Wireframes
Visual design process documentation
- User Testing Results
Detailed findings from 18 user testing sessions with evaluation graphs
- Accessibility Audit Report
WCAG 2.1 AA compliance testing results
- System Architecture Documentation
Three-tier architecture diagram and integration specifications
Credits & Acknowledgements
Project Team
- •Ethan Allies - Frontend Development (React.js, Next.js, Tailwind CSS, TypeScript)
- •Dylan Howard - Chatbot Development (NLP, Hugging Face Transformers)
- •Mitchell Flanegan - Database Development (Django REST Framework, PostgreSQL)
Supervision
Aslam Safla, Department of Computer Science, University of Cape Town
Special Thanks
Thank you to the 18 UCT Computer Science students from the Science and Commerce faculties who participated in user testing and provided invaluable feedback that shaped the final product. Your insights were instrumental in achieving the unanimous 5/5 ratings across all evaluation metrics.Thanks to Craig Balfour for setting up the server and providing help with management.
References
This project builds upon insights from the 2021 ADVICE project and incorporates research on chatbot-driven advising systems, hybrid AI-human platforms, and mobile-first usability approaches in higher education.