PlacementHub
About
PlacementHub is a centralized platform developed to simplify placement management for students, designed as part of a team project at the University of Birmingham. The web application was built using JHipster and the Angular framework to create eight vertically sliced features. These features work cohesively to provide students with an efficient, all-in-one platform to manage their placements, accessible on laptops, phones, and tablets.
The app includes features such as a dashboard and placement listing, a kanban-style application tracker, a calendar, a notes area, a ratings page, resource articles and videos, company profiles, and an AI-powered chatbot for easier navigation. This tool helps students effectively manage their placement applications from start to finish, helping their process of applying, tracking, and interacting with companies.
Fullstack Developer & UI/UX Designer
May 2024
Angular
SASS
Java Spring Boot
PostgreSQL
GitLab CI
Figma
Team (Dev & UI/UX)
8
Total Web App Responsive Pages
Challenge
The key challenge was designing a platform that would integrate multiple features seamlessly while maintaining simplicity and usability across various devices. The platform needed to accommodate features such as a kanban tracker and a calendar without overwhelming users.
Additionally, ensuring that the interface remained accessible and inclusive to all students, including those with disabilities, required thoughtful design choices.
Responsibility
As the full-stack developer and UI/UX designer, my role was twofold:
I developed the Dashboard and Placement Listing features. The Dashboard shows users a summary of their application progress, pulling real-time data from the database, while the Placement Listing allows users to search for placement opportunities and explore detailed job descriptions.
As a UI/UX Designer, I was also responsible for designing the user interface for these features, ensuring that the platform was both user-friendly and visually appealing. I worked closely with other team members to ensure consistency across the various sections of the platform.
Process
Research & Analysis: We began by identifying the key challenges students face while managing placements, including tracking application stages and organizing job research. User feedback and surveys helped define the features that would make PlacementHub most effective.
Feature Development:
The Dashboard was designed to provide users with an at-a-glance summary of their placement progress. It dynamically pulls application statuses from the database, updating the user in real-time.
The Placement Listing allows students to search for opportunities by role or company, displaying job details in a pop-up for quick access.
UI/UX Design: Using Figma, I designed wireframes and prototypes for both the Dashboard and Placement Listing. The focus was on ensuring a clear and intuitive layout, which would allow students to easily navigate between features without getting overwhelmed.
Collaboration & Integration: I worked closely with other team members to ensure that all features, such as the Kanban Tracker, Calendar, Notes Area, and AI Chatbot, were integrated smoothly, creating a cohesive user experience across the entire platform.
Key Takeaways
The PlacementHub project highlighted the importance of balancing functionality with simplicity in web development. Integrating diverse features into one platform required careful planning, especially when considering the user experience across different devices. Working as both the full-stack developer and UI/UX designer, I learned how crucial it is to ensure that features not only work efficiently but also provide a seamless, intuitive experience for the end-user. Additionally, the collaboration among team members played a significant role in delivering a consistent and unified platform for students.