MyUI Dashboard
A modernized online dashboard streamlining access to university services for the University of Idaho community
Introduction
MyUI at the University of Idaho is a modernized online dashboard designed to streamline access to various university services for students, faculty, and staff. It replaced the older VandalWeb system on September 9, 2024.
As the lead developer on this project, I was responsible for creating custom React components and cards that integrate seamlessly with the Ellucian Experience platform, providing users with a unified and personalized experience.
Project Highlights
- •Modernized dashboard replacing legacy VandalWeb system
- •Built on the Ellucian Experience platform
- •Customizable interface with card-based architecture
- •Mobile-friendly responsive design
- •Single sign-on integration with university credentials
Project Overview
MyUI offers a unified, personalized experience with features organized into "cards," which categorize and integrate different administrative and academic functions into one platform.
The dashboard consolidates tools like financial aid management, course registration, academic records, housing information, and faculty advising into a single interface, significantly improving the user experience for the entire university community.
Users can configure their dashboard with cards relevant to their needs, creating a personalized experience that prioritizes the information and tools most important to them.
Technology Stack
Key Features
Centralized Access
MyUI consolidates tools like financial aid management, course registration, academic records, housing information, and faculty advising into a single interface.
Customizable Dashboard
Users can configure their dashboard with cards relevant to their needs, such as class schedules, library resources, health and wellness services, and more.
Single Sign-On
It allows seamless login using University of Idaho credentials for all integrated systems, eliminating the need for multiple logins.
Mobile-Friendly Interface
Designed for accessibility on both desktop and mobile devices, ensuring students and faculty can access important information from anywhere.
My Role as Lead Developer
I was chosen as the lead developer for the MyUI dashboard due to my advanced skillset with React and deep understanding of user experience design principles. My responsibilities included:
- •Designing and implementing custom React components for the dashboard
- •Creating specialized cards for different university services
- •Ensuring seamless integration with the Ellucian Experience platform
- •Collaborating with university departments to understand their specific needs
- •Implementing responsive design principles for cross-device compatibility
Library Card Development
One of my key contributions was the development of the Library Card, which allows students to:
- •Reserve study rooms directly from the dashboard
- •Book time on 3D printers and other specialized equipment
- •Check availability of library resources in real-time
- •Access digital collections and research databases
Accounts and Billings Card
Another significant component I developed was the Accounts and Billings card, which leverages Ethos Business Process APIs to:
- •Display real-time account balances and financial information
- •Show detailed transaction history with filtering capabilities
- •Integrate with payment providers through the Ethos serverless API pipeline
- •Provide notifications for upcoming payment deadlines
Code Availability Notice
The code for these components and other custom elements of the MyUI dashboard is proprietary and protected under the University of Idaho's intellectual property policies. As such, the actual implementation details cannot be shared publicly.
The component architecture follows React best practices with a focus on modularity, reusability, and performance optimization. The implementation includes custom hooks for resource fetching, state management for reservation systems, and responsive UI elements.
Benefits for the University Community
For Students
Simplifies workflows by integrating academic planning tools, assignment tracking, and registration processes in one place. It also displays important deadlines and notifications to help students stay organized.
For Faculty
Provides tools for advising and course management, including access to student GPAs, class loads, and the ability to manage holds directly from the dashboard.
For Administration
Increases efficiency by reducing the need to navigate multiple systems, centralizing all essential university functions into one platform, and providing better data insights.
Technical Implementation
React Component Architecture
The MyUI dashboard is built using a modular React component architecture, allowing for:
- •Reusable Components: Core UI elements that maintain consistency across the platform
- •Service-Specific Cards: Custom components for different university departments
- •API Integration: Seamless connection to university data systems
- •State Management: Efficient handling of user preferences and data
- •Responsive Design: Adaptive layouts for all device sizes
Integration Challenges
Working with the Ellucian Experience platform presented several integration challenges:
- •Adapting to platform-specific APIs and authentication flows
- •Ensuring consistent performance across different university systems
- •Managing data synchronization between legacy systems and the new dashboard
Performance Optimization
To ensure a smooth user experience, several performance optimizations were implemented:
- •Lazy loading of card components to reduce initial load time
- •Caching strategies for frequently accessed data
- •Optimized rendering with React.memo and useCallback
- •Efficient state management to minimize re-renders
Ethos Integration
Leveraging Ellucian Ethos Platform
A critical aspect of the MyUI project was its integration with Ellucian's Ethos platform, a cloud-based integration solution designed specifically for higher education institutions. As lead developer, I worked extensively with Ethos Business Process APIs to connect the dashboard with the university's core systems.
Ethos Integration Approach
- •Data Integration: Utilized Ethos's hub-and-spoke model to replace point-to-point integrations
- •API Implementation: Leveraged pre-built APIs and the Ellucian Ethos Data Model
- •Identity Management: Implemented secure single sign-on using SAML2 protocols
- •Workflow Automation: Created custom workflows using Ethos Business Process APIs
Business Process API Implementation
For the Library Card component and other key features, I implemented Ethos Business Process APIs to:
- •Access real-time data about library resource availability
- •Process room and equipment reservations through serverless API pipelines
- •Implement event publishing for real-time updates across integrated systems
- •Ensure secure data transmission using HTTPS TLS v1.2+ and API key authentication
Technical Challenges and Solutions
Working with Ethos Business Process APIs presented several technical challenges that required innovative solutions:
Challenges
- •Data Model Complexity: Navigating the extensive Ethos Data Model structure
- •API Rate Limiting: Managing API call frequency to prevent throttling
- •Real-time Updates: Ensuring timely data synchronization across systems
- •Authentication Flows: Implementing secure, seamless authentication
Solutions
- •Custom Data Adapters: Created adapters to transform and normalize data
- •Caching Strategy: Implemented intelligent caching to reduce API calls
- •Event-Driven Architecture: Used RabbitMQ for real-time messaging
- •Token Management: Developed a robust token refresh mechanism
Implementation Note
While the specific implementation details are proprietary, the integration approach followed Ellucian's best practices for Ethos Integration. This included using the hub-and-spoke model for data integration, implementing secure API calls, and leveraging the Ethos Data Model for consistent data representation across the platform.
Results and Impact
The launch of MyUI has significantly improved the digital experience for the University of Idaho community:
- •Increased Efficiency: Reduced time spent navigating between different university systems
- •Improved Accessibility: Mobile-friendly design allows access from any device
- •Enhanced User Satisfaction: Positive feedback from students and faculty on the intuitive interface
- •Streamlined Processes: Simplified administrative tasks for both students and staff
The Library Card component, in particular, has seen high engagement rates, with a significant increase in study room reservations and 3D printer usage since its implementation.
Conclusion
The MyUI project represents a significant modernization of the University of Idaho's digital infrastructure. As lead developer, I was able to leverage my React expertise to create a user-friendly, efficient platform that serves the diverse needs of the university community.
The card-based architecture provides flexibility for future expansion, allowing new services to be integrated seamlessly as the university's needs evolve. The successful implementation of MyUI demonstrates the power of modern web technologies to transform institutional systems.
Looking forward, there are opportunities to further enhance the platform with additional personalization options, deeper integration with academic tools, and expanded mobile capabilities.