Responsive.EDUDrexel University

A responsive design approach engages students wherever they are - on the web, tablets, or mobile devices. A new site architecture and content strategy better meets the needs of both prospective and current students.

Awards

2012 Webby Award Honoree for Best Education Site

The Challenge

Drexel University enlisted the help of NavigationArts to improve the look and feel of the core university site to attract the right prospective students. Drexel needed to better promote their rich co-operative educational program based on combining classroom theory with hands-on practice. The .EDU website needed streamlined target audiences, clear calls to action, and a consistent look and feel across departments.

The Solution

NavigationArts’ solution began with the Discovery and Analysis Phase, the first step in a multi-phased approach. The content and user experience team developed a heuristic assessment, competitive analysis, five key audience surveys and conducted twelve stakeholder interviews with students, faculty and staff members. We found: -

 

• The website was all things to all users, failing to articulate Drexel’s unique brand position in the higher education space.
• Key messaging should be targeted to prospective students.
• Current students were not using the website. Rather, they relied on Google for specific searches or social media channels for information on news and events.
• The website failed to live up to Drexel’s image as a leading, comprehensive, technically sophisticated, learning environment.
• Information organization was reflective of the internal organization without thinking of the end user.

Armed with this information, NavArts created a sitemap to re-focus the content for prospective students while providing clear paths to secondary audiences: parents, faculty, staff, current students and alumni. The site’s internally-focused navigation was streamlined to better meet the needs of users while highlighting the co-operative education experience that makes Drexel so unique. NavArts then created a wireframe prototype to define the features and functionality that would marry the University’s marketing goals with its online presence. Usability testing on the wireframe prototype with Drexel students reinforced the site’s direction.

The University’s visual identity was of utmost importance. Throughout the process, we continued to hear that the online experience needed to highlight Drexel University’s unique brand attributes. With this in mind, NavArts combined Philadelphia cityscapes with the movement, excitement and fast-paced environment of the University through two unique design directions. The chosen design was refined and through collaboration between IA, design, and development teams, extended to a responsive design approach that seamlessly accommodates desktop, tablet, and mobile users.

Responsive Design

Drexel knew that the best way to accommodate the varied needs and devices of students and prospective students was to follow a responsive design approach. Through detailed requirements and cross-discipline collaboration, NavArts delivered twelve front-end templates to be implemented in Sitecore CMS. A blend of fixed + fluid layouts gives more control to the design and layout at larger “desktop” resolutions, while supporting the array of tablet and mobile resolutions at full screen width. The use of CSS3 allows for smooth animations while a responsive strategy makes for an engaging multi-device experience, one that is targeted for the key audience end user, the prospective Drexel student.

• Custom full screen background slideshow
• CSS3 transitions with jQuery animate backup for many of the transitions
• Responsive images – appropriately sized images download based on screen capability (ex: a phone won’t download a 1600px wide image)
• A mix of fixed + fluid layout breakpoints (1200, 980, 740, liquid)

Project Results Included:

• Standardization of layout and look and feel between main website and administrative, school and department sites.
• Prioritization of target audiences that is reflected in the .EDU site’s focus and content.
• Portability: responsive design enables students to access the website where and when they want to.
• A stronger brand signal that is better aligned with the core attributes and differentiators of Drexel University.

The Client

Drexel was founded in 1891 as the Drexel Institute of Art, Science and Industry, an institution of higher learning uniquely suited to the needs of a rapidly growing industrial society. Over the course of its first century, Drexel added nine colleges and three schools and in 1970 was renamed as Drexel University to reflect the institution’s commitment to research, as well as the breadth of its graduate programs. Since its founding, the institution has remained a privately controlled, nonsectarian, coeducational center of higher learning, distinguished by a commitment to preparing men and women for success in their chosen careers.