Client: The Wittliff Collections at Texas State University (Portfolio entry under construction*)
Agency: University Marketing at Texas State University
Launch Date: December 2017
Website: The Wittliff Collections
CMS: Gato (a customized version of the Magnolia platform)
Project Role: UI/UX Designer
Other team members: Two developers, one UI/UX designer for the site editor environment, one Content Strategist, one Digital Writer, two PM’s (One in marketing and one in IT), Videographers, and one Photographer.
Overview of The Wittliff Collections:
The Wittliff Collections is a gallery and archival collection of Southwestern culture including literary, photographic, film and musical arts at Texas State University. The Wittliff presents major exhibitions year-round and holds numerous events including author readings, artist talks, and lectures.
Background of the Project:
The Wittliff was identified as an area on campus that had unique website needs that the Texas State template could not serve. The client also had an outdated site with hundreds of pages that needed a serious overhaul and visual makeover. The Texas State template is built in a CMS called Magnolia which our developers have customized to create their own platform called Gato. Gato is built in a way that users with little technical knowledge can build a website on. The front end interface of the editing environment is intuitive for the site editors across campus. This type of interface also comes with limitations of less customization for a large number of users. This project gave my team the opportunity to customize a template that was unique to the needs of our client and also unique to the Texas State University website model itself.
Stakeholders for this project included a small group from the Wittliff Collections, members of Information Security, the VPIT officer and members from the Information Technology department. While working on a project of this scale with this many stakeholders to please comes many challenges, but also provided the opportunity to learn how to communicate effectively with different groups of people with different backgrounds, needs, and desires for a project. Throughout the year spent working on this project we hit various roadblocks but we were able to overcome them and came out with many lessons learned and a beautiful product at the end of it.
The video below was created by the video team at Texas State University and it provides a brief overview of the journey I went on designing this new website.
Throughout the video, you see the different stages of the project beginning with research of the Wittliff brand for the visual design inspiration, the wireframing stage, high fidelity prototypes in Sketch and Invision and the final developed product. But, there were many phases not pictured.
Overview of Project Phases:
- User Research
- Interviews and conversations with users across campus and members of the stakeholder teams.
- Brand Research
- Involved exploring the space itself along with the current website, other comparable websites in the industry, and their print materials for inspiration
- Visual Style Guide
- Typography, colors, and buttons
- User Personas
- These personas were created to identify the target audiences of the website to make sure we were meeting their needs effectively.
- The unique users of the site included Visitors to the Wittliff, Donors to the Collections, Researchers, members of the community, and the Texas State Campus.
- User Stories
- User stories were created in order to identify features we needed to create and work that needed to be done.
- Content Analysis
- A complete content audit was done in order to identify areas of content that needed to be re-written, identify who was responsible for re-writing that content, and areas of content that should be removed from the site altogether.
- This also involved curating a voice and tone guide for the client to follow that our Digital Writer put together for content direction.
- New Information Architecture
- To re-organize the content and navigation of the site
- This entailed pencil and paper sketching of design concepts and ideas before moving into the wireframe phase.
- Done in Balsamiq Mockups then transferred to Sketch
- High Fidelity Prototypes in Sketch
- These prototypes went through several rounds of iterations based on testing and stakeholder feedback.
- Invision for prototyping
- Invision provides a seamless integration with Sketch and the Craft plugin. Makes it easy to share in design presentations with stakeholders.
- CSS Documentation
- This documentation was provided by pulling CSS from the designs for the developer handoff.
- Site Development
- User testing
- This was done by having users in the different stakeholder departments test the site throughout the design and development phases to provide feedback for iterations of the site.
- Accessibility testing
- There are very high accessibility standards at public institutions, so accessibility is tested through the Wave tool throughout design and development and IT does a final accessibility check to make sure the site meets all standards.
- Training guides for site editors
- Complete training guides were provided to the site editors on how to use the many new features of the site in the back end editing environment. Many of the editors have little technical experience, so providing these guides was key to their success after the project was completed.
Throughout the project phases we kept these goals in mind:
- To enhance the user experience of The Wittliff site for visitors, researchers and potential donors.
- Elevate the design of the site to match the physical space by showcasing high class photography, a new color palette, and typography that matches the space and the brand.
- Create a site comparable to other “best in class” museum/gallery websites with a unique way to feature events and exhibitions happening to encourage people to visit the space and see all of the knowledge and Southwestern culture that it offers.
- The Texas State University mission strives to create new knowledge, embrace a diversity of
people and ideas, to foster cultural development and is dedicated to excellence in research and creative expression. The new user experience we created during the website redesign embodies that mission and the new website is a representation of that mission.
What is unique about this project?
This site is unlike any other under the txstate.edu umbrella. We had the opportunity to use this subsite of our university to really showcase a unique and cultural part of Texas State University. With a heavy focus on the collections themselves and exhibitions and events surrounding those collections, we were able to develop some unique functionality to meet the needs of this site. The homepage is a place to showcase events, exhibitions, and news while also providing a gateway for the unique audience types the website has. The user has the ability to RSVP for an event, add it to their calendar, or share it on their social networks.
Towards the bottom of our homepage we designed and developed an audience-based filtering system to guide our unique users to areas of content that would benefit them most. Our events page is also innovative in that the user can filter the events based on the category they are interested in our specific month they are interested in visiting the Wittliff. With so many events going on at the Wittliff at any given time this makes it a lot easier for our users to navigate and find the information they need.
- This project was recently launched, so in order to measure our goals we have set up Google Analytics on the site and we will be monitoring this over time, setting up new events, and monitoring mobile vs. desktop traffic in order to keep improving. We will need more time to evaluate whether our goal of increased traffic has been met.
- Key stakeholder satisfaction was a big part of the objectives for this website redesign, so we collected feedback after site launch and saw overwhelming stakeholder satisfaction and approval.
- The design matches the physical space now, which was one of our main objectives. The photography of the space used throughout, color and typography and video showcasing the space – all give the user an impression of the space and a sense of what it’s like to be there.