This project revitalizes Fordham University’s highly trafficked Ram Van website by overhauling its outdated user interface. The redesign enhances user experience and navigation, ensuring the platform meets modern standards and effectively serves the needs of the Fordham community.
ROLE
UX Designer
Developer
The Inspiration
Having attended classes at Rose Hill for the past two semesters, I regularly relied on Fordham’s Ram Van website and became increasingly frustrated with its outdated user interface. This personal experience motivated me to undertake a redesign, aiming to create a more intuitive and visually appealing platform that better serves the needs of the Fordham community.
The Problem
1. Outdated Visual Design:
• The overall UI feels dated, with limited use of modern design principles like clean typography, white space, and visually appealing buttons.
• The maroon-heavy palette lacks contrast and makes navigation less engaging.
2. Inefficient Use of Space:
• Key information like upcoming vans and current average trip time is not effectively prioritized or visually separated.
• The homepage layout feels cluttered due to the close proximity of elements like buttons, text blocks, and trip details.
3. Navigation Challenges:
• The current button design does not clearly indicate primary actions (e.g., “Reservations”) vs. secondary ones (e.g., “Account Info”).
• There’s no logical grouping of tasks, making it harder to intuitively find what users need.
4. Limited Visual Hierarchy:
• Important information, such as “Free Passes” and “Upcoming Vans,” lacks distinct visual emphasis.
• The heavy reliance on text blocks (e.g., in the “E-Ticketing” section) makes it difficult for users to quickly scan and find relevant information.
5. Non-Responsive Design:
• It’s unclear if the current layout is optimized for mobile devices or smaller screens, which are critical for students on the go.
6. Icons and Visual Indicators:
• While icons are present, they are small and lack consistency, which diminishes usability.
• There is little to no use of progress indicators or feedback when interacting with the system (e.g., booking confirmation).
Redesign Goals
1. Modernize the Visual Design
• Create a clean, engaging UI aligned with Fordham’s branding while improving usability.
2. Streamline Navigation
• Simplify pathways to key actions like booking reservations and checking schedules.
3. Optimize for Mobile
• Implement a fully responsive design for seamless use across devices.
4. Enhance User Feedback
• Incorporate confirmation messages, live updates, and progress indicators to guide users through their journey.
5. Improve Accessibility
• Ensure compliance with WCAG standards for an inclusive user experience.
Development Process
To bring this redesign to life, I approached the project with modern tools and techniques to create a functional and visually appealing prototype. Here’s how I made it happen:
1. Building the Foundation:
• I used React with TypeScript for its flexibility and ability to handle scalable, dynamic components.
• To speed up development, I worked with Vite, which made the whole process smoother and faster.
2. Designing the Look and Feel:
• Styling was done with Tailwind CSS, which made creating a responsive and polished design effortless.
• I crafted a custom color palette inspired by Fordham’s branding to keep the design cohesive and recognizable.
• For an extra layer of user personalization, I included a dark/light mode toggle using next-themes.
3. Managing Dates and Schedules:
• Since scheduling is key, I used date-fns to handle dates and times efficiently.
• I also incorporated an interactive calendar component using react-day-picker, making trip planning straightforward for users.
4. Building the Interface:
• Accessible modals, dropdowns, and other interactive elements were created with @headlessui/react, ensuring the site is inclusive for everyone.
• I added modern icons with Lucide React to keep the interface clean and consistent.
5. Staying Organized:
• I relied on TypeScript to catch errors early and keep my code reliable.
• Tools like ESLint and PostCSS ensured everything stayed clean, efficient, and compatible across browsers.
6. Going Live:
• I deployed the site on Netlify, which allowed for quick and seamless hosting, making it easy to share my progress.
7. What’s Next:
• For this site to be fully functional, it would need to integrate with Duo Mobile for secure logins and sync directly with the live Ram Van schedule to provide real-time updates.
• These additions would elevate the prototype into a fully operational tool for Fordham students.
Reflection
In my journey to becoming a multifaceted designer, I have embraced frontend development as a powerful tool to bring my ideas to life. This project was different from my usual approach—I jumped straight into development rather than dwelling in the prototyping stage because the outdated Ram Van website was a problem that had been itching at me since I first encountered it. Fueled by my personal frustration and a desire to make a tangible impact, I pushed past the initial challenges and focused on actualizing my vision.
Taking the initiative to redesign the website and sharing it with the Ram Van office was a rewarding experience. While they applauded my efforts and shared that Fordham IT is already working on improving the platform, this project proved to me that taking bold action can open doors and inspire change, even if the solution isn’t implemented immediately. I now see development not as a burden but as an exciting, rewarding challenge that allows me to bridge the gap between ideas and execution. This project reinforced the value of initiative and showed me how design and development together can create real opportunities for impact.
This project not only marked a turning point in how I approach design but also set a foundation for my future as a designer who takes initiative and executes ideas from start to finish. Moving forward, I am excited to continue refining my frontend development skills and using them to create meaningful, user-centered solutions. I’ve realized that the combination of design and development empowers me to tackle real-world problems head-on and contribute to experiences that genuinely improve people’s lives. This experience has fueled my drive to approach future challenges with the same passion and determination, knowing that even small steps can spark big change.
The Inspiration
Having attended classes at Rose Hill for the past two semesters, I regularly relied on Fordham’s Ram Van website and became increasingly frustrated with its outdated user interface. This personal experience motivated me to undertake a redesign, aiming to create a more intuitive and visually appealing platform that better serves the needs of the Fordham community.
The Problem
1. Outdated Visual Design:
• The overall UI feels dated, with limited use of modern design principles like clean typography, white space, and visually appealing buttons.
• The maroon-heavy palette lacks contrast and makes navigation less engaging.
2. Inefficient Use of Space:
• Key information like upcoming vans and current average trip time is not effectively prioritized or visually separated.
• The homepage layout feels cluttered due to the close proximity of elements like buttons, text blocks, and trip details.
3. Navigation Challenges:
• The current button design does not clearly indicate primary actions (e.g., “Reservations”) vs. secondary ones (e.g., “Account Info”).
• There’s no logical grouping of tasks, making it harder to intuitively find what users need.
4. Limited Visual Hierarchy:
• Important information, such as “Free Passes” and “Upcoming Vans,” lacks distinct visual emphasis.
• The heavy reliance on text blocks (e.g., in the “E-Ticketing” section) makes it difficult for users to quickly scan and find relevant information.
5. Non-Responsive Design:
• It’s unclear if the current layout is optimized for mobile devices or smaller screens, which are critical for students on the go.
6. Icons and Visual Indicators:
• While icons are present, they are small and lack consistency, which diminishes usability.
• There is little to no use of progress indicators or feedback when interacting with the system (e.g., booking confirmation).
Redesign Goals
1. Modernize the Visual Design
• Create a clean, engaging UI aligned with Fordham’s branding while improving usability.
2. Streamline Navigation
• Simplify pathways to key actions like booking reservations and checking schedules.
3. Optimize for Mobile
• Implement a fully responsive design for seamless use across devices.
4. Enhance User Feedback
• Incorporate confirmation messages, live updates, and progress indicators to guide users through their journey.
5. Improve Accessibility
• Ensure compliance with WCAG standards for an inclusive user experience.
Development Process
To bring this redesign to life, I approached the project with modern tools and techniques to create a functional and visually appealing prototype. Here’s how I made it happen:
1. Building the Foundation:
• I used React with TypeScript for its flexibility and ability to handle scalable, dynamic components.
• To speed up development, I worked with Vite, which made the whole process smoother and faster.
2. Designing the Look and Feel:
• Styling was done with Tailwind CSS, which made creating a responsive and polished design effortless.
• I crafted a custom color palette inspired by Fordham’s branding to keep the design cohesive and recognizable.
• For an extra layer of user personalization, I included a dark/light mode toggle using next-themes.
3. Managing Dates and Schedules:
• Since scheduling is key, I used
date-fns to handle dates and times efficiently.
• I also incorporated an interactive calendar component using react-day-picker, making trip planning straightforward for users.
4. Building the Interface:
• Accessible modals, dropdowns, and other interactive elements were created with @headlessui/react, ensuring the site is inclusive for everyone.
• I added modern icons with Lucide React to keep the interface clean and consistent.
5. Staying Organized:
• I relied on TypeScript to catch errors early and keep my code reliable.
• Tools like ESLint and PostCSS ensured everything stayed clean, efficient, and compatible across browsers.
6. Going Live:
• I deployed the site on Netlify, which allowed for quick and seamless hosting, making it easy to share my progress.
7. What’s Next:
• For this site to be fully functional, it would need to integrate with Duo Mobile for secure logins and sync directly with the live Ram Van schedule to provide real-time updates.
• These additions would elevate the prototype into a fully operational tool for Fordham students.
Reflection
In my journey to becoming a multifaceted designer, I have embraced frontend development as a powerful tool to bring my ideas to life. This project was different from my usual approach—I jumped straight into development rather than dwelling in the prototyping stage because the outdated Ram Van website was a problem that had been itching at me since I first encountered it. Fueled by my personal frustration and a desire to make a tangible impact, I pushed past the initial challenges and focused on actualizing my vision.
Taking the initiative to redesign the website and sharing it with the Ram Van office was a rewarding experience. While they applauded my efforts and shared that Fordham IT is already working on improving the platform, this project proved to me that taking bold action can open doors and inspire change, even if the solution isn’t implemented immediately. I now see development not as a burden but as an exciting, rewarding challenge that allows me to bridge the gap between ideas and execution.
This project reinforced the value of initiative and showed me how design and development together can create real opportunities for impact.
This project not only marked a turning point in how I approach design but also set a foundation for my future as a designer who takes initiative and executes ideas from start to finish. Moving forward, I am excited to continue refining my frontend development skills and using them to create meaningful, user-centered solutions. I’ve realized that the combination of design and development empowers me to tackle real-world problems head-on and contribute to experiences that genuinely improve people’s lives. This experience has fueled my drive to approach future challenges with the same passion and determination, knowing that even small steps can spark big change.
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!
