Designed by Freepik
Citizen Scholars
Realigning Development
The redesign MSU's Citizen Scholars program website to fit new needs and management.
Overview
Role
Product Design Consultant
Timeline
July - Aug, 2024
Deliverables
Development Plan
UI Mockups
Tools
Canva
Wordpress
The Problem
The Citizen Scholars are a Michigan State University program that develops the skills and careers of arts and humanities students. The program had recently fallen under new leadership, and the new program director saw how the current Citizen Scholars website had become a place filled with outdated information, and systems that no longer served the purpose of the organization.
My Role
I was chosen by the Citizen Scholars program to be their personal consultant on a one-month contract. While this was a solo project, I did work closely with the program's Director and Graduate Assistant Director to ensure I was adhering to their vision for the program.
Project Goals
-
Fully understand the current systems in place.
-
Don’t interfere too much with the existing site structure.
-
Update the internal systems with the new program goals in mind.
-
Improve the information architecture to make the site easier to navigate.
-
Make the site friendly to first-time users.
-
Include new information relevant to the program and its goals.
-
Consider the needs of the website users.
Abstract
In order to fully understand the website’s current state and check for major errors, I started out by conducting QA, noting bugs and logistical errors with the site such as responsiveness errors. I brought my concerns and ideas to client interviews, where I discussed possible solutions to the current issues. I also used these client meetings to get the know the program as a whole, so I had a solid understanding of the tools and platform that the program and its specific users will benefit from.
I tackled the site page by page, redesigning everything from the “student stories” system to the contact page layout. I focused on the functionality of the site, and having clear action items on each page. In the end, my final deliverable to the program was a 24-page document that housed a plan to develop and implement the necessary changes. I created UI mockups for further clarity, and you will find these throughout the final document.
Let's get into the details
Existing Materials
For this project, I was building off of an existing version of the website. I wanted to make sure that I preserve the MSU branding and design present here, but that I address the concerns of dated information and difficulty navigating the site.
For this project, I was building off of an existing version of the website. I wanted to make sure that I preserve the MSU branding and design present here, but that I address the concerns of dated information and difficulty navigating the site.
Citizen Scholars homepage, circa June 2024
User Base
Prospective members
-
MSU Students or prospective MSU students
-
Seeking program information-- specifically the program requirements, benefits, and application process.​
Current members
-
MSU Students
-
Seeking newly updated program information, such as program new​s, updates, and events.
Program alumni
-
Graduates, current students, or unenrolled students
-
Seeking information on the program's accomplishments in the years they've been away. These users could be prospective donors as well.​
Prospective donors
-
Could be anyone. Common demographics to consider are MSU alumni or parents of current MSU students or alumni.
-
Seeking information on program success stories and mission statement. Want to see what the program is all about​
Current donors
-
Could be anyone. Common demographics to consider are MSU alumni or parents of current MSU students or alumni.
-
Seeking information on program funding and events. Want to see where their money is going, and stay in the loop.
Quality Assurance
The quality assurance phase consisted of searching for bugs and logistical errors throughout the site. For example, I checked for responsiveness of the browser page. Upon investigation, I found that there must be an issue with the site’s media queries. When resizing the screen, there was a span of pixel widths between the desktop and mobile view where no navigation bar was present, meaning that on some devices the user would not be able to see any page other than the homepage without resizing. I noted down issues like these, so that I could consider solutions in the future. Some issues were surface level, and some were vital to the function of the site, such as the media query issue I mentioned. I noted the priority of each item to show these distinctions.
This step was crucial to both my understanding of the existing product, as I explored all the pages, links, and information on the website. It also got me aware of the items that needed my particular attention as I noted down errors I noticed.
Client Interviews
My design for this project was largely informed by client interviews. I set up recurring meetings with the Director and Graduate Assistant Director so that I could share my thoughts, questions, concerns, and ideas with them. It was through these collaborative discussions that I gained a full understanding of the program itself.
I didn’t want to just make any other website, I wanted to build a tool that would work for them. To do that, I needed to ask questions beyond the tech side of things. I learned the program member demographics, what the requirements are to join the program, how new members apply, who the donors are, the involvement of the donors in the program and its events, and much more.
UI Mockups
In order to communicate my ideas, I created UI mockups in Canva. These can be used for reference once the development plan is put into action, to assist in the developer’s understanding.
The goal of these mockups are not to look refined or necessarily visually appealing. Rather, these are made to communicate the new functions of the page designs, and give an example of what this new functionality can look like.
Before
After
The navigation menu's realignment to meet program needs. Pages have been added (the "students" page), renamed (the "apply" page), and reorganized (the "program structure" being split up into "information" and "experiences").
Before
After
The application page has been modified to have a clear action item. The user will get a small list of "before you apply" reminders that will help inform their application process, and the application is clearly made the main element on the page. Instead of having to click on a button, not knowing where it will take them.
Before
After
The existing "people" dropdown on the navigation only had one child page, so it was my first instinct to get rid of it and find another place for the "administration" page. However, the client interviews informed me of the new Director's passion for making the website more of a student-run and student-focused site. We played with the idea of adding a "students" page, and with that I restored the "people" dropdown to house both "leadership"/"administration (pictured above) and "students."
Before
.png)
The "student stories" page was a project in-and-of itself because it was home to a poorly-designed system that took me a lot of digging to fully understand. To begin, the landing page for this feature was looking like a database of information where you can search for exactly what you need, rather than a place for users to explore. Considering most of our users checking this page want recent updates on the program and its students, the existing page was not meeting their needs.
​​
From a systems standpoint, there were six categories on the landing page, with one highlighted story from each one. It would seem like the posts were categorized by these types, but actually there were major discrepancies between the content and category title. In fact, the posts actually had tags noting their content type(s), and those tags would link to folders of more content like that. I saw the benefit in being able to search for content this way, and decided to preserve and revamp the tags system already in place.​
After
.png)
.png)
In my new version, ​I decided to utilize the existing tags. I put them front-and-center, letting the user clearly see what categories there are with visual cues in the form of icons. For users who do not care to search through categories, the default tab is the "all stories" tab, where all posts are displayed by most recent. When a post is opened, this menu collapses off to the side as it is no longer a primary action item, as pictured above.
Before
After
The contact page I also wanted to make clear and actionable. The "Join our Program" emblem is terribly out-of-place considering that this is a place that donors and current students frequent as well as prospective students. I wanted to give this page clear direction, so I added the program's social links and a contact form for easy web contact. This form also allows the website questions to go to a program-run email, rather than opening the flood gates to the Director's personal email. I also reworked the display of the office location and the Director's contact information. A user will usually be coming to contact page with a clear goal in mind, so it's important that the information be skimable so that they can quickly find the information they need.
Development Plan
The prior mockups were part of a much larger list of changes that I had been gathering. At the end of this process, I spent a week compiling this list into an actionable document. Aware of the fact that I may not be able to speak with the developer(s) during that next phase, I included as much detail and explanation as I could in this comprehensive document.
​
The plan consisted of the following sections, in order of which should be development first:
1. Navigation
2. Back End
3. Content
4. Front End
5. Next Steps
​
Check out the full document here:
Next Steps
In the content section, I outlined exactly what content would need to be produced for the new site. The program's Director and Graduate Assistant Director got to work on those tasks right away. They also began looking for developer(s), and are actually starting development phase now, in November of 2024. Even off my contract, I've been a point of contact during this process, to ensure a smooth transition in the workflow of the project.