UA Viewbook

Client: The University of Alabama Office of Undergraduate Admissions
Date: May 2014
Programs: Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver
Duration: 4 Months

Description:
The University of Alabama’s Admissions’ Viewbook is an interactive portal and welcome site for potential and accepted incoming undergraduate students. It provides access to essential information and materials, as well as welcome videos and social media connections. The Viewbook presents university details in a simple, easy to navigate design, joins students and parents with UA’s social media networks, and answers commonly asked questions. The Viewbook had over 5,000 views per month in 2004, making it an essential website in The University of Alabama’s online family.

View Archive Site: UA Viewbook (web.archive)

Objectives

The main objectives of the UA Viewbook are to provide information in a simple, easy to navigate webpage, join students and parents with UA’s social media networks, and to provide answers to frequently asked questions.

Project Details:

  1. Who is the target audience?
    The primary target audience for the UA Viewbook is accepted and potential incoming undergraduate students. The secondary audience is the parents of students.

  2. What pages and features are needed?
    The Viewbook is divided into 8 pages, each with its own contained information. The site will need to feature videos, graphics, and a social media feed.

  3. What messages are being conveyed to the audience?
    The University of Alabama provides a creative, nurturing campus environment where students can become the best individuals, learn from the best and brightest faculty, and make a positive difference in the community.

  4. What institutions offer sites with similar content and purpose?
    Competitors with websites similar to the Viewbook include: Auburn University, Clemson, Mississippi State, University of Colorado, University of Missouri, University of Oklahoma, South Alabama.

Implementation

Building the Viewbook from redesign to deployment, incorporating a fully responsive design to engage with students and parents, was a great experience. The project consisted of a small team, myself as the designer/developer, and a content creator for videos and copy. My first step in the redesign was research; I started by benchmarking admission websites of similar universities that were relative in size to Alabama. I cataloged my study and investigated existing technologies and standard web practices. I also constructed the project plan and timeline for the site's development. For the visual style, it was essential to examine the established UA Styleguide for alignment with the university's suite of websites.


UA Viewbook Wireframes

My next step in the redesign effort was wireframing. Wireframes provide low-cost and highly effective support for interactive design. The Define phase of this project provided a conceptual screen design; and, through testing, evolved into a stable interface and task flow. When the plans were approved, I created the essential wireframes. They mapped out navigation, cataloged content, and determined intended functionality in the interface.


UA Viewbook Visiting Campus

Following wireframing, I established the site's foundational design. While the site falls within the overall branding of The University of Alabama identity, I was able to push the bounds. I used UA's primary color scheme, but in a modern, creative, flat design. I saturate a stunning image of the university's famous Denny Chimes – a campanile (bell) tower in crimson. And rather than using white for the background, I chose a warmer and more inviting light beige. I also carefully selected a web font that would maximize easy reading on all platforms.


UA Viewbook Quick Facts, Life at UA

After establishing the framework, I assembled all the needed content from my team and other UA departments. I laid out all of the copy and selected relevent campus imagery. I then designed the infographics on the "Quick Facts" page as SVG's and created backup .jpg's to ensure performance on older browsers. SVG's are vector-based and crisp at any resolution and would future-proof the site's functionality with Retina and 5K displays.


UA Viewbook Academics & Majors, Connect via Social Media

In the last step, the site went through extensive testing to ensure it performed on all platforms without any issues. When analyzing its performance, I focused on load time, search engine optimization, and the code's validity. The Viewbook worked in any browser and platform dating back to Internet Explorer 6, using only a small amount of progressive enhancement - something I was very proud of.


UA Viewbook on Tablet

UA Viewbook on Mobile

Outcomes

The Viewbook's redesign had an exceptional reception, garnering praise from various web departments across campus, and even the president of the University. My design and reorganization of the site saw an increase in traffic, fewer questions submitted to the Admissions Office, and increased interest in the University. Most importantly, the Viewbook increased the number of digital applications submitted for admittance.

“Honestly, this is really one of the best UA sites, if not THE best, I’ve ever seen. It’s gorgeous and highly informative and usable. Very nicely done.”
–  Director of Web Communications

“Just getting a chance to take a look… really nice work. The content is really beautifully done, especially the Quick Facts page.”
–  President of The University of Alabama