The Evergreen State College is located in Olympia, Washington and has a student body of ~4000. Located on the shores of the Puget Sound in an old growth forest, it has championed alternative education models, social justice, and personal expression since its establishment in 1967.
I’ve been the web designer for the college from 2012 until present. I currently lead the visual design and front-end development of the school’s primary website, as well as a separate user experience team that works on internal web applications for current students, faculty, and staff.
Duties: responsive design, HTML, CSS, JS, usability studies, user research, analysis, branding, content management, and presenting.
Director: Susan Bustetter
Developer: Elaine Nelson
Photographer: Shauna Bittle
Design
The Problem
New student enrollment was down several years in a row and the school was looking to market to prospective students in better ways. The primary website was past-due for a design that could take advantage of new technology, and a separate admissions website forced prospective students to navigate between two disparate designs with similar, duplicated content and different navigation menus.
The Process
In redesigning the website, I wanted to achieve the following goals:
Improve prospective student engagement and understanding in measurable ways.
Unite the marketing under a single, cohesive design.
Address the growing mobile market.
Early sketches for the mobile version of the website, chronologically from right to left.
A mobile version of the site.
Mobile First
I decided to solve the mobile problem first. If the site could work on a tiny, limited mobile device, the content would, at the bare minimum, be readable on a big desktop machine.
To focus our content, I removed every significant chunk of content that didn’t relate to prospective students. Those secondary audiences, like current students or faculty, are captive audiences that can be trained where to find help and resources. By contrast, prospective students need to understand the site without any coaching at all. Therefore, everything on the homepage needed to be relevant to their needs.
My research was a combination of live usability studies, surveys of prospective students, card sorting, and analytics.
A Single Site Design
Creating a single site from the two original designs wasn’t just a matter of dumping all the pages into one template. In the old version of the site, all of the effective marketing was funneled away from prospective students. In fact, many students weren’t seeing the content that was meant for them until after they were ready to commit to applying, because it was buried in unlikely places.
Before
Disparate designs and navigations for different sections made using the site frustrating. Note the headers and footers, in particular.
To address this issue, I moved all of the valuable marketing information to the homepage and to other pages linked from the primary navigation. Even so, after a content strategy audit, we rewrote most of the existing content to be more clear and focused. What remained was simplified and reorganized.
A More Useful Experience
Determining how to make the site better for students required understanding what they expect out of their schooling. I sussed out this information in interviews with students and in discussions with teams throughout the college, including the Admissions and Advising departments. I learned that this audience wants a quality education, an understanding of the costs, a good location, and opportunities for fun outside of class.
Creating a strong primary navigation was a big challenge, and one of my personal goals was to avoid using a “hamburger” menu, which, research shows, obfuscates wayfinding.
To address these needs, I streamlined the information architecture of the header and main navigation, added a call-to-action with a new tagline to get students interested in Evergreen’s unique academics, increased visibility of the visit request form, and gathered together and wrote new content to form a new section called Campus Life.
I looked at the analytics and set benchmarks to determine how successful I was in reaching our goals.
After
The current homepage focuses on a single audience, prospective students, instead of trying to be something for everyone.
The Campus Life page is a new page that brings together all of the opportunities that students have outside of class.
The Outcome
This long process provided many new challenges, but since going live with the updates, the school has experienced success with the new site.
Mobile usage has climbed steadily month-over-month, starting at 4% and now averaging over 30% and reaching as high as 50% on key days like graduation and new student orientation.
Five streamlined primary navigation links transport students around to information they need. Regular usability studies continue to validate their usefulness. I also successfully avoided the hamburger menu.
Likewise, the singular design has noticeably decreased confusion for prospective students, as observed during live usability studies.
Finally, the rate of decline in enrollment fell, and the school attracted 100 more incoming freshmen the following year. In addition, the number of applicants has grown year-over-year.
Development
The Problem
The front-end code was falling behind the times and the site was failing to take advantage of new technology. The style had been developed in a single, disorganized CSS file. It was difficult to know where certain styles were kept, what properties were being used, what selectors had been deprecated, and what patterns were intended in the markup.
The Process
When working on the front-end, I continue to stay up to date on trends and innovations in development. New technology and changes in best practices have helped me provide more flexible layouts, better organized code, and clear documentation of my solutions.
Innovation
The most visible part of modernizing our codebase was to incorporate new and previously unused web specifications into the design. One of the best examples is the flexbox specification. As it neared maturity, I began to incorporate it into the existing design while still providing fallbacks for older browsers—your basic progressive enhancement.
When support for the flexbox specification became widely available, we had everything already in place. Our visitors who were using the latest technology automatically saw improvements in our design that were previously not possible without flexbox.
A sample section of my Sass, showing a table of contents, deprecated styles, context hints, and property sorting.
Zoom in.
Organization
At the same time, I began layering on Sass for richer development possibilities, and optimized workflow tasks with Grunt.
I used Sass to break down our monolithic CSS file into smaller chunks, which I then organized into a logical folder structure, guided by SMACSS principles.
Furthermore, I’ve organized the CSS properties themselves in related groups, such as layout, typography, decoration, and behavior. This organization is enforced with a linting task that runs when the Sass is compiled. The result is that anyone can add new CSS with flawless consistency.
I use Grunt to further process the Sass and compile it into different formats, including an expanded version for debugging, and a minified version for sending to the end user in as few bytes as possible.
Documentation
The last thing I did was document how to use this conglomeration of tools and their resulting output. I have incorporated a table of contents into the beginning of the Sass code file, a pattern that I continued to repeat through every partial. When necessary, old CSS selectors are marked as deprecated with a comment, so that they will continue to be supported until we’re confident they’re not needed any more. I note the hacks and workarounds and which browser requires them, so that when we stop supporting that browser, we know which properties can be safely excised.
In some cases, I’ve even used ASCII art to illustrate exactly how a layout pattern is supposed to work.
ASCII art depicts generally how a pattern will render on the screen.
The Outcome
Ultimately, this has had a number of positive effects.
By incorporating new technology with progressive enhancement in mind, I have kept the site up to date with the latest tools and best practices without leaving behind older browsers.
A streamlined workflow now provides a gradually more granular system of organization, speeding development and aiding collaboration:
It’s easier to intuitively know where a selector might be tucked away according to the SMACSS-based file structure.
A comprehensive table of contents guides developers further to the correct place in each individual partial.
A developer-friendly version of the compiled stylesheet and consistently organized properties make debugging a breeze.
Thorough documentation has allowed other developers to collaborate more easily and helps keep the whole project future-proof and ready to hand off to the next designer, should my time on this project come to an end.
Marketing
The Problem
Evergreen delivers an exceptional academic experience, and does so in a way that encourages exploration and drawing connections between disparate subjects. This unique selling point was, however, missing entirely from the school’s homepage. There was a nice selection of hero images at the top of the page, but there was no call-to-action, nor was the key imagery even clickable at all. This resulted in a lot of dead space taking up valuable real estate that wasn’t living up to its potential. Additionally, there was a distinct lack of personality and school spirit present within the pages.
The Process
My main goals in selling the college to prospective students were twofold:
Find the hook, those things that make it attractive. From there, we could begin to show how an Evergreen education benefits students in a way that other colleges can’t.
Authentically represent and celebrate Evergreen’s unique culture by drawing on its undeniably offbeat heritage.
Working with the marketing team, including the school’s photographer, I worked to increase visibility of key marketing hooks on the website to complement other marketing materials.
Lettering exploration featuring a shortened take on the slogan.
A Compelling Call to Action
Instead of simply showing photos, I dedicated the hero image area to a singular call to action: learn more about Evergreen’s unique academics. I figured if we could get people interested in the school’s academics, we could get them to visit, and after that, to apply. This meant devising a compelling statement to entice prospective students to click through. We ran a split test with four contributed statements built around my initial idea of “going beyond majors, classes, and grades.” My own contribution ultimately won, and surveys of new students further backed up their excitement about the messaging:
Go beyond majors, classes, and grades, and experience your education the way you imagine.
Geo-what?
Living up to its unique selling points, Evergreen also chose a unique mascot: the geoduck. The bizarre-looking mollusk, called Speedy, was so under-represented at the school that I didn’t even realize Evergreen had a mascot until after I had started on the job. When I went searching for more information there was only a dull page that briefly covered a few of the facts about the shellfish, but nothing about Speedy, nor Evergreen’s history with the mascot.
The lack of information about our peculiar mascot was a missed opportunity, by not shedding some light on a funny creature that’s uniquely representative of the school’s spirit, and important to the Pacific Northwest’s ecosystem.
In my down time between other tasks I worked on a new page for the geoduck that included interesting facts, the origin of the mascot, and videos and photos of mascot costumes through the decades.
The humble geoduck. Photo by Shauna Bittle.
The new Speedy the Geoduck page, featuring humorous facts about Evergreen’s unconventional mascot.
The Outcome
The new marketing efforts rejuvenated Evergreen’s message to prospective students.
The compelling call-to-action I wrote outperformed other proposed solutions by 40 to 60%.
Visit request form conversion rate, a key metric, went up 18%. Total form completions increased by 60 registrations per month.
The new Campus Life page has become one of the top ten most-visited pages on the site, showing prospective students what life is like out side of class.
The Geoduck page, has proven itself to be an enduring curiosity, regularly drawing in significant spikes of traffic whenever the mascot enters the public consciousness. Sometimes this is when Geoduck athletics play on television and sometimes it’s when alumni talk about the school on Reddit or other online communities.
Overall, Evergreen has been an important step in my career. Well-crafted information architecture has streamlined way-finding. Better marketing and content strategy has increased engagement. A mobile-first design meets users where they are, no matter their device. And Evergreen’s senior staff have been grateful for the change. I’m proud to include this site in my portfolio.
