Skip to main content šŸ‘‡

Recent work

Texas State Gato CMS

  • Branding
  • CMS
  • Interaction/UX
  • Leadership
  • Product Design
  • Product Management
  • User Research
  • Visual Design

Overview

Pretty much every department at Texas State ā€“ from academic units, to human resources, to research centers ā€“ uses the CMS tools, template, and components I designed iteratively during 2015-2016.

Context

In the mid-2000s every Texas State unit converted to a customized version of the Magnolia CMS, known locally as Gato. Rapidly changing technology and shifting priorities left the CMS tools and front end template largely out of date, and editors struggled to find compelling ways to convey information. Many were requesting to leave the CMS, or were hacking in overrides that were unmaintainable, inconsistent, and non-accessible.

Biology homepage in November 2014

Before: Biology homepage using the standard template in November 2014

Goals

  • Add user-friendly multi-column layouts
  • Create a responsive and accessible template wrapper
  • Add key graphical content types (i.e. slider, icons, buttons) and photo libraries
  • Modernize brand elements in a systematic fashion
  • Strengthen design/development processes and user feedback loops

Process

Past digital projects were largely run by the school’s IT unit, with University Marketing contributing static graphics and brand oversight only. The complex scope of this endeavor required new collaboration methods, with the design side owning more aspects of the front end and CMS user experience than ever before, including user interviews, interactive design elements, breakpoints, and application dialogs. Our lead developer and I recently discussed this transition on the RWD Podcast.

Focus groups

Texas State has 450+ websites and about 2500 decentralized editors, so there’s a lot of variation. To get a firm grasp on unit needs, and what editors expected from an updated Gato CMS, I led a bunch of focus groups in March 2015. We reviewed a few popular content management systems, several inspirational higher education websites, and some preliminary mockups I built to solicit feedback on visual design and front-end behavior.

Focus group participants giving feedback

Focus group participants give feedback on the current state of Gato

Front end concept

Long before the idea to update the CMS template design, I worked on a side project focusing on a new look and feel for the University Marketing website. The intention was not to scale to the entire campus, but rather to demonstrate concepts like accessible color, web fonts and icons, responsive design, and background video to departmental leadership. I did some quick sketches and then went straight to high fidelity demos.

After reaching an institutional consensus on updating our web properties, I built upon these initial designs.

Mockup showing initial template design

Initial sketch of header and column-based layout

Mockup showing initial template design

Early hifi demo with background video, columns, and web fonts

Front end prototypes

I expanded on the initial concept in a series of HTML/CSS prototypes from March to July 2015. Overall, we went through about half a dozen major design iterations before starting back-end development. To facilitate communication with stakeholders, developers, and focus group participants (who offered regular feedback on my progress), I organized the project on GitHub Pages.

Screenshots showing template progression

Various header, sidebar, and footer prototypes

Screenshots showing template progression

Progression of footer, menu button, and search bar

CMS user experience

We added a number of custom usability features on top of our open source CMS. The most requested feature was the ability to create multi-column layouts without the need for external tools or coding knowledge. Gato didn’t have this capability baked in, so we had to design and build it from scratch. To keep things simple for users, I devised a limited, understandable grid system and some corresponding nomenclature for easy reference.

Sketch of the user flow when creating a CMS webpage

Early sketch of user flow for creating a multi-column webpage

Mockup showing six column layout options

Sketch mockup of layout options for internal reference

Sketch mockup showing visual column selection dialog

Visualizing the column selection dialog in Sketch

Sketch mockup showing content outlines

Demonstrating section and content bars in various states

Live screenshot of empty section area

Live CMS showing section creation page

Live screenshot of empty 3-column layout

Live CMS showing an empty 3-column layout

Example of a 2-column layout

2-column example in action

Example of a 4-column layout

4-column example in action

Major improvements over previous design

  • Strategic brand identity
  • HTML/CSS color and text solutions
  • Photo libraries deployed for content creators

Noteworthy features

Imagery

Texas State is known as ā€œthe most beautiful campus in Texasā€ and we wanted our websites to reflect that. So we incorporated background images into the header design, and added key components like a customizable slider, buttons, and iconography. To support the image needs these additions generated, our photographer and I curated a library of unmistakable Texas State banners and several other image galleries highlighting campus life, with access to these libraries baked right into the CMS.

Examples of Texas Stat banner images

A few headers utilizing our library of over 200 banner images

Example of a slider showing mobile and desktop configurations

Mobile and desktop views of the slider component

Examples

We released the new template to users in January 2016.

In addition to designing for it, I was also a primary user of the CMS, managing the content for University Marketing, the president’s office, and the Texas State style guide. I’m also fond of these implementations from my peers:

Layout of Texas State websites using the primary template

Is it perfect?

Hahaha, no. It was a gigantic project, and while we certainly nailed it based on available resources, I would make some changes if I could:

  • Too many button options: While our buttons are beautiful and thoughtful, we gave users too many choices, leading to over-reliance for layout purposes (instead of calls to action), lots of mixing-and-matching, and a lack of unity.
  • No pre-filled page templates: Users are confronted with a blank page every time they start a new webpage in the CMS. This proved intimidating for many, but unfortunately it wasn’t an issue we could easily address.
  • Vertical rhythm is not optimal: It’s hard getting the padding and margin correct on elements when you don’t know exactly how users will stack them. I really wish I had more time for this.