Web Strategy

The web strategy work for the Bellevue College was made up of multiple interweaving initiatives to help create a sustainable web presence that allows prospective students, current students, and community members to access the information and services they need.

This culmination of work spanned multiple years and impacted the entire web presence by:

• Embracing a culture of iterative design that can adapt to learnings from user research and changing priorities.
• Integrating services of historically disconnected systems to improve findability of content and services.
• Centralizing and exposing design patterns and branding elements to create consistency across the entire web presence and improving design/development velocity.
• Adopting an approach to content management that balanced the needs of the college and the needs of academic departments, from both a technical and human element.
• Adopting a mobile-first responsive web design mentality (including elements of performance) before other colleges and popular CSS frameworks were doing this.
• Creating a clear purpose of the college’s main website.
• Elevating standards of web accessibility.

As the Web Specialist Lead, I was responsible for the entire web presence of the college. I articulated most of the overarching vision and led most of the efforts I highlight on this page. I also wore many hats, including lead designer, researcher, front-end developer and a bit of product manager.

But I was not alone. The work below is a culmination of work I did alongside a small cross-functional team with a front-end developer, web specialist, web editor, software developer and a systems engineer as well as a network of employees and leaders across the organization.

• 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.

The main college website houses all official college information and guides visitors to all information and services that are publicly available.

The above statement is simple and straightforward, but complicated because of legal definitions of what is an official legally binding document. The longer version of the purpose is that the college website is the “Online version of the Course Catalog.” By calling it the “online version” it, by definition, is not the exact Course Catalog from a legal perspective, but it is an official document from a procedural perspective. The difference seems subtle, but it allowed the website to house all official information, ensure that people kept it up to date and allowed the website the flexibility to be organized in a way that made the most sense and not be bound by the organization of the printed course catalog.

The explanation may sound a bit silly, but it was cutting edge. This would have not happened without the help of research studies with current students and follow up interviews with academic advisors.

Note, if you look back at why your college/university website was hard to navigate, this issue was likely part of the problem.

In 2009 I adopted iterative design practices on the Bellevue College website. With this change in practices, we began breaking up big changes. This allowed us to respond quicker to usability learned from research and moved away from slow ‘redesign’ cycles that introduced new usability problems and required slow approval processes.

Navigation changes were informed by card sort studies, tree test, as well as usability studies. I broke changes down into small steps to reduce jarring effects caused by big changes. I eventually removed the dropdown navigation after learning that it was slowing down users by distracting them into other areas of the navigation.

To improve navigation further I worked closely at improving navigation pages (2nd level pages) to better direct people to the content and services they were looking for.

I also worked on improving the footer after noticing patterns of user scrolling behavior. The footer became a place to highlight key pages and resources globally, bypassing other navigation pages and reducing the need to put them ‘on the home page’.

I took the information architecture a bit deeper and broke up the organization of the college web presence into different levels. These levels referred to degrees of control/flexibility relating to branding as well as content curation required for those websites. This architecture also took into consideration global elements and how they are applied to each type of website.

There was also a pattern library created in CSS made from a forked version of bootstrap with added patterns and javascript to suit our needs.

The design for the home page was implemented using concepts from Luke W’s Mobile-First Responsive Design. We began work on a mobile-first approach before most frameworks were supporting this. I took careful consideration in making the design respond based on the content rather than pre-canned breakpoints.

Site performance is a key part of improving user experience of websites. Even mobile-first approach speaks to the importance of fast-loading websites. We made several efforts to make a noticeable improvement to performance, such as:

• Hosting all assets on a cookieless domain, which speeds up download times by using a lean web server, reducing packet sizes, takes advantage of client-side caching, as well as maximizing the number of simultaneous downloads modern web browsers can handle.
• Concatenating and compressing CSS and JS assets to reduce http requests and reduce download speeds.
• Combining icons into sprites to reduce http request.
• Caching web pages to reduce database queries to mostly static content.
• Utilizing leaner web servers, like Nginx, when possible.

To put the performance gains into perspective, the college home page loaded faster when we ported it over to WordPress than it did when it was a static website hosted on IIS servers.

The credit on improving performance goes almost entirely to our systems engineer. My role in this was to encourage him and to continue selling his work as a valuable investment for the organization.

Content strategy was one of the harder topics we tackled and from all the pieces I have on this post, this was the one area I had to delegate up to my CTO (Vice President of Information Resources). Even though I had some opinions on the matter, the solution would require a shift in resource allocation and potentially new head counts. Eventually we hired a consulting firm to help us out with the topic. The consultants took advantage of much of the work we had already done and helped create processes that would have a sustainable approach to content strategy.

We ended up going for WordPress as a light-weight content management system. To get there, we started with a pilot program using a handful of websites in both WordPress and Drupal. We had many learnings from this process. As the pilot grew, we began experimenting with WordPress Multisite. Eventually we reached a point where we felt that something simple like WordPress was all most content managers needed and it provided the level of all the permissions we needed.

We then built a single custom WordPress theme and a handful of plugins that could handle all official web pages, including the home page. Later on we went through a full migration process of all college websites to this structure.

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). As far as the migration process. I scoped out the roadmap, but left the college before the migration was complete.

A common problem with the college website was that web addresses were long and inconsistent. Some sites were in subdomains and others were three levels deep in subdirectories. This problem was evident by looking at 404 error logs. One of my goals was to migrate every college office and service as a subdirect. My hypothesis was that not only would we reduce 404 errors by making web addresses easier to type, but that search engine optimization would go up because more content would be hosted on a single domain and on a first-level sub-directory.

My first major win was by getting the Continuing Education website to migrate from a subdomain to a subdirectory of the college website. Two months after the migration, their search engine rankings went from appearing on the second page of the search results to the 2nd entry on the first page of the search results. After this win, I was able to sell the idea to the entire college.

The flatter organization also helped with printed materials and for creating more granular permission structure to websites once the site was moved to a light-weight content management system.

I led quite a bit of user research at the college. This sped up learnings and decision making by centering decisions on key measurable painpints. If you are interested in learning more about user research in the context of higher education, I encourage you to check out my blog post on user research in higher education.

Last, but not least, web accessibility was a key area I worked on while at Bellevue College. When I first started at the college, I wrote a web accessibility standard. Over the years, this turned into a policy which also touched on the area of procurement of online services. I gave a lot of attention to this topic to ensure that content managers and web developers understood the essentials of web accessibility. This also helped in educating vendors about accessibility practices.