Tuesday, January 24, 2017

Website typography

Last December, before the end of the semester, Web Services made a change to the body text used on csumb.edu. We went from Merriweather 400 (normal weight) to Merriweather 300 (light weight).

We reduced the weight or thickness of the body text to improve readability. Reducing the weight of the body text creates a stronger visual hierarchy. It makes bolded text and headings stand out more and allows readers to easily scan and navigate the page.

passage of text with heavier font weight
BEFORE: Merriweather 400

lower font weight on the same passage
AFTER: Merriweather 300

This was a small, iterative step toward improving the usability of csumb.edu overall, but it involved a lot of internal testing as well as external. If you would like to be involved in future user testings, contact us as webservices@csumb.edu

We also recently evaluated the way we use color and made a few changes to improve the level of contrast in sections, buttons, and breadcrumbs. This makes the site more accessible as well as more usable.

Next steps are to evaluate headings and other elements in our style guide with the same eye for improving readability and making things more accessible.

Tuesday, November 8, 2016

CSUMB adds more user experience expertise

Today we welcome Francine (Aguirre) Lontoc to our Web Services team as the second user experience specialist for the university. She is 2005 TMAC graduate and was the university's graphic designer in Marketing & Communications from 2005-2008.

Kevin and Francine staring at a computer screen
Kevin Miller and Francine Lontoc work on improving csumb.edu's usability.
Francine brings a wealth of graphic design, project management and corporate experience, having last worked for Whole Foods in Monterey as a Store Creative Lead. She has also worked for several local marketing firms in Monterey County.

She joins Liz MacDonald, who has lead our campus-wide effort to improve user experiences on the web and beyond since 2013.

This allows Web Services to pivot towards supporting existing interfaces and away from building our own web applications now that viable third-party solutions exist.

Francine was also part of the 2006 redesign of csumb.edu, and we look forward to combining her creative skills with user experience to improve the CSUMB website, starting with its style guide from our 2015 "rethink" redesign.

Please join us in welcoming Francine back to campus!

Tuesday, April 19, 2016

Marketing Communication Plans

Web Services often works with a client on campus who wants to do a lot with their website. What's missing is an overarching plan for communication using web, print, social, TV and/or radio and what it takes to produce that content.

For a select group we've pulled them aside and encouraged the development of a marketing communications plan.

Using a template from Kansas State, Web Services has adopted this strategy to strengthen the ability of a department or service to communicate and see return on that investment.
It involves capturing what many times is already in the head of the client. The immediate need is to share it with their staff, but the real benefit comes from when new staff arrive or outside departments team up on more functional tasks. It means these partners can jump straight into creating content with intent and measure results.


We've worked with Campus Planning & Development, Inclusive Excellence, Athletics, College of Business, University Personnel, Camp SEALab and the Campus Advocate's office.

In many cases, we've been able to take fully flushed out plans, create marketing campaigns that go beyond just their website (e.g. print brochures, mailing lists), and measure results that are tangible and usable.

For example, Campus Planning & Development used their plan to increase awareness of their Master Plan Revise, and much of their success has resulted into people attending their forums.


Here's how the plan works:
  • Start with an analysis of what your group can do.
  • Capture your goals.
  • Think in detail about the target audiences for your content.
  • Develop the key messages you need to communicate, no matter where that content shows up (e.g. web vs. print).
  • Think about overall strategies and the tactics that will work 6-12 months out (e.g. Are students still using Snapchat?).
  • Measure the results of your hard work.


We just wrapped up a two-part presentation in the Technology Open Lab called "Creating a Marketing Communications Plan."

Great marketing communications depends upon great composition of words, audio or video that convinces the visitor to act. The effect is return on investment (ROI).


There four ways to measure the effect of your marketing campaign: eyeballs, endorsement, engagement & effect.

In some cases, you might just want people to see your content (e.g. pageviews, impressions). Other times you might want to see someone's positive or negative endorsement (e.g. likes, shares). Infrequently you want to see people engage in evaluating your content (e.g. comments, discussion threads).

But ultimately you want to see some kind of conversion from just reading the content to acting upon it. This could be a visitor downloading a file, purchasing a ticket, or attending an event.

For example, if you are the College of Business, you want people to attend an important faculty presentation. If you are Athletics, you want students to see a basketball game. If you are IT, you want someone to download antivirus software.

Let us know if you would like to develop a marketing communications plan by writing to webservices@csumb.edu

Thursday, February 18, 2016

Introducing hero images and other options for images on your website

After collecting feedback on the header images for a year, we've decided to disable them on March 7 and opt for a smaller menu along the top of the page. This makes the main page content easier to see and access with less scrolling, matches the mobile experience more closely, and - let's be honest - finding quality images that worked in that area of our responsive design was difficult, and often resulted in awkward crops that covered or cut off people's faces.

So I believe getting rid of this aspect of the site design is a gain for both site authors and end users.

But getting rid of this striking visual element may leave a void on key pages. Many people looking at our site have never physically been to campus, and rely on images to get a sense of our location and community. To help fill that void, allow me to introduce "hero images."

An example of a hero image on the commencement website.

Powerful Images

Hero images are large, full-bleed images that appear at the top of a page just under the main menu bar. As the name implies, these are powerful images that make us proud and tell a story about who we are as a university. Not just any snapshot is up to the task of hero image - some pictures really aren't worth a thousand words. But the ones that are might make good hero images.

Hero images will work well on site homepages, as landing pages to market a special event, or alongside news or feature stories. They can include a headline, sub-headline and button.

Our beta tester group will have initial access to hero images on March 7, when the site header images go away. Additional web authors can be granted permission to add hero images to their sites by attending our Open Lab devoted to hero images on May 20.

Image Tools

But just because hero images are big and flashy, it doesn't mean you should use them all the time on every page. You already have a number of image tools with the standard permission set that may meet your and your users' needs even better than hero images. Here are a few examples of ways you can incorporate images on your site now:
An example of six images in a grid layout.

An example of an image as a sidebar

Think about how you can use columns to mix images and text together on the site, but always check to make sure that beautiful layout you've created on the desktop still works if a user is viewing the same web page on their phone. Are the columns stacking in the right order so that content is grouped in a way that makes sense?


Keep accessibility in mind when using images. Never post an image with text in it (i.e. an event flyer) and remember to include a description of the image.

And lastly, remember to check the photo pool at flickr.com/csumb when searching for images to use on your site.

Friday, August 14, 2015

Looking Back at Rethink

We looked at our Google Analytics for the last year regarding the CSUMB home page, and tried to find any broad changes to behavior.

Specifically wanted to see if the changes we made on February 9, 2015 with CSUMB Rethink, our last redesign of the campus website, affected unique pageviews, time spent on page, one time visits and exits from our site.

In general, our visitors rose slightly but they spent less time on the home page while sticking around more.

unique pageviews

Unique pageviews are "the number of sessions during which the specified page was viewed at least once." There is a slight increase from the Fall 2014 to Spring 2015 semester but no real affect seen from the redesign.

average time on page
Average time on page is "the average amount of time users spent viewing a specified page." The steep drop was on February 9, when we launched the new website. This was precipitous, falling from 4-5 minutes to around one minute. There is certainly less to see but there's also less to try to figure out (e.g. hovering over images). We'd like to test whether this means people are finding what they need faster and moving down into the site.

bounce rate
Bounce rate is "the percentage of single-page visits." Very much like time on page, this drop represents a considerable amount of visitors who are finding us and staying. We would like to test whether this is because we've made it easier to find information.

percentage of exits
Finally, the percentage of exits from our home page also dropped. This is great news, since a percentage exit in Google Analytics "is (number of exits) / (number of pageviews) for the page or set of pages," in our case csumb.edu. Again, like the lower bounce rater, more visitors are coming to the site and looking for information rather than leaving.

Tuesday, June 16, 2015

Anything wrong with this page?

New form collects feedback

Web Services just implemented a new feature on the csumb.edu site. Logged in users will see a link at the bottom of every page that says, "Is there anything wrong with this page?"

When a user clicks this link, it will open a simple feedback form. The form looks like this:

The user can then let you know the problem they encountered. Maybe it was a broken link. Maybe a typo. Maybe they didn't find the information they expected to. This feedback will help you keep your site in top shape. It also can help you understand what your users need and expect.

Sometimes you might get questions that seem beyond the scope of a simple website fix. This feedback can still help you determine new content you might need to publish, or identify changes you need to make to navigation, content, or page layout so that users can find the information they are looking for.

Email notification

When a user submits the feedback form, the last person who edited the webpage will get an email notification. Web Services also receives an email, and we view the queue of feedback daily.

Info pages

You can also view feedback while editing the site. From the blue gear dropdown, select "Page info."

This will show you all the revisions of the page, who authored them, and any feedback a certain revision received.

Click on the blue button in the Feedback column to see what people said.

What's next

If the feedback form is successful with logged in users, we will make it available to anyone who visits our site later in the fall.

Contact us

Let us know if you have questions about the form or how to respond to feedback you get. We're always happy to help.


Monday, June 1, 2015

Feedback on your web writing

We've rolled out a new feature that gives you instant feedback on the grade level of the writing on your web pages (using the Automated Readability Index). An eighth grade reading level is ideal for most audiences. Remember, people skim things on the web. Even if they have an advanced degree, they will benefit from simple, clear writing.
Grade 16 reading level example

Tips to make your site easier to read:

  • Use simple words with few syllables. 
  • Use short sentences and paragraphs (3-5 sentences per paragraph). 
  • Put the most important information first. 
  • Use headers and lists to keep things from getting too dense.
Grade 4 reading level example

Experts agree:

We based our own best practice guidelines on sources such as:

A fun way to write simpler, clearer copy:

Writing simple and clear copy can become a fun game! Paste your text in to Hemingway App, then challenge yourself to get rid of all the red and yellow highlights!