Project Information

Every year in the spring semester, James Madison University seniors within the College of Business and School of Media Arts and Design get together to create an integrating web application that serves and help find solutions to certain organizations and clients. In 2022, there were around 150 seniors from three classes that were organized into a dozen teams. It is their goal to compete and build the most functional application to the best of their knowledge. Our client this year was the Ole School Alumni Scholarship Group, in creating a functional system. In the end, I am proud to say that the team I have worked with has successfully taken the first place spot throughout this entire capstone! You can view the full capstone final presentation Facebook video below at time stamp 1:28:25!

Problem

This year's client was the JMU Ole School Alumni Scholarship Group (OSASG). They explained to the students that they seek a functional program/website that helps connect to their students and mentors within the OSASG. They needed a way to communicate with their students better, help organize information from both the student and administrators/mentors end. This will help connect with the students, whether it be assisting with internships, scholarships, jobs, and much more.

Vision

“The interface is not just a place to organize information, it is a place to build community”

The JMU students got together in different groups to create a solution to the OSASG's problem. The Computer Information and Science students would create the back-end and functionality of the site using the knowledge of C#, SQL, and more. While, the School of Media Arts and Design students would conduct user research and utilize HTML/CSS to create the front-end development of the site within the realm of User Experience and User Interface. My role in this project was to conduct user research, design product mockups, design and single handedly build the site through HTML/CSS.

Design Process

Since this is a completely new system for the OSASG, we have started the basic steps. In the beginning of our first sprint of the collaborative project, we have started by determining a design question.

We then conducted user research by researching who the OSASG are, what they do, and what is desired. Based off our research, we conducted project goals, user needs and a mood board.

Proceeding our research, we have conducted interviews with the OSASG administration and students to gather more data, created personas for a college student/alumni and a mentors perspective of what is needed for the system.

After collecting data and inspiration from researching and interviewing the OSASG team, we created a low fidelity site of the system, use case diagrams, and presented to members of the organization as well as JMU professors. We have created two different accounts to view the students account, as well as a mentor/admin account. We implemented viewing opportunities for students, viewing mentors, scholarships, and having the ability to apply to them. For the admin side, we implemented features of viewing student profiles, filter different opportunities, and creating new opportunities for the student. I was able to create our site and pages through Visual Studio Code with influences from Bootstrap and Javascript.

After presenting, we have received feedback of implementing additional features that the organization desires for the site:

• Students have the ability to “Save” opportunities for later viewing

• Create a landing page instead of the “Log In” page

• Have students have the feature to choose and rank their desired opportunity or mentor for the program

• Have the admins track students process of a certain application

• Approving new accounts and viewing student preferences

• Improving the navigation and adding more detailed features

Based on our feedback we have designed and created what was desired from the organization and complete our final product towards the end of the project.

We have redesigned the system as a whole while adding new features and improving the UX/UI experience for the system. Creating a landing page, providing information of what the OSASG is, having the capability to create accounts, apply/save opportunities, connecting with students, creating new opportunities and more. A short walkthrough around the site can be viewed below.

The Final Product