UI/UX Design, Motion Graphics, Information Graphics

Better Together Annual Report

Better Together Annual Report

In 2019, the Texas A&M Division of IT decided to shift from print to a purely online annual report. The report capitalized on using techniques that were uniquely available to digital delivery.

This report was awarded "Best of Category" for computing newsletters in the 2021 AMC SIGUCCS Communication Awards.

View the whole report at it.tamu.edu/annualreport.

Color

I created a color palette that was bright and eye-catching that when layered on top of each other blended into the Texas A&M brand colors.

Colors used in this project blended together to make maroon, Texas A&M's primary brand color.

Using this technique, we were able to visually demonstrate how colors were "better" when they came together – for example, the red and azure colors were attractive on their own, but were even better when they came together to make Aggie Maroon.

Typography

We used an animated typeface for main page headings that revealed our "better together" color palette using movement. We modified Gilbert animated typeface using our project's colors to create a unique experience we could only have on the web.

Animated lines of various colors enter the screen to make the words "Community & Collaboration".

Animations

IT stories can be very technical and hard for non-technical audiences to understand or be interested in. In this report, I created several short animations to illustrate technical concepts to accompany stories. Each animation builds on the ideas of using movement and color to visually demonstrate the concept of "better together" while explaining a key idea.

A magnifying glass inspects a good app when signals are disrupted, and discovers it is malicious.
A CAP student discovered a malicious app on the campus network by examining unusual signal behavior.
Health Science Center email, authentication, and Wi-Fi networks combine with Texas A&M's version of each service.
Texas A&M Health Science Center’s tighter integration with Texas A&M University has resulted in projects to consolidate technologies, including email, identity management and networking.
Inspections, payments, permits, and colony locations are each added to a website covered in honeycombs.
The website and application allow colony locations, inspection results, permits, payments and more to be in one central location.
Login with NetID and Password then confirm your identity in your phone to gain access to a website.
When you log in to an account protected with two-factor authentication, you are asked to confirm your identity on a separate device before gaining access. This provides an extra layer of security.

Website

We wanted to allow for a linear reading experience similar to a printed report, but empower readers to easily jump to whatever section they were the most interested in.

To do this, we created a navigation structure similar to our past printed reports, where content was divided into sections. Each section is a page filled with stories, and the last item on the page is a big button that takes you to the next section.

For a nonlinear reading experience, we constructed a navigation menu that doubles as a table of contents.

Desktop and mobile versions of the annual report website both show a navigation menu that doubles as a table of contents.
The navigation menu is always visible on desktop and behind a hamburger menu on mobile.

Project Team

  • Hailey Yamada, Graphic Designer
  • Chris Siems, Developer
  • Paige Rod, Project Manager
  • Xavier Porter, Creative Director
  • Bobby Bernshausen, Content Coordinator
  • Lacey Baze, Project Sponsor

Related Posts