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.

Examples

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.

Template

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.

Presentation

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

Effect

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?

Tips

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.

webfolk@csumb.edu

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!


Tuesday, April 28, 2015

Rethinking Campus Map

As a result of the "rethink" of csumb.edu back in February, Web Services has been rethinking lots of other online resources, including recruitment, graduate applications and ecommerce.

Additionally we just wrapped up our third campus-wide meeting rethinking our campus map.

We've already fixed one thing. Credit Christopher Placco, our new Associate Vice President for Campus Planning and Development, for asking the most obvious question amidst all the concerns of stakeholders.

"Where is 100 Campus Center?"

Unfortunately there was nobody in the room with enough institutional knowledge to remember the answer, because the location has never actually existed.

Background

If you are a new FedEx driver with a package to deliver to someone who works at CSUMB, the label on that parcel probably has the same address we've used for the last twenty years.

Page from 1997-1998 catalog showing the 100 Campus Center address.
1997-1998 CSUMB Catalog, page 2.
And when you look up "100 Campus Center" on Google Maps, you would have received a variety of answers over time. Of late it took you to the University Corporation (201) if you mistakenly entered Marina or the Otter Sports Complex (90) if you correctly used Seaside.

Whether it was meant to identify an actual location back in 1994 it's been marketed since as an authoritative destination. That's lead to a lot of confused drivers crisscrossing campus, and lots of us helping them find their way.

The Fix

As a one of the results of rethinking our campus map, Rick Boggs, our Geographic Information Systems Analyst in Campus Planning & Development, has successfully relocated 100 Campus Center to the geographic center of campus when you visit Google Maps.

Image of CSUMB campus between Inter Garrison Road and Divarty Street
100 Campus Center, Seaside CA 93955-8001
This alone was a great takeaway, because changes to Google Maps are crowdsourced and nobody at the university could just call them up and demand changes with authority. But Web Services has a few tricks left and we worked with Rick to tilt the scales (i.e. we helped create a page in CP&D he could reference with official building name changes).

The Future

As a result of our last meeting and our ability to make changes in Google Maps, AVP Placco asked that we officially relocate 100 Campus Center to Parking Lot 97, just south of the Alumni & Visitor's Center.

This would enable our visitors to search for us in Google Maps, park free for 30 minutes, and come inside, if necessary, to ask the front desk a question or obtain a map.

Additionally Campus Planning & Development intends to install an additional physical map at the entrance of the lot, so visitors have something to refer to when leaving.

We all agreed to add a unique and short web address (e.g. csumb.edu/visit) to that physical map that leads to specific maps and information for those visitors to navigate campus.

And we've removed any reference to 100 Campus Center from the official map.