Client DetailsI just finished helping Frostburg State University with their major site wide redesign. Now it was time to look at individual applications and optimize each app. View project
Frostburg State University had a previous Online Directory built on an ASP/.NET stack. They had initially chosen this stack for the easy integration with IIS and Active Directory due to having a limited web team. The previous online directory had a very cluttered design; there were multiple form fields for searching each individual AD Attribute (one for first name, last name, etc) and multiple checkboxes for options like case sensitivity. The form also had a hidden priority, so filling in one field would override another without any warning. After about two years of being on the FSU Web Team I was tasked with redesigning the entire system from scratch to fit the new website and server architecture I had also recently planned and rebuilt.
Seconds to Load
Avg. Requests Per-Day
% Avg. Down Time
- Easy to Use - Universities can struggle to adapt to new technology so the new product needed to be simple and easy to use. The previous directory had tons of check boxes and switches for filters, which caused numerous complaints.
- Speed - the previous directory could take upwards of 2 minutes to entirely search all users and groups.
- Efficiency - the previous system, due to the way it was programmed made multiple, sometimes upwards of 10-15, AD calls per-search. With 2K searches a day this adds up quickly!
In order to simplify the directory as much as possible I wanted to remove as much user interaction as possible. The previous form had so many additional fields, buttons, checkboxes, and drop downs that it easily overwhelmed people. We had many complaints of users not being able to find the proper filter or toggle for something. Early on I realized this was due to the cluttered visual design and decided a minimalist approach would probably be best.
In order to meet that end I decided to do some User Experience research (UX) on simple searching options. In the end I decided to go with a solution commonly called an "OmniBar." An Omnibar is just one search field that intelligently searches everything. Google Chrome was the first large software project to implement this design type and it was extremely popular due to its simplicity.
All of this is accomplished with a single Active Directory call which is wrapped in two GraphQL calls.
During the full website redesign a GraphQL interface was setup to handle all web data transactions. To maintain this a new GraphQL Query Schema was written to allow users to search AD. The Query was written to accept a raw Active Directory Query that VueJS would generate and search based on that query.
As the Active Directory query is being ran, the GraphQL Schema starts working on the Department List as well. The Department list is generated based off a Django Database and then joined together with the AD Query. Everything is serialized as JSON and sent back to VueJS to be displayed.
A new app was added to Frostburg's Django instance to handle all of the GraphQL and Python logic needed for this project. This app handled the primary GraphQL Queries as well as a number of helper functions and the Department List. Previously the Department List was read directly out of a CSV text file. For our new application, this file was converted to a Postgres Database drastically decreasing loading times.
This application also handled all of the Active Directory integration. While Django does not support AD integration out of the box, multiple great OSS projects have worked to provide this functionality. After a thorough review, I decided to use django-python3-ldap because at the time, it was the only project I could find that supported Python3.
The VueJS app follows a very simple implementation, just utilizing a debounce function on the Omnibar. With that function, as soon as the user breaks in typing, the entire search function is launched in the background. An Active Directory Query is built on demand based off of the users input, sent to the GraphQL API, and returned all under a second!
Frostburg State University saw real results! You can too! Contact me about your project now!
This project was an overwhelming success. When large projects like this are launched we generally expect a push back a few users, however in this case there were no issues. Surveys given to students through the Student Government Association rated the update as a 5/5 in 100% of responses!
Seconds to Load
Avg New Sessions
I loved the (Winter Mailing) card and so did many of the faculty/staff/students/alumni and friends of Frostburg State University that received it. It was very well done and I appreciate the job you did on it.
Jeremy assisted Associate VP of Marketing Colleen Stump with streamlining critical pages on FSU's web page including the main page, academic search, the Google search, and the main pictures. Monthly meetings with Colleen ensured all of her specialized requests and needs were met with her gratefulness.
As positive comments were received by very important people on campus such as Colleen Stump, it demonstrated Jeremy's ability to communicate better than most with end users.
Jeremy has taken care of the needs of end users that sometimes aren't the easiest to deal with.
Jeremy is a member of the FSU web team and has done great job as the university has transformed with the new branding which required a redesign of the web page. Jeremy has provided swift assistance whenever I have come into the office with web page issues or in need of help with CMS issues. I know I can depend on Jeremy to get the job done quickly and his can do attitude makes him a pleasure to work with.
[The Frostburg State University] Online Directory looks good and the new features are very helpful.
After the overview you presented about the revised Academic Dismissal Website, Maureen and I feel comfortable that the revisions you made will highly improve the site and will respond to both the students’ and this office’s needs.
We appreciate very much your work great assistance with this request.