Redesigning Drexel Law
I started managing the Drexel University Thomas R. Kline School of Law's website in Feb. 2012 tasked with creating a clear content strategy, making content publication efficient, ensuring the site was American Bar Association compliant and advocating for a web governance strategy.
This entire process and its wonderful outcomes were the product of an enormously talented team of Drexel's designers, developers and communicators. This post serves only to document the process not the end product, which would not have been possible without them. I am forever grateful for the opportunity to have worked alongside each one of them.
First: Reorganization
In the first several months on the job, I revamped, synchronized and homogenized the content, backend workflows and visual layouts in an effort to improve the user journey and experience as well as bring content consistency to the site as a whole.
Setting up just a handful of workflows went a long way into improving efficiency so that we could focus on producing great content.
The site was also without much CSS styling so I added some elements, in part, to set the stage for a later conversion to a responsive layout. The design elements helped us start to compartmentalize content, break it down and make it easier to scan. Part of that process also involved destroying "walls of text."
*The school is now called the Drexel University Thomas R. Kline School of Law and was named the Earle Mack School of Law at the time of the redesign.
Second: The Responsive Redesign
This was an enormous undertaking so I will try to stick to the highlights. At the outset we set the following goals for the redesign:
Retain marketing/branding elements of existing site but reimagine them for a responsive site.
Implement unique designs for homepage and admissions page.
Increase value of news items with related content calls to action.
Code backend to complement new features and improve production efficiency.
Standardize three-column and two-column layout elements.
Leverage use of Sitecore datasets and Microsoft Sharepoint integration to increase site maintenance efficiencies.
Research
The project started with research into responsive best practices, user behaviors on mobile sites and comparable higher-ed sites.
Analytics and interviewing potential students proved essential in defining the user journey. Talking to users and watching them navigate the site was invaluable. Simultaneously, we worked with our admissions team to determine what might be missing. Discussing what they did during one-on-one interactions with prospective students revealed that the website was not delivering the same messaging and expectations the admissions team was delivering in person. Therefore, improving consistency between the in-person interactions and the site interactions became a top priority.
Some Strategy
If you surveyed most law school websites around the time of this writing you might find only a handful of responsive sites. At the time we embarked on this project I thought a "first-mover" advantage into law school responsive layouts would increase our competitiveness and enhance our reputation.
Furthermore, our analytics revealed an increasing number of visitors coming from mobile devices. While mindful that a responsive layout is not the right solution for every client, given the breadth of our programs and extent of our content, a responsive design was best suited to deliver a consistent experience across all devices.
In addition, we had to take advantage of the resources we had at our disposal at the time. The main Drexel site had just switched over to a responsive design so a lot of the design and programming work for a responsive platform was there thanks to the amazing work of Drexel's communications and technical teams.
Illustrating Intent
I believe in showing, not telling, so I set out to truly illustrate my vision for the site by sketching and mocking up many of my ideas in Photoshop. Working this way proved helpful for all of the communicators, web designers, developers and programmers that would work to make the redesign a reality. This iterative process resulted in something much more impressive than anything I could have designed alone so I learned a great lesson about the beauty of collaboration.
Whittling Down and Visualizing Content
The law website has over 2000 pages of content, much of which we are required to maintain for accreditation purposes. One of our biggest problems prior to the redesign involved too many walls of text. Therefore, our goal was to rewrite and compartmentalize the most visited sections of the site to deliver more potent and concise messaging while facilitating readability, scanability and clickability.
Content blocking - breaking down paragraphs of text into individual blocks conveyed a clear message without any other contextual cues made a difference. Content blocking reduced bounce rates dramatically during peak recruitment and promotion periods.
Finally, one of the things we pride ourselves on is that everything and everyone you see on our site are real Drexel Law folks doing what they do best every day. To maintain this feeling while making the site more visually appealing, we required new images. So I grabbed a camera and went out into the field, gathering new photographs of our professors for their new profiles and some new enticing images of our students.
Third: The Process of Testing, Iterating and Refining
The process was everything. Researching, sketching, illustrating, producing, testing, studying, refining, and repeating made all the difference. Without a budget for usability testing, I personally conducted informal usability tests with fellow colleagues, classmates and friends. Formal tests would have probably yielded more valuable insights but the little testing I did went a long way.
After months of work implementing and reworking various elements, we still persisted refining after launch. For example, in response to new accreditation requirements regarding where and how course material should be displayed, we had to devise a new and agile method of updating our course catalog and maintaining it on the site in real-time. This process involved integration with, and design of, a Microsoft Sharepoint powered catalog system connected to the public facing site via Sitecore datasets. I will spare you the details except to say that a lot of the cleaning up and modification we did behind the scenes early on made this task much easier.
Conclusion
Overseeing the design, content strategy and overall user experience of the law website is a constantly evolving process. The site is far from perfect and there is a lot of room for improvement. Putting in the effort up front to make site additions, improvements and maintenance as easy as possible has allowed us to be adaptive to new practices, responsive to new accreditation requirements and efficient when expanding the school's offerings.