Summer Reading Program
2013, 2014, 2015

Mobile, Tablet, and Desktop views of SRP Kids 2013 Site

Project summary

Each year the Orange County Library System conducts a Summer Reading Program that includes a website where juvenile patrons can register, track their reading progress and event attendance, review books, and print vouchers for end of the program prizes. There are also event feeds and information/links managed by the organization’s Youth Services department.

My Role

The site was built in a third party product that gave the Digital Content Team limited access to CSS and JavaScript changes, with no control over the HTML markup. With these limitations, creating a custom look for the site was an interesting challenge.

Each year, my responsibilities in this project were:

  • styling the Kids and Teens desktop and mobile sites to match the provided branding created by the organization’s graphic designer each year using CSS
  • researching and implementing feature requests (usually implemented through JavaScript or changing the configuration of the system)
  • assisting in training of staff on managing users, sign ups, reporting within the site
  • custom MailChimp email templates for Kids and Teens
  • training staff on using MailChimp for weekly email newsletters during the program

2013

In my first year working with the Summer Reading Program site, I used CSS to adjust the layout, adding more whitespace and increasing the font size for better readability. To make the site more modern, I used principles of flat design and “cards” to display modular objects like events and book reviews.

The site included redirection to a (separate) mobile site using device detection, which also included the new design and readability improvements. However, device detection does not always include every possible mobile device, so I used media queries to make the desktop site responsive. This ensured users would have a great experience on any device.

2014

In 2014 the layout was largely the same as 2013, the colors were adjusted to fit the new year’s theme and branding.

The most notable change for 2014 was a usability improvement to the log in/registration process. Many users were attempting to log in before registering on the site, and when they received an error message they thought their library account was the issue. Staff were contacted about this by many users who were understandably frustrated. I used JavaScript to adjust the login form so that the “Register” link was the first available option. To reveal the log in form, the user had to click “I am already registered”. Other library systems using the same Summer Reading Program product expressed interest in this solution after seeing our site, and there was a drastic reduction in users contacting the library about issues with logging in to the system.

2015

In 2015, I implemented JavaScript to move elements on the home page for the Youth Services department, in order to reflect the priority that the department felt was appropriate.