We worked with the College of Architecture + Design to create a visual-focused WordPress site that highlights user experience for site visitors and content managers.
From its beginnings in 1965, the College of Architecture and Design at the University of Tennessee, Knoxville, has fostered a culture of innovation and excellence and, of course, a passion for design.
The college’s mission, “We transform the world with design,” is embodied by the faculty and students there, who work together on projects that have a direct positive impact on people, spaces, and landscapes. Faculty and students are passionate about making a difference and upholding their university’s Volunteer Value of leading with innovation and integrity.
“The University of Tennessee is the state’s land-grant university,” said Amanda Johnson, Communications Director for the college. “For that reason alone, the university has a mission to do important things in the world, things that help people solve problems and improve the world. The College of Architecture and Design takes that mission to heart while providing innovative education in a dynamic creative culture.”
There are three schools within the college that offer undergraduate and graduate degrees and work together collaboratively across all disciplines: Architecture, Landscape Architecture, and Interior Architecture. The college also offers a minor in industrial design, and its dual degrees allow students to earn their bachelor’s and master’s degrees through a more streamlined education.
We worked closely with Amanda to develop a new website that visually represents an innovative, design-focused college while meeting the college’s specific goals to improve user experience and content management as well as creating a website that was a more effective recruiting tool and news and information source.
Understanding the Goals
It was very important for our client to find an experienced team who understood what they needed in a new website.
“We chose NewCity because they proved they were experienced and capable in UX and UI as well as incredible designers, adroit problem solvers, and technology experts,” Amanda explained.
The College of Architecture and Design wanted a website that represented its creative culture and key differentiators with a stunning and engaging design that showed off the highly visual quality of the college. However, before that design was even in place, they wanted to focus on user experience and navigation.
“Even though the website is a very complex tool, we wanted the users to have no idea how complex it was. We wanted users to get to information quickly and easily and leave the website satisfied,” Amanda added.
Finally, they needed a CMS that was nimble and intuitive. Ideally, they wanted something that was ridiculously easy to use.
Choosing the right CMS for this project was crucial. We provided the college with a CMS recommendation comparing the pros and cons of WordPress and Drupal based on our own experiences and external research.
In the end, based on the needs of the college, WordPress was the clear winner.
WordPress offered a user-friendly backend experience for the various content creators involved in the website, including, of course, Amanda, but also including graduate assistants, administrative assistants, and faculty. WordPress also provided the NewCity team with the ability to create a highly designed website that still allowed for the flexibility the individual schools in the college were seeking.
Designing for Designers
Working with students during the planning phase of a project is always a valuable opportunity, and in this case, working with students who had training in both design thinking and design as a practice was especially rewarding. Working together in small groups, current undergraduate and graduate students came together to discuss how the site should be organized and actually sketched out their concepts.
“It was exciting to see the students jump into the sketching exercise with so much enthusiasm and skill,” said Eva Floyd, Senior User Experience Architect on the project. “It was clear that ideating and problem-solving was something they’ve practiced. We also ran an affinity mapping session to fully capture everything they would like to find or do on the website. From these two activities, we learned that they wanted the website to more clearly express what it would be like to be a student in one of these programs.”
We ran similar exercises with the stakeholders’ group of faculty, staff, and directors so that we could compare what appealed to them vs. what the students preferred.
Amanda’s input and the input of all the stakeholders were extremely valuable in the design process.
The final result is a crisp and fresh, easy-to-navigate design involving a sense of movement and plenty of opportunities to include visuals to enhance the content. Using the university’s approved brand color palette, NewCity’s Director of Design Rodger Bridges met many of the college’s goals when he brought the previous largely black-and-white website into bold color while maintaining whitespace and structure on the page.
“The directors’ input encouraged us to focus on really explaining — and showing — the details of the individual programs.” Eva continued, “We needed to explain the studio culture and move many of their collaborative projects out of news stories and into evergreen project pages.”
Amanda does an excellent job of posting articles about the college’s numerous activities and student and faculty achievements, which results in a high volume of news stories on the website. This steady stream of news is important for recruiting and alumni outreach, but the team realized that because there were a lot of stories, some of the impact of larger projects could get lost in the mix as newer stories came along.
Some of the college’s very important initiatives and achievements grow and develop over a number of months or years, and there wasn’t a good way to easily see all stories related to a single project in one place. We wanted to find a better way to showcase these larger projects to make them more prominent and easier to find and allow the story to grow along with the project.
The solution was to create a template that can be used to build a rich, more evergreen home for visitors to explore key projects and initiatives through photo galleries, videos, key facts, and related projects. These projects are aggregated in a single list page, allowing visitors to easily explore the college’s major initiatives.
Coming Together With Components
One of the remarkable aspects of this project internally was taking the new approach to how we managed the component creation process.
“In the past, we would make the comps and then scramble to try and make the design and the CMS work as closely to the comps as possible,” said John Williams, senior front end developer at NewCity. “Part of the problem that we run into pretty regularly is that it’s nice to design something in a static environment, with a specific kind of content, but once it gets into the CMS that content gets unpredictable.”
This involved a lot of back and forth between the design team, development, and UX teams to try and meet everyone’s priorities. This was one of the first projects where all the teams worked through the components together.
The first step was to catalogue and identify each element as to which template it went on.
“We got all the comps up on the walls and then as a group we went through them trying to identify what to call each little piece, what purpose it served, and what visual variations there were,” John continued. “We even went so far as to cut them out of the pages they were in and line them up next to each other, grouping those that were similar.”
This also allowed the development team on the project, John and Jesse Janowiak, to go through and mark places that they thought could be problem areas for the CMS.
“It was a definite improvement on our process,” John concluded.