Introduction
PROJECT TYPE: Volunteer
DURATION: 3 Months (Oct 21-Jan 22)
TOOLS: Figma, Google Forms, Maze, Excel
GOAL: I reached out to Windsor, my former high school, to see if I could work with them to enhance their website design and structure.
CHALLENGE: The layout and navigation of the current website is confusing and cumbersome for users. Also, the school was unsure of their user base and their needs.
OUTCOME: I was able to present a new homepage design to the school along with a presentation on their user’s needs and how the current information on the website could be improved to meet those needs.
A Better Understanding
In order to better understand the current website and how it operates/is updated with information, I reached out to the assistant superintendent. He explained to me that the current website is maintained by one person who updates the information on a need by need basis. The business goals of the project were as followed:
Understand the users of our website and what their needs are
Make the website appealing to families moving to the district who may need more information
Update the current information and find a way to maintain that database
With this information, I was able to create a survey and administer it to 240 participants. This survey asked the following questions:
What is your relation to the Windsor Central School District (WCSD)?
How often do you use the WCSD website?
Why do you, or don't you, use the WCSD website?
Where do you go to find information about WCSD? (Select all that apply)
This is the current WCSD homepage. What stands out to you?
On a scale of 1-10 (1 = very challenging, 10 = very easy), when you use the WCSD website, how easy is it to find the information you were looking for?
Why did you choose the number (answer) you did on the previous question?
If you could change anything about the WCSD website, what would you change? Why?
As we look to update our website, is there a feature or aspect of the website that you do not want changed? If yes, what is it and why would you like to keep it?
We would love to hear any other feedback you have about the website in general. Is there anything else you want to add?
The survey revealed these main findings:
The main user groups are students, caregivers, and staff
Out of students, caregivers, and staff, students are the least likely to use the website. This is because they have much of the information they need bookmarked therefor forgoing the need to go to the website
Staff members generally cited using the website for the same reasons (checking grades, looking up menus, attendance, etc.)
Common reasons for use from all user groups included for new information, dates and events, contact info, popular links (schooltool, schoology, etc.), and athletic information
Many negative comments were about how many “clicks” it takes to find something
Another main request was up to date information, better navigation, and a change in the home screen layout
Taking Inventory
The next step was to understand the current information architecture and what information lives within the website. I proceeded by making a spreadsheet that included what information and links were usable, broken, outdated, and any additional comments about the page. I presented this to the administration as a way to keep an updated record of what was on the site .
This content analysis revealed 19 broken links and 36 pieces of outdated information.
Designing with Information in Mind
First, I wanted to work on creating a different, more efficient way to organize the information in the menu bar. The current website worked with both a top menu and a side menu on the homepage. The top menu had a drop down options while the side menu were a variety of different labels that when clicked would lead to separate pages with links and information (for example clicking the side staff menu option would bring you to a page filled with random links organized by images). The point of my navigation was to create a top menu that synthesized the top and side menu and also made it obvious where each user groups information resided.
The current navigation
Changing Gears
I went to Maze and inserted this new menu design into a tree test and administered it to 12 staff members, 5 caregivers, and 26 students. From the information I received back, it was clear I had looked at the problem in the wrong light. Instead of a problem with the labels and navigation, there was a problem with how the information was organized and grouped. By making the labels more clear and user focused (i.e. places specifically for each user group; students, families, and staff), I could organize information more clearly into those categories. By organizing the information in this way, users know exactly where they need to go on the website.
Taking this information, I applied it to the home screen as well. Based on the survey data, I wanted to ensure that users would have easy access to the following pieces of information:
Menus
Upcoming events and information
The most popular links they use and finally
Athletic information
I started designing wireframe ideas and did a quick user test to see which design worked best for a small group of users.
DESIGNING THE HOMEPAGE
Based on these results, I chose the design with the least amount of friction. I wanted to keep a similar layout to the previous website design, as many users expressed great concern with having the website change dramatically. I also wanted to keep the colors and images consistent with the brand of the school.
When doing a competitive analysis, I realized that many schools I looked at had some sort of popular shortcuts designation. With a website that serves many purposes, I wanted to ensure that users had access to what the survey revealed as the most used items on the website. I also wanted to make sure that I kept space for upcoming events and district news as well. Many users revealed they got their information from facebook and twitter, so I also wanted to integrate a space for social media presence.
Research for Refinement
To test this site, I sat down with 5 users and asked them 7 tasks based on what users wanted from the initial survey:
Where would you find the lunch menu?
Where would you go to login to schooltool?
Where would information about upcoming events on the calendar be?
Where would you find out information about upcoming sporting events?
How/where would you find a teacher or staff member's contact information?
You are new to the district. Where could you find more information?
Find where you would get information on the next BOE Meeting?
Final Design
From this user research, I had a few adjustments that needed to be made. First, users did not notice the WSCD fast facts button on the top right of the screen. Everyone instead went directly into the district information “about” button. So to meet the goals of the school, I created a place where new caregivers or students could look into the school more closely and examine if the school would be a good fit for their family.
Lastly, I wanted to make sure I added a search bar to enhance navigation of the website so users could find specific information.
Future Directions/Takeaways
Although nothing has been done to the current website at this point, there is a chance that the district will use the information that I found moving forward. If I had control of the website, I would make sure that all information was up to date, and use the spreadsheet I created to remove dead links on the website.
If I continued this project, I would want to make sure that the pages were easy to navigate by adding sidebar navigation.
In the future, I would like to try card sorting and tree tests in person, as I think that they could start engaging conversations about the structure of the website.
Lastly, many users reported wanting to see a better version of the mobile website, so it would be a great place to continue designing.