The Sturm Und Drang of Redesigning a Website
Years in the making, a website for any institution is a complex project, including analyses, audits, surveys, navigation possibilities, design formats, testing, prototyping, more testing, more prototyping, testing, testing … and that doesn’t include the endless and somewhat interminable course of meetings, meetings, presentations and more meetings. Makes me glad I’m still in the cushion of print. The School of Visual Arts, like any art and design school, must go the extra hundred yards to making the most representative, functional and friendly site possible. The stakeholders (oh how I hate that word) are voluminous and the stakes are enormous. After the new SVA site launch a month or so ago, I felt it incumbent on me to acknowledge the hard work of the gang of web creators, specifically on the SVA site, but generally on every exemplary site that has so many working parts. I asked Brian E. Smith, design director of the project, to comment on its sturm und drang.
Why was a redesign of the SVA website necessary? SVA needed a fresh-faced platform to showcase the incredible work created here and our vibrant community. Which also meant crafting a site tuned to the myriad of devices available today. Sva.edu was last redesigned eight years ago (with a mobile version released six years ago), so we identified many areas for improvement in the user’s experience of the site due to the quick evolution of online media during that time. Also, we desperately wanted to introduce a new set of typefaces and a brighter design from our previous iteration. Back in 2012, while planning the last site, there were typographic limitations that constrained our decisions. So much has changed for type on the web since then!
Before design even began, we engaged in hundreds of meetings with stakeholders across 60 academic and administrative departments in an attempt to define objectives, pare down content and envision the most streamlined user-flows possible. We managed to reduce the number of pages on the site by around 35%. We ran user tests on our navigation to ensure users can find the most important parts of the site.
With such a huge site comprised of so many parts, how long did it take to design, program and test, and what issues were involved in making the site function the way you wanted? The entire process took around three years. One of our foremost concerns was that the site be ADA accessible to all users. From the beginning we worked hard to ensure our color palette and font sizes met contrast ratio requirements for visually impaired users. As these designs were implemented, we worked with consultants to ensure our choices were as accessible as possible to anyone wishing to access the site.
The design process began with ideation on pencil and paper before working digitally on a complex library of structural page modules and CSS styles. Every page design was crafted across at least four different breakpoints: 4K, desktop, tablet, and mobile. Our small team met on a biweekly basis to discuss the minute details of each page. We would debate user experience, iconography, typography and user flows, all with the objective of creating a beautiful, fluid user experience.
We extensively prototyped our designs to test that our ideas for user-flows made sense in practice. Handing off designs for developers to translate into code has historically been a tricky proposition. We worked very closely with our developers to ensure our visual designs and subtle animations during content transitions appear as close to how we imagined them as possible. There are several great tools that designers can use to help ease the translation between design and code and clearly convey an idea to a developer.
Once implemented, every page design required rigorous testing both for functionality and design consistency across all responsive breakpoints. Testing is painstaking but essential work, so we could rest assured our designs looked great for everyone everywhere.
The CMS was an enormous undertaking in its own right, and we designed, prototyped and developed it alongside the public-facing front end of the site. The CMS allows the entire SVA community to highlight student work and clearly present information to our internal and external audiences.
Who was involved in its creation? SVA Visual Arts Press creative director (and chair of the BFA Advertising and Design department) Gail Anderson created a multifaceted and multiskilled design team by teaming web and graphic designers together:
Eric Corriel: digital strategy director (and a faculty member in several different SVA departments)
Brian E. Smith: design director (also a BFA Design faculty member and MFA 2006 Design alumnus)
Declan Van Welie: web designer and developer
Ryan Durinick: former senior designer (and current BFA Illustration faculty member)
Linnea Taylor: multimedia designer (BFA 2009 Graphic Design)
Josh Weingart: freelance web designer (BFA 2017 Design)
Stephanie Gaito: freelance web designer
Sam Potts: freelance web designer
Interns: Shannon Koh (BFA 2017 Design), Janina Quinn (BFA 2018 Design), Ifah Pantitanonta (BFA 2018 Design), Aline Rubin (BFA 2019 Design)
Additionally, SVA MFA Interaction Design faculty member Karen McGrane consulted on the site.
PRINT is back. And soon, we’ll be relaunching with an all-new look, all-new content and a fresh outlook for the future. Stay tuned.