- Embracing a culture of iterative design that can adapt to user research and changing priorities
- Integrating services of historically disconnected systems to improve findability of content and services
- Adopting a content management system that balanced the needs of the college and the needs of academic departments
- Creating centralized assets and patterns to create a consistent look and feel across the entire web presence (affecting public facing websites and web applications)
- Adopting a mobile-first responsive web design mentality (including elements of performance) before CSS frameworks and other colleges were doing it (I’m still proud of this)
- Creating clarity over the purpose of the college’s main website
- Over 120 public-facing websites (with over 6,700 web pages) were being managed as static websites without the help of a content management system. This made making global changes impractical, at best, and was cumbersome for content managers to maintain.
- All web applications and web-based services were disconnected from each other.
- We wanted to adopt a ‘best tool for the job’ approach to engineering, but were concerned that doing so would force us to adopt a series of subdomains for different products and websites which would negatively affect SEO and URL naming conventions.
- We were a Microsoft development shop. The CMS options were expensive and bloated. We wanted the flexibility to make changes to our solution without having to hire consultants to do the work.
- We were concerned about the transition to a CMS. Most systems would require us to go all-or-nothing and stage all of the content before flipping the switch. This would require us to maintain a large quantity of content for an extended period of time.
- We also needed to make sure that whatever option we chose balanced the needs of academic department autonomy with the college’s needs to oversee the overall effectiveness of the web presence. Many solutions assumed a more centralized and coordinated approach to content management, which wasn’t the reality at Bellevue College. To all stakeholders, the option needed to feel like a slam-dunk decision, otherwise the entire project was at risk of failure.
He ran a proof of concept and he got approval to move forward. He’s amazing and the rest is history.
Pilot CMS Program
As we started looking at these options we also started noticing that WordPress could be a natural solution for hosting unofficial websites: faculty websites as a well as student organization websites.
- We hosted all assets from a cookieless domain. This allows browsers to download and and those items faster and keep them in cache longer, while at the same time increasing the amount of http requests that web browsers could do simultaneously.
- CSS and JS assets are concatenated and compressed to reduce http requests and reduce download speeds. (although some of this went away since I left the college)
- All WordPress sites are hosted from a NGINX server and paid close attention to caching to reduce database calls.
When we launched the home page in WordPress, it loaded faster than when it was static site hosted in our old IIS servers. The credit on improving performance goes almost entirely to our systems engineer. My only role in this was to encourage him and to continue selling his work as a valuable investment. As you may know, you can spend a lot of time and resources at improving website performance.
Realigned Website Purpose
So we mapped out the content we were publishing via the main website and compared it with the content we published in the course catalog. There was already a lot of overlap. A coworker conducted the content inventory, I assigned offices that would need to be content owners of particular content. When we executed the changes, we had to adjust the second-level navigation of a portion of areas. But we knew we needed to make larger changes in the college-wide navigation in the future.
This idea started after a committee I was part of was looking into not printing the Course Catalog, then we got a strong hunch about students not know the document by name, and if they did, they likely didn’t know all the content it contained. We talked to multiple support offices and found similar findings.
Flattened site structure
- It’s easier to publish and type a shorter URL: bellevuecollege.edu/math/ vs. www.bellevuecollege.edu/sciencedivision/math/
- If a department moved between divisions, we didn’t need to change the URL
- It would improve search engine optimization of all academic departments because the sites were now all directly off the root of the site.
- It was easier to assign permissions and keep track of who had access to each site.
Now that we had a content management system and the flexibility to host any site as part of www.bellevuecollege.edu, we decided to remove all subdomains for public facing websites and applications (with a few exceptions due to ROI). There were two reasons for this:
- Improve SEO
- Consistency with other sites
The first site we migrated from a subdomain was the Continuing Education website. We didn’t change the site structure or the design during this step. After about 2 months all the keywords the department was tracking improved. One moved to the top search results, others to the top 3 search results and another key phrase moved from the second page to the first page of search results.
This solidified that it was important to move content to the main domain and make it content rich. Every site would then help the rest of the domain at being a dominant authority on higher education and the services and subjects we offered.
- Moved all sites into the bellevuecollege.edu domain name (for example, a site living at sitename.bellevuecollege.edu moved to bellevuecollege.edu/sitename). This change allowed sites to take advantage of the SEO rankings of the www.bellevuecollege.edu domain name to elevate their own rankings
- Flattening site site structure so department content moved to a root directory. Example: a site that lived at www.bellevuecollege.edu/parent/departmentname moved to www.bellevuecollege.edu/departmentname. This change elevated the academic departments content to search engines.
- Improved WordPress’ title tag generation. All department home pages include the site name first, then the name of the college. All sub pages include the title of the page, then the title of the site. The themes also have a title tag override, so the website manager (or the web office) could improve the title tag on a case-by-case basis.
- Improved HTML structure of all websites. Ensuring the templates displayed the content first (and navigation later) as well as ensuring sites used headings, semantic and accessible markup.
- Improved site speed and mobile friendliness.
There were a lot of team members that worked on the theme. I set up the expectations on what I needed the theme to do and handle, I designed the general look and feel of both types of sites. The front end developer (who also had design chops) also helped out on the design of the department site templates and he was the point person for implanting the design. I designed and coded the Bellevue College home page. In addition, I designed and coded all the global elements (see “Globals”, below).
Integrations with Classes
- Moved the sites to a content management system so sites were easier to maintain
- Make sure that they did not look or feel like official college websites
- Allow college administrators to easily remove inappropriate content (if necessary) or even turn off sites.
The two projects were:
Faculty Commons: which allows faculty to create websites on the fly and set up the management structure to be owned by a Faculty-Run office called, well, the Faculty Commons. This is a Multi-site version of WordPress using BuddyPress to allow for some online collaboration. I led this effort and did most of the design work and implementation with the exception of a few UI elements.
Student Web: This is another multisite implementation of WordPress. Much of this effort was originally led by our Web Specialist (who I led) and some of the graphic design work was done by one of my interns. Once the Web Specialist changed jobs, I took on the leadership on this project.
Style & Color
- Design methods: analytics (google analytics, netInsight, google Webmaster tools, SiteImprove), content inventory, first-click analysis, surveys, focus groups, usability testing, road maps, SWOT analysis, competitive analysis, stakeholder interviews, sketching, whiteboarding, taxonomies, navigation structure
- Design tools: pen/paper, whiteboards, balsamiq, fireworks, illustrator, photoshop
- Productivity tools: Excel, Word, SharePoint, PowerPoint
- Dev tools: Sublime Text, Dreamweaver, Firebug
Website over time
By the time I left the college, efforts were underway to migrate the entire homesite to the mobile-first WordPress theme I had designed.