Modernizing a 10-year-old University Website
The Story of the Borges Center at the University of Pittsburgh
History with the Borges Center
Ten years ago, when I worked at the University of Pittsburgh (Pitt), I was responsible for designing, developing, and migrating the Borges Center from the University of Iowa and make it a Pitt website. While I may be long gone from Pitt, I maintain friendships with old coworkers and clients, one of whom is Daniel Balderston, who is the Director of the Borges Center.
Daniel reached out to me, telling me that his site was falling behind the times, both for people who used the site and under-the-hood, where the CMS, Drupal 6, no longer was being covered by security fixes. Together we worked out a plan to modernize the site on all fronts. This was an updated design that was fully responsive, migrating more than 10,000 nodes to Drupal 8, internalization, and ecommerce.
Daniel reached out to me, telling me that his site was falling behind the times, both for people who used the site and under-the-hood.
Step 1: ⚡️ Quick and Dirty Feedback from Users
The Borges Center has a hard core set of dedicated users and we wanted to make sure that we wouldn't be alienating them with the changes that we were going to be making. User research is important but unfortunately our budget for it was limited.
We decided to offer users a free Borges Center book to encourage active feedback and we kept the form open for a week. The results were consistently in favor of the changes that we wanted to make.
Promoting the Form
At the top of the previous site we ran a banner that linked to a form (in English and Spanish). Below is the mockup that was done before it was implemented. (Explore on Codepen.io)
Step 2: Making the 👩🎤️ Design Responsive
Based on feedback from the form above, the diehard users of the site felt that the look-and-feel of the site was the right for the Borges Center. (A testiment to the quality of the original design I did a decade ago.) I was glad to hear this because I believe the design for institutions should be timeless and classic and evolve over time.
It was time for a design EVOLUTION, not REVOLUTION.
Evolving the Design
The design process involved dissecting the design as it was and updating the pieces where appropriate.
- The base font size went from a small 12px to a larger (and easier to read) 15px.
- New font families were explored but ultimately we settled back to using Georgia and Verdana, as they were closely associated with the identity of the site. (This was also a performance win—no webfonts needed!)
- The grid for the site was freshly creating to be responsive.
- Preview images for books and promotional materials were enlarged to allow better use of photography
- The shopping cart was moved more front-and-center as a reminder that the Borges Center did a brisk trade in books and journals.
For the design stage, everything was posted to an InVision prototype. A few key pages were designed—the home page, a basic page, and a couple of shopping pages—and then we moved to development.
Step 3: 🔀 Migration to Drupal 8, 🗣 Internationalization, and 📚 Ecommerce
Migration from Drupal 6 → Drupal 8
One of the most humbling things when doing development work is to have to review code that you wrote years ago and there I was, forced to work with code that I personally wrote a decade earlier. I reflected on my growth and said a silent apology to me in the future for the work that I was doing today.
Drupal 8 has an excellence path for migration from Drupal 6 to Drupal 8, which was good because I appreciated the help. Moving data from one source to another is the work of magicians and I was glad that this worked out.
Jorge Luis Borges was a Spanish-language literature icon and the site had to support Spanish content as well as English, with the goal to be as accessible to people as possible. Every page on the site has the option of being translated into other languages—English, Spanish, and French.
Updating the e-commerce solution for the Borges Center was tricky. First, the system that they were currently using with PayPal was being sunsetted so we were going to have to find something new. Our first attempt at something new was to use Shopify and connect it with Drupal. This was so easy to setup. Unfortunately the university had a preferred solution and we weren't able to get permission to use Shopify.
The university had partnered with Authorize.NET for credit card transactions and so a solution was built using Drupal Commerce. The downside of this solution was that inventory management is way more complex and not intuitive.
Step 4: 📝 Documentation & 🚀 Launch
Documentation is a Must
For every site that I work on, I want to make sure that people understand how to make things happen. Most of the time this work is done by having an excellent admin user experience. For this site, due to the complicated nature of Drupal Commerce, coupled with the fact that every year there are new graduate assistants editing the site, I put together a 20-page user manual.
The site went live over the summer at https://borges.pitt.edu. Users are happy to have a responsive site and Daniel is happy to have more options to promote the Borges Center!