Texas State

Texas State University is a public university located in San Marcos, Texas. With over 500 website editors using a custom content management system, the main objective was to define where the current system was failing in order to bring consistency and accessibility to the web and brand experience.

Visit Website
texas state university homepage at desktop few

Role

Research, UI/UX, Design System Branding, Training

Team

1 Designer, 1 Developer, 1 UX Researcher, 2 Developers, 2 Project Managers

Tools

Sketch, Webflow, InVision, Magnolia

Year

2018 – Present

Texas State component mockup
1.

Context Of the Project

This project was a collaboration between the University Marketing and Information Technology teams at Texas State. The objective was to support website editors through our custom Magnolia CMS so they can easily create rich website content for their target audiences.

Two Teams, One Goal

Marketing Team

1 designer, 1 project manager

Information Technology Team

2 developers, 1 project manager, 1 Q/A

My Role

As the primary UI/UX designer for this project, I handled all design communication between the teams in the form of deliverables and feedback. Because there had been a history of friction between the teams prior to my arrival, it was imperative I provide clear and concise details. Knowing the circumstances, I was empathic, while demonstrating my understanding of the development contraints and how they would play a role in the user experience.

Our Current Tool

The IT engineers maintain an assortment of custom Magnolia templates while our marketing team focuses on the user experience for both the backend interface design and frontend output.

gato editor dialog
2.

Understanding the Problem

After gathering insights from the marketing leadership team, the main objective was to adjust the current system in order to bring consistency and accessibility to the web and brand experience.

Each of the university's sites are run by different editors throughout colleges and departments. In most cases, these editors have very little experience designing websites. Due to inexperience, the following issues were occurring:

Inaccessible pages

Inaccessible pages were causing people with disability the inability to find resources. Texas State was pending a class action lawsuit from The Office of Civil Rights.

Branding Inconsistency

Editors were going rogue with inconsistent brand logos, colors, poor quality and mixed-sized images. This was leading to confusion and poor brand perception

Technical Constraints

To understand the possibilities of the CMS, I met with the engineering team to determine what capabilities and contraints they were facing when developing section components.  I was informed that small modifications could be made but had to maintain the primary structure of the current system.

Chris taking notes on computer with team member

3.

Building Empathy

Interviews & Surveys

Jumping into this project, foundational research had already been completed. This included surveys and interviews. Using the research as a guide, I was able to better understand the faculty, staff, and students using our CMS. Reviewing the research, key insights were found including:

Insight #1

“Manual content entry into column layouts make it difficult for the "non-designer" to make good design decisions”

Insight #2

”Too many style options make it easy to use them incorrectly”

Insight #3

”Dialog screens are crowded and inputs are difficult to understand”

Insight #4

”Documentation is text heavy and sometimes difficult to understand”

Using the quantitative and qualitative data from interviews and survey results, I defined the three target group profiles Sarah (Administrative Assistant), Twister (Digital Director) and Anna (student worker). Creating personas gave us a general understanding of their responsibilities, motivations, and pain points, and allowed us to easily share findings with stakeholders.

Middle-aged women working on computer

Sarah Edwards

Age: 49
Role: Administrative Assistant III
Department: Family & Consumer Sciences
Tools: MS Suite, Outlook, Google
Gato Proficiency: Novice

“Many website requests from faculty and staff are sent to me. I do my best with the time given to update our website, but I know it could look better.”

Pain Points

Trying to create website designs with what I’m a sent is challenging. I have very little knowledge in the realm of web design, but someone has to do it.

Goals

We want our website to be informative, up-to-date, and have the best student experience possible.

Middle-aged man looking down at something

Twister Marquiss

Age: 52
Role: Senior Lecturer/Digital Director
College: University College
Tools: Gato, Outlook, Google
Gato Proficiency: Advanced

“Creating website content isn’t something new to me, but I do find our CMS to have a lot of quirks.”

Pain Ponts

Though I'm able to achieve a decent design, our template is looking very out of date. There are also many workarounds to achieve a desired look.

Goals

Building the highest quality and easily navigable sites for our students.

Student smiling while working on computer

Anna Williams

Age: 22
Role: Marketing Student Worker
College: McCoy College of Business
Tools: Google suite, Social Media
Gato Proficiency: Novice

“The opportunity for me to learn new tools and help others is exciting. I see this experience as a chance to stand out when applying for a job.”

Pain Ponts

I've used tools like Squarespace, but this CMS is a bit more tricky. It would be helpful if there were better resources.

Goals

I'm leveraging my job experience as a student worker to further my career after college.

4.

Hypothesizing Solutions

From the findings, I knew many editors often had little to no design experience and were typically overtasked as is. I hypothesized if we could create a more hands-off approach to designing layouts, the burden and mistakes we were seeing would be greatly reduced.

Narrowing down the scope of work

We decided as a team to focus our efforts on solving two main areas when it came to website creation. Once a working prototype was ready, usability tests would be conducted to determine success.

Improvement #1

Improve usability for less "design-savvy" by creating predesign layouts

Improvement #2

Reduce the amount of customizable options and simplify the editing screens by breaking them into steps

Chris looking a whiteboard sketch with coworker

5.

Wireframing & Prototyping

We held a sketching workshop to ideate solutions. Voting on the most popular ideas for user testing. We measured component success on these keys factors:

Scaleable Designs

Each section was designed to be modular, allowing for future design and development flexibility. We brought five designs to life, primarily focusing on user-driven call to actions.

Texas State prebuilt section sketch examplesHi-fidelity prebuilt sections

The CMS Editor

I broke the editor up into steps, based on the content needed, to reduce the amount of options present at one time. In doing so, the the stress related to building a section could be reduced.

To allow for migration from old sites over to the new templates, we needed to allow custom layouts to be available. This would also continue to be an advantage for seasoned editors looking to create custom work. I created a task flow for both types of editing, ending with the creation of a website section. Task flows allowed us to represent a specific use-case based on our set goals and pin-point issues come usability testing time.

As an editor, I would like to add content to my website, so I can provide university resources and information.
Texas State task flow diagram
Dialog wireframe sketchesHi-Fidelity dialog on displayed on Macbook Pro

6.

Usability Testing

Using InVision, usability tests were run on the newly designed editor and predesigned sections. User tests revealed small vulnerabilities in the structure of the user interface, and in some formulations and interactions. In addition, the editors provided great feedback, which led to further improvements.

View the full findingsDialog screen being tested on Macbook Pro

Goals

Determine whether or not the newly included prebuilt options would interfere or hinder the way sections are built within Gato.

Conclude whether the prebuilt section design options made adding an additional layout within a section easy.

Gather insights on the usability of the new interface design

Outcomes

Positive

3 out of 5

editors chose the “prebuilt section” options first when asked to create a new layout inside a section.

5 out of 5

editors thought the new interface design was more usable than the current version.

Neutral

1 out of 5

editors chose to use the traditional method of adding a section to create a new layout.

2 out of 5

editors mentioned the prebuilt section options to be limited. One suggested an option to style link lists.

Negative

2 out of 5

Skipped right passed the prebuilt options when asked to create a section of content.

“Wow, I didn’t even recognize the editor at first; what an improvement.”

7.

Results

In the Wild

Since the release of these new features in our templates, many sites have been redesign using the new sections. Some high-profile websites include the:Texas State Homepage and Undergraduate Admissions.

Recognition

This template was acknowledged for its accessibility improvements and Texas State was recognized as No.1 for website accessibility among institutions with 20,000+ students.

Texas State admissions website mockup screens
Up arrow