Recent work

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.

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.

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.

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.

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.

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.

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 sliders, 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.

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.