SMCFA Website Redesign
Overview
Problem
The FA had previously been hosting their website using Google Sites to serve information to their members. As time progressed, the FA team was struggling to maintain and update their website and their members had trouble finding relevant information on the site.
Key Insights
It was important to create a solution that was easy to update and
Solution
A redesigned website in Webflow that utilizes multiple nested CMS collections to organize information into separate categories. The key features include; the "FA Toolkit" (nested collections that deliver text, slideshows, and/or videos), a glossary, a spotlight, and a monthly survey.
The Brief
Improve the visual design, navigation, and workflow for delivering information on the Santa Monica College Faculty Association Website.
the old site
Researching the Old Site and Workflows
After an initial call with the SMCFA I learned that the original website was hosted on Google sites. They were open to moving to a new website platform, as long as their needs were being met. I also learned that they regularly took information from their extensive contract and broke it down into more manageable bite sized chunks which they delivered through slide shows, videos, and trainings. So the new website needed to act as a single point of reference for all members that could hold this variety of media.
I started my process by analyzing the old site and understanding how they were delivering information.
It seemed like the original website acted as an archive, that held all sorts of files, with some files that went a few contracts back.
brainstorming
Starting with Information Architecture
I started my design process by analyzing the current information architecture of the website and updating it to improve the logical user flow. This process also helped ideate ways we could deliver the information on the website.
I also took this as an opportunity to create the first sketch of what the homepage would look like.
Strategy
As we went through the design process and I learned more about their own internal processes, it seemed like a blog function would be useful - the FA team regularly passed information in emails so they would be able to copy a page URL that contained relevant information. Often members would message them asking questions so this feature seemed useful and flexible for their needs. They'd be able to assign categories as they needed and the users could filter through the content to find what they were looking for.
I took this idea of the blog function and started to create wireframes.
Wireframes
With this core idea of a blog, I started to create wireframes. It started as "FA Articles" then I renamed it to "FA Updates" after some refining.
The idea with this was to create nested collection lists in Webflow that would easily allow the FA team to add new categories and articles as they needed. One collection list would have categories and would reference the article collection list.
I continued the rest of my design process and wireframed other pages.
feedback
I took these wireframes and brought them to the FA to get their feedback. After going through this process a few times I received some key feedback:
- The information for Full-Time faculty and Part-Time faculty needed to be completely separate from each other, as they had specific information for each.
- The FA team was going to provide me with a list of categories, and subtopics for both Full-Time and Part-Time faculty. Effectively named the "FA Toolkit."
This feedback was key to reshaping the design strategy.
New Strategy
I updated my strategy from designing a blog feature to designing something that is more attuned to a documentation website. This would allow for a clear separation between the two sections of the "FA Toolkit." Minimizing the risk of confusing the sources of information.
Final Design
After implementing the feedback from the FA team, I was able to create a website that addresses all of the pain points of the members and the FA team themselves. We also worked together to implement workflows for integrating new features into their operations. These new features include a member spotlight, monthly surveys and results, and a glossary page for terms related to their membership.
Homepage
The homepage highlights relevant information by including commonly visited links, the 4 most recent meeting minutes & agendas, the event calendar, bite-sized news and updates, the monthly survey, and the month's spotlight. Member's were pleased that the site homepage was easy to navigate and had relevant information easy to access.
FA Toolkit
The FA Toolkit is the largest feature on this website and is where a majority of the members will spend their time. It was designed using 2 nested CMS collections that make it easy to create new categories and pages - addressing the pain point of maintaining the website. Navigation is automatically created this way. It also enables the FA team to share individual pages with members who have specific questions.
The FA Toolkit functionality
The Toolkit is accessible through the navigation menu. When a user clicks on "Full-Time Faculty" they are prompted to choose a category which will then show topics listed under that category. Clicking on a topic takes you to that topic's dedicated page.
Each of these tiles are automatically created each time a new page and category is added to the CMS.
Sidebar Navigation
Individual Topic Pages
To fit the preferences of the FA team, each topic page is designed to load text, a Google Slideshow, and a video. The team has the flexibility to use all of these sections, or only the sections they deem necessary. The sections that are not used will not appear on the published website.
