Purdue CCO Website Redesign
OVERVIEW
This year-long project was completed as part of a Senior Design Capstone class at Purdue University.
I worked on a team of five to redesign the Purdue Center for Career Opportunities’ website focusing
on information architecture and highlighting the resources offered by the CCO. For this project, we worked directly with a stakeholder from the CCO and met regularly with them throughout the year.
ROLE
UX Designer // Content Audit, Sketching, Prototyping (low and high fidelity), User Testing, Heuristic Analysis, Site Map, Sprints // Figma
DATE
August 2020 - May 2021
Let's get (re)designing!
The first semester was focused on user-centered research to determine which areas of the website to focus on redesigning during the second semester. Through this year-long project, I was able to:
💻 Develop remote-working best practices. Although we were physically back on campus, Covid was still raging and it wasn't safe to meet in-person, so nearly the entirety of this project was completed remotely. I learned the importance of consistent, digital communication when in-person communication isn't possible. We had weekly meetings and check-ins throughout the year to keep ourselves on track, as well as a digital sprint schedule.
🪜 Provide tiered suggestions. The CCO has limited time and resources, so we were tasked with providing a variety of solutions to the redesign, including some things that could be implemented quickly and some that were desirable but could take a lot longer. The team had to think critically to form three separate tiers of solutions.
🎤 Present to external stakeholders and be featured on Purdue's CCO Instagram for the project. At the end of the year, my team had the opportunity to present our redesign to staff of the Career Center for Opportunities, which was a gratifying experience. We also were featured on the Purdue CCO Instagram, which was a fun touch and rewarding as well.
The Suggestions
Tiered Suggestions
As mentioned above, we delivered tiered suggestions as final deliverables.
The CCO has limited resources regarding the design and upkeep of their website, including student coders and a simple content management system. Because of this, we wanted to provide as many design suggestions as possible for improving the website but we also wanted our design suggestions to be useful, being conscious of the CCO’s limited resources. So, we decided to provide design suggestions in a tiered fashion.
Easy to Implement
The bottom tier consists of minor changes that can easily be achieved with the CCO’s existing resources. Since it's at the bottom of the pyramid, these are the most numerous design suggestions that the team ideated. We used Figma to create high-fidelity mockups of these designs that would be delivered to the CCO to serve as examples of how the changes should look when implemented.
We updated the design of the side navigation to better represent where the user is on the website; this will help them know where they’ve been if they need to get back and where they could go.
We changed the design of the video players so that users know that this element is a part of the page that they can interact with.
We included “people also visit” sections on the bottom of the page and “next and previous buttons” to encourage users to visit other parts of the website, even after they’ve found the information that they were looking for.
We created many different “bullet point alternatives,” which are visual designs that can be used instead of listed bullet points; this allows the user to skim before reading and breaks up large blocks of unengaging text.
We designed links so that users know what happens when they click on them, such as whether it will take them to a download or an external page.
We updated the breadcrumbs on the top of the page to help the user navigate the site better.
Harder to Implement
The middle tier consists of changes that would take more substantial time and outside resources to apply to the website, such as creating more pages and content using the existing content management system or changing the design and layout of the pages using a student coder or outside coding experts. These designs are not impossible for the CCO to implement, but they would be changes that need more time and planning.
One of our suggestions for this tier was grouping individual pages together into a topic, and creating a “topic page” that previews all the content on each individual page; this would better allow the user to skim and know what a section was about, rather than having to fully read everything to find information that they’re looking for.
We created a “student landing page” that would serve as an introduction to this portion of the entire CCO website, with quick links to resources, events, myCCO, and other features.
This would require adding an entirely new page to the CRM, which is why it's in this tier.
Hardest to Implement
The top tier consists of a few ideas that would take significant time and resources to implement into the website. These ideas were part of our initial ideating phase, but we put them aside when we realized that they were out of the scope of this project. Instead, we used them as inspiration for what the website could look like in the future.
The main theme for these ideas is to implement customizability into the website.
Using a student's Purdue Career Account Login, an initial survey after logging in would help the user find any pertinent information on the site quickly.
The ability to "star" or "save" pages to their personal account would encourage students to return to the website as a resource consistently.
The system could keep track of the student's career development journey with a consistent login, and potentially periodic updates from the student. This would give the website insight into what tabs to promote to a particular student (ie. resumes, or interview prep).
How did we get there?
Heuristic Analysis
We also conducted a heuristic analysis of the current, student side of the CCO website. We used Nielson’s Heuristics as a point of comparison, and judged the site against these heuristics, rating the severity along the way.
Consistency and Standards
The wording of the page title in the menu vs in the breadcrumbs is different. In the menu, it’s titled myCCO for Students, and in the breadcrumbs, it’s titled MyCCO Tips.
Aesthetic and Minimalist Design
This page has large chunks of text that describe important information about how to use myCCO and the benefits of using myCCO.
Important information, like how the myCCO account will not be active until a resume is uploaded, blends in with the other information.
Help Users Recognize, Diagnose, and Recover from Errors
After users click on the Pre-Med, -Health, -Law Advising tab in the drop-down, users are taken to a brand new page layout/website for Career Success relating to pre-professional advising. The issue with this is that users who accidentally click on this tab have to use the in-browser back arrow to go back to the drop-down they were previously exploring.
User Interviews and Usability Testing
We conducted interviews with eight Purdue Students about their use of the CCO website. As part of this interview, we also had the students participate in some usability testing tasks surrounding navigating the current side and finding specific pieces of information on the current site.
User Interviews
We interviewed peer consultants for the CCO - these are student employees who help other students utilize the resources the CCO has to offer. The peer consultants favored using the CCO handbook, a physical resource, rather than the website.
The peer consultants often avoided using the site - even though their job was centered around the CCO and its resources!
One glaring issue discovered from these interviews was that there was no existing homepage for students on the CCO website. The student section could only be accessed from a dropdown menu, which is very buried and hard to find.
Usability Testing
From usability testing of the current site, we had three main findings:
1. There was information overload on the current site. Students didn't know where to look or go from when they were trying to find what they were looking for.
2. The website resulted in many unmet expectations. The information structure on some of the pages didn't match the expectation. Some hyperlinks took the user off the CCO site which was unexpected.
3. There was a confusing information hierarchy. The site uses large blocks of text that are hard to skim easily, and the site is also inconsistent with breadcrumbs. One student mentioned "I don't know how to get back."
Below is a presentation from our second round of Usability Testing, conducted with our low-fidelity wireframes.