Embedded Files
Career Center migration, IA restructure, and home page functionality
Career Center migration, IA restructure, and home page functionality
The DePaul Career Center's website was one of the few that was still on a separate server from the rest of the university sites when we tackled it in spring of 2017. Migrating it to our Responsive SharePoint platform was a little different than usual, but just as interesting.
Their IA was clunky and they understood that it needed some work, so they (the client) took a stab at it and presented their ideas to us. The first iteration was heavily audience-based, which when mixed with topic-based can be confusing for the user and complicated for search engine optimization. Luckily, we had GA data to help with the main topic-based items.
They wanted to highlight their services to all three audiences: Students, Faculty & Staff, and Employers. Seeing as Students are their main audience and the bulk of the content is directed towards them, we settled on the main nav containing the most popular resources for students. Then, we visually separated the content for the other two audiences. We chose a different color and off-set the nav items for Faculty & Staff and Employers.
Old Career Center homepage (screenshot from 2005. It didn't change much from 2005- early 2017)
New Career Center homepage
(launched May 2017, screenshot from August 2017)
The home page was another challenge. There were a lot of things the client wanted to highlight and it was going to be a very busy, cluttered page. They wanted to have calls-to-action for each audience, display their social media presence, link to their blog, and link to the login for their third-party job/internship platform.
We needed to come up with a seamless design that allowed them to show off their services (being a service-driven office) and link to all the places that mattered to them without a million links and calls-to-action cluttering the page.
So, I came up the idea for with what I now refer to as a "dropdown header" - a header image with a dropdown menu overlay that asks the user a question, and based on their answer, links them directly to the corresponding content (without directly calling out the audience for each answer).
It saves space and creates a simple interaction where the user answers a question for what they're looking for.
First, I did a rough wireframe sketch to show the designer and developer I was working with. They were able to implement it beautifully.
Screenshot of the dropdown header once clicked by the user
We mapped out what we needed, our designer mocked up my wireframe in sketch, we presented the mockup to the client, and they loved it. We settled on seven items to pilot the options in the dropdown and based them on the most hit pages in the site and what the Career Center said students come to them for most.
I built the SharePoint List that backed the functionality, added the content, and our developer coded it up. After a short round of testing, it was ready to launch. It is one of my favorite solutions that we've ever executed.
It looks great on mobile too!
It was an excellent collaborative effort between myself, our designer and our front-end developer.
Google Sites
Report abuse