As an education-focused non-profit, a core concept that KnowledgeWorks teaches is continuous improvement — we hope to better ourselves, to grow not only as individuals, but also together as a company.
Without continual growth and progress, such words as improvement, achievement, and success have no meaning. — Benjamin Franklin
As we grow and evolve, so do our surroundings — our communities, our schools, our organization, and in this particular focus, our technology.
In light of continuous improvement, we’ve decided to do a site refresh. We took a set of 9 well defined problems and addressed them to the best of our ability. This article explains our thought process in refreshing the site by addressing specific problems that we can measure and analyze vs. the previous site design.
Problem 1: We’re regularly creating quality content but it’s getting buried or housed externally and makes our site seem stale
Between blog posts, papers, future forecasting and so on, our organization is creating a TON of quality content. But with the previous site design, this content was being buried deep down the homepage and only discovered after digging through layers of navigation. We know that the content we placed below the fold was only getting 3% of clicks and this was the most important and frequently updated stuff on the entire site.
Not to mention much of the blog content was housed externally. This is problematic on several fronts. First and foremost it makes the user experience confusing and counterintuitive — it makes discovering new content and finding existing content difficult for users. Having the content housed externally also hurts search engine optimization, as our main site isn’t getting credited for this externally hosted content in the eyes of search engines.
And we know through analytics data that users weren’t utilizing the site as much as we’d like — their pages per visit were extremely low, bounce rates were high and frequency and regularity of visits were low and spaced out.
The solution was showcase new content more clearly and more frequently, and adjust styling. Instead of burying new content we wanted to showcase, we put it in a place you can’t miss: the featured area and right rail of the home page and beside the subpages’ main content. If you go to KnowledgeWorks.org there is no way you can miss this new content—it’s prominent in size and weight, accompanied by eye catching images and has clearer article descriptions.
To accompany the easier access to rapidly changing content, we also adjusted some styling to make the site more vibrant, including (but not limited to) a loud navigation background image, brighter links and more white space.
Problem 2: It’s hard for users to understand what KnowledgeWorks is and how we’re structured
KnowledgeWorks’ structure is driven by four focus areas: Schools, Communities, Policy and The Future of Learning. Without minutes of deep diving and heavy reading, most users did not understand this.
So to better communicate this alignment, we reconfigured the navigation to reflect it. Not only does it allow users to better understand our company structure and focus, it sets a clearer site hierarchy. It shows that these four areas are more important than preliminary navigation items such as News and links to our social media.
Problem 3: KnowledgeWorks has supporting subsidiaries with their own websites so there is no centralized resource for information
KnowledgeWorks, Strive Together and EDWorks are all housed in the same physical location, share employee resources and all fall under the KnowledgeWorks umbrella. But most people do not know that, and if they do know it’s not because they discovered that on the KnowledgeWorks site.
Between the three entities, there is an abundance of education-based content being created on a regular basis. To showcase this work we created a recent post feed, displaying the most recent blog posts from each subsidiary in a single area. Though styled similarly to imply visual cohesion, subsidiary logos are placed at the bottom right of the content cards to not only show the content’s original source, but to bring unity to the three identities.
We’ve also included clearer labeling within the focus area that the subsidiary supports or aligns with most.
Problem 4: More and more users are viewing the site on mobile devices and the site is not optimal for these users
It’s no secret that mobile web usage is trending upwards. We also know that how and what users consume on their phones differs between desktop and mobile. In general users obtain more news and short snippets of information on mobile, as they are used to the format of social media such as Facebook and Twitter.
With that use pattern in mind, we realized our site was ineffective at providing quick relevant information to users.
“Mobile-first design” has become more of a buzzword than actual mindset as of late in the design community. But we wanted to actually apply this concept to enhance mobile user experience and give users what they want in a timely manner. By showcasing recent and featured posts immediately upon navigating to the site, users can stay up to date with what’s happening with the organization while also accessing frequently updated content in a timely manner. Another enhancement to the mobile user experience was enlarging touch points, using legible font sizes, avoiding plugins, and configuring the viewport to comply with Google’s mobile usability test.
Problem 5: The important page components are hidden or overshadowed by less essential items
Our organization has a lot to offer — from a wide range of services and offerings, to newly created and updated content and research — and we’ve gotten in a bad habit of displaying EVERYTHING. This is extremely problematic as there has been no analysis as to what users are actually wanting or what items are most important. Or really, any analysis of the primary purpose of the site (is it informational? are we showcasing content? etc).
Through social media and site analytics analysis, we were able to distinguish what content was most viewed by end users and set a content hierarchy — mainly resources and regularly updated or created content. By applying these learnings to the site and removing excess (such as unused social icons, less consumable text blocks, outdated or irrelevant content) we were able to establish a clearer structure and design a more intuitive user experience to help users navigate to the content they find most valuable and useful.
Even at a high level we were able to see that certain page components — using our Google+ link in the header is one example of clutter — literally getting zero clicks in the past 3 months. And with little to no strategy or planning for changing this trend, it was easy to decide what needed to be deprioritized.
Problem 6: Navigation effects and activation doesn’t follow best practices or standard user experience methods
Have you ever hovered over a menu item to try to get to another menu only for the entire menu to disappear if you hover out of the designated area by a pixel? On your phone, have you ever been buried in a menu that has so many levels or layers that you don’t know where you are navigationally? These were a few of the main issues users were having within our site, as we were not implementing a simple, intuitive hierarchical structure and were not following the three-click rule.
Removing the multiple layers of navigation was done after restructuring the highest level of navigation. Reprioritizing the primary nav to align with the company’s internal structure removed a level of primary navigation. To solve for an even deeper level of items being hidden, the decision was to expose these items and more clearly label and organize navigation sub-items. We did this by more consciously pairing links with the correct parent link and by relabeling some of the blocks to be more encompassing so that the child links made sense. By doing this we expose content in a ‘bushy’ way, as opposed to a branchy way.
Problem 7: There is not an easy way to obtain user information a la sales leads
As the company grows and continues to expand its offerings, we’re in greater need of direct communication and marketing towards new users. Besides a single sign up form buried in the footer and general contact form, there is little to no way for users to immediately connect with us if they are interested in content or want to find our more information about the organization.
To simplify the user experience for newsletter sign up and general contact to the organization, we’ve removed unnecessary or optional fields from most forms and made the form input areas more accessible from all devices. We also designed forms to be more visually compelling and noticeable (yep, that area on the home page with a yellow background).
Many little tweaks improved the form filling experience. Changing a phone input area to a type=“number” gives mobile users a numeric keyboard with large buttons instead of a standard keyboard in which they have to hit shift to even show the tiny 0–9 buttons.
Problem 8: Inconsistency among page templates makes styling and code unmanageable and scattered
As a designer, I usually frown upon templating page layouts in the wake of custom designs. But from a practical and developmental perspective, templating is one of the easier ways to shrink a code base and provide users a consistent experience. Custom page layouts inevitably require custom (and a larger quantity of) code, making site-wide updates or adjustments difficult and makes creating pages inefficient.
Our organization sees quite a range of users inputing content — from marketing folks, to IT, to bloggers — so making the page layouts flexible was extremely important. When assessing the site, we recognized a set of familiar features across all pages and used those as a foundation for creating a single, multi-purpose page template. We thought starting with popular blocks would help end and internal users with site familiarity from both a content consumption and inputer perspective.
Also rewiring the content management system (CMS) would require additional employee training, taking up time and resources that we could be using to improve and grow our business.
Problem 9: Many of the little site components weren’t optimized from a coding and user experience perspective
Technology continues to grow and evolve at a great speed, but many of these changes and improvements are at a macro level. There is an abundance of resources and sites on the web so making our users’ digital experience inconvenient or annoying in any way hurts our chances to retain them.
Make every detail perfect and limit the number of details to perfect — Jack Dorsey
So we’ve reviewed each page, bit by bit, to determine ways to make micro-changes to improve user experience. Some of these slight edits include making our phone number a link so users can click on it in a web browser and be immediately prompted to dial the organization; making hover styles clearer so users explicitly know what is a link and what isn’t; updating font sizes and text faces to allow for greater readership and account for handicapped users.
Practicing continuous improvement means our work on this website is never done. We’ll continue to monitor the site analytics and engagement numbers, looking for ways we can continue to improve. And while this may take some time to gather information, we’ll continue to constantly improve in the ways of A/B testing using Optimizely.