Research, UI/UX, Design System Branding, Training
1 Designer, 1 Developer, 1 UX Researcher, 2 Developers, 2 Project Managers
Sketch, Webflow, InVision, Magnolia
2018 – Present
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.
1 designer, 1 project manager
2 developers, 1 project manager, 1 Q/A
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.
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.
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 were causing people with disability the inability to find resources. Texas State was pending a class action lawsuit from The Office of Civil Rights.
Editors were going rogue with inconsistent brand logos, colors, poor quality and mixed-sized images. This was leading to confusion and poor brand perception
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.
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:
“Manual content entry into column layouts make it difficult for the "non-designer" to make good design decisions”
”Too many style options make it easy to use them incorrectly”
”Dialog screens are crowded and inputs are difficult to understand”
”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.
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.”
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.
We want our website to be informative, up-to-date, and have the best student experience possible.
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.”
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.
Building the highest quality and easily navigable sites for our students.
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.
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.
Improve usability for less "design-savvy" by creating predesign layouts
Reduce the amount of customizable options and simplify the editing screens by breaking them into steps
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:
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.
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.
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.
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
editors chose the “prebuilt section” options first when asked to create a new layout inside a section.
editors thought the new interface design was more usable than the current version.
editors chose to use the traditional method of adding a section to create a new layout.
editors mentioned the prebuilt section options to be limited. One suggested an option to style link lists.
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.”
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.
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.