Figure 1.1 The Kodiak College front page (after)
Figure 1.2 The Kodiak College front page (before)
Problem
Solution
When Kodiak College, an extended college of the University of Alaska in Anchorage, first contacted us, their website was severely limiting their ability to reach important goals and their target audiences. Okay, the website wasn't the only thing limiting them; they also didn't really have a clear set of website goals to reach nor did they have a clear definition of their website's target audiences. Additional issues plaguing Kodiak College's web presence included: an unfriendly website user interface with usability lacking so much that their website at the time could have been featured in a top 10 list of unusable websites; very few interactive capabilities and features for their users which often yielded a lackluster first impression experience from potential new students visiting their website; visually, a very dated brand and website which wasn't something that inspired confidence that their university was on the cutting edge of things; and last but not least, website content was extremely difficult to manage and maintain due to their website's dated content management system. After engaging in an in-depth Discovery Phase, we worked with Kodiak to build a website which more effectively focused on the important stuff (goals, target audiences, etc.) while also focusing heavily on improved usability, interactivity, visual appearance, front-end features, and content management workflows. Kodiak's brand presence on the web went from far-behind to far-ahead after moving through our time-tested website building process.
We are very proud of our new website. It has much improved functionality and metrics. CHROMATIC worked to make sure that we were happy with the end product.
CHROMATIC did a great job with the layout of our website. It is easy to navigate and has a clean, modern appearance. Feedback was encouraged throughout the process, and emails were always answered in a timely manner.
We are very proud of our new website. It has much improved functionality and metrics. CHROMATIC worked to make sure that we were happy with the end product.
Figure 2.1 Website site map
The Discovery phase commenced with a number of conference calls and messages with Kodiak. Our primary focus in Discovery was to develop a thorough plan of action that could be referenced and followed throughout the rest of our creative process.
Post-Discovery, it was clear to both parties that the remainder of the project would focus on:
- creating grouped sections of the website that targeted specific audiences so that each audience would easily be able to find what they need in a minimal amount of time; other information architecture improvements
- usability improvements across the board including minimizing the number of clicks needed to reach deeper inner pages
- developing interactive features using modern web technologies to make the website more interesting and fun to use in addition to making it easier to find sought after information
- refreshing the brand by updating the logo and other brand-related components
- overhauling the website user interface and website design based on the updated brand, content, wireframes, goals, and audiences
- defining and developing goals and goal funnels that would be tied into Google Analytics in order to make it easier to track and measure their performance
In addition to developing a comprehensive execution plan and scope document, we also worked with Kodiak to develop a site map and other important Discovery phase deliverables of our process (Figure 2.1). Upon completion of Discovery, we had a clear plan of action going forward.
Figure 3.1 Kodiak College logo: Before
Figure 3.2 Kodiak College logo: After
After Discovery, we worked closely with Kodiak to develop a fresher, cleaner brand presence.
Starting with the logo, we worked with their team to develop a mark which better illustrated the numerous nature-related aspects that Kodiak, Alaska has to offer that make Kodiak College unique. While their previous mark (Figure 3.1) focused primarily on forestry and excluded some of the more important aspects of the location, the redesigned mark (Figure 3.2) focused on more important aspects of Kodiak such as the island, coast, and wildlife; this was the primary objective of the logo redesign effort.
In addition to revising their logo, we also worked with them to define a color palette for the website, consisting primarily of green and grey hues.
Figure 4.1 Front page wireframe
Figure 4.2 Front page design
Whether we were blocking out the website’s user interface elements through the use of wireframes (Figure 4.1) or methodically and deliberately placing pixels in Photoshop (Figure 4.2), our creative team was united in focus when designing the Kodiak website. Some of those focal points included:
- simplifying the user experience by making navigational elements such as the primary navigation, secondary navigation, quick links, and front page link easily accessible
- creating a clean, well-organized user interface focused on reducing the number of clicks that a user would need to take in order to find what they were looking for
- integrating a site wide search box in the header of the website in order to make it easy for users to easily find information
- including manageable header images on inner pages in order to aid in the communication of text-based content
- adding popular content (e.g. “Campus Information”) or calls to action (e.g. “Need Help? Launch Chat” box) in the sidebar of inner pages in order to make the most important information easily accessible
- displaying upcoming events at the college in order to increase engagement and awareness of said events
After iterative collaboration with the client and finalization of the key unique pages of the website in Photoshop, we moved the designs into the browser and integrated them into Drupal using CSS and HTML. Non-unique pages were also translated and finalized in the browser during the development phase of the website building process.
The Kodiak College website development effort consisted of 3 specific deliverables: Alpha, Beta, and Final.
- Alpha: The purpose of the Alpha phase was to demonstrate how the desktop wireframes looked translated and integrated into Drupal. For this phase, we delivered a bare bones version of the website which included some basic theming, content creation, block creation and placement, etc.
- Beta: The purpose of the Beta phase was to demonstrate to the client a working version of the website, with the understanding that theme imperfections and programing-related bugs would be resolved with the Final phase deliverable. For this phase, a great deal of theming was completed using standard-compliant CSS and HTML. Leveraging the power of CSS, the design process continued and concluded here in an iterative fashion by first, converting the key unique pages designed in Photoshop into code and images renderable by the browser, and second, theming the rest of the secondary pages which were not specifically mocked up in Photoshop in the interest of saving time and money. In addition, most of the features and functionality were developed (albeit with theme imperfections and functionality bugs) by leveraging the power of HTML, jQuery, and of course, Drupal. In addition,:
- a great deal of testing was performed by both CHROMATIC and the client, both at the theme and functional level.
- at this point, Kodiak College had begun the process of inputing the rest of their content into the content management system using the CHROMATIC-provided custom video tutorials which trained the client how to not only use the back-end of Drupal, but also how to manage all of the features and content specific to their website.
- Final: For this phase, we polished the theme and user interface of the website, fixing any noticeable imperfections. In addition, we resolved all discovered bugs across all browsers within scope (including, at the client’s request, some of the outdated versions of Internet Explorer). Extensive testing and quality control was performed by both CHROMATIC and the client in order to ensure that everything was working correctly.
During the development phase, the client request a few features and changes that were not included in the post-Discovery execution plan and scope document. After discussing how the proposed scope additions and modifications would affect the timeline and cost of the project, we drafted up and issued change orders to the client, which was a quick and easy alternative to having to amend the original contract.
Figure 6.1 Dynamic Front Page
Figure 6.2 Degrees and Certificates Feature
Figure 6.3 Searchable Faculty and Staff Directory
The Kodiak College website was built with both front-end users and back-end users in mind. Not surprisingly, Drupal provided us with the solid foundation needed to build functional, usable front-end features for users of the website while also providing the client with a sophisticated yet easy-to-use back-end system, customized by our development team. Programming achievements of the project include:
- A front page featuring a handful of important dynamic informational elements guaranteed to entice existing visitors to return to the site. From an easily manageable (back-end) and usable (front-end) banner slideshow; to prominently placed lists of upcoming events and news articles from Kodiak; the Kodiak front page is always guaranteed to have fresh content (Figure 6.1).
- A “Degrees and Certificates” feature, built using Drupal and CSS to easily communicate important degree-related information to those seeking a particular degree (Figure 6.2).
- A searchable Faculty/Staff Directory making it extremely easy to find any Kodiak College faculty or staff member. Built using Drupal and AJAX with advanced sorting capabilities (Figure 6.3).
- Autocomplete-enabled site wide search results using Drupal and Apache Solr make it even faster and easier for users to find exactly what they’re looking for.
- On the back-end, we integrated a number of useful client-requested features including:
- Inner page header image customization, allowing the client to have control over the header image on any inner page of the website.
- WYSIWYG editor templates, giving the client more control over the layouts of content pages.
- A number of additional customizations and additions, making it incredibly easy for the client to manage their website’s content.
After working with Kodiak to define their website’s target audience profiles, we assisted them in further developing a list of their initially provided goals to include goal funnels (a sequence of steps that must be taken before a conversion is reached for any applicable website-related goal that is measurable and trackable through an analytics application such as Google Analytics). Doing so helped us paint a clear picture as to what steps each specific type of user (i.e. each “use case”) would need to take in order to achieve their objective on the website. By creating this list, we were able to work with the client to identify any possible obstacles along the funnel paths which may have prevented users from completing goals, thus maximizing each goal’s potential. From Discovery, to Design, to Development, streamlining the website’s goal funnels was a priority.
After completing the Final phase of the development process, it was time to launch the Kodiak website. Since the client wisely opted to host their brand new website on one of our Rackspace-leased dedicated servers, launch was painless and quick. The website was launched late at night in order to minimize the number of visitors who may have tried to access the client’s website during that scheduled 2 hour launch period.
Since their website launched in early 2011, we have worked with Kodiak College on a number of feature additions and upgrades to their website. From keeping Drupal modules up-to-date, to expanding the capabilities of previous back-end features, we have forged a meaningful and important working relationship with the Kodiak College web team.
Since the website was launched, analytics data has shown:
- An increase in page views, pages per visit, time on site, and goal conversions.
- A decrease in bounce rate.
In addition, Kodiak College has reported improved usability, quicker page load times, and a much more enjoyable website content management experience thanks to Drupal and CHROMATIC!