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.

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.

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.

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.

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

Texas A&M Division of Information Technology publishes an annual report to highlight key metrics and achievements from the fiscal year. These reports are primarily targeted at university administrators to quickly demonstrate the value the Division brings to Texas A&M.

2017 Annual Report: The Shape of IT

Hexagon Motif

We used four main categories with color coded spreads to represent the themes of transformational learning, innovation & discovery, impact on the state, nation, and world, and leadership. Each spread maintained the hexagon "shape" motif, with a combination of photography and infographics.

Focus on Infographics

Not all stories about information technology are always easy for the average person to understand – or even be interested in. To help with this problem, I created infographics to accompany several stories.

2016 Annual Report: Empower Discovery

The 2016 annual report was produced right after the unveiling of an updated brand guide for Texas A&M University. A couple of our design goals for this piece were to embrace the new brand while pairing it with elements we were using on our website, it.tamu.edu.

Line Illustrations + Photography

One component of the new brand guide that hasn't seen a lot of use is line illustrations. I created an illustration for each spread of the report to complement a photograph to create a strong style that carried throughout the piece.

Pie Charts and Accessibility

A key piece of the annual report is displaying the Division's expenditures for the fiscal year. When designing charts, it's important to consider different use cases for viewing the report, such as:

• Printed full-color publication
• Online full-color PDF
• Printed grayscale copy

It's also important to remember that some people have forms of color blindness, such as protanopia or tritanopia. For all of these reasons, it's crucial to not only rely on color to distinguish sections in charts and graphs.

To help add clarity, I add a patterned texture to chart sections in a multiplied version of the brand color.

In 2016, I was tasked with updating the design of our online software store to be responsive and align with recent university brand updates. As my first complex web design project with the Division of IT, I definitely had been set up for a challenge. Over the course of this project, I would be working with a development team that was splitting time between keeping the application operational and updating the front and back-ends to match my vision.

A little bit of background

The Texas A&M Software Center, or software.tamu.edu, provides no-charge and discounted personal-use software to students, faculty and staff of the Texas A&M University System. Each of the eleven system schools can opt-in to providing a particular software to its faculty, staff or students.

The licensing logic of which software is available for a particular user is quite complicated and has evolved significantly from when the app was initially developed around 2010. The changes in business practices, licensing structure, and time pressure to keep the app up-and-running 24/7/365 had led to a back-end that was, frankly, not pretty.

The constraints on updating the back-end in order to enable features from the redesign required planning for visual and feature updates to roll out in phases, a process that is still continuing in 2019.

My Vision

Looking at the Software Store in 2016, I had two key goals:

1. Make the site responsive and mobile friendly
2. Make the purchasing process more intuitive

1. Make the site responsive and mobile friendly

This was our focus for Phase 1 -- front-end only, focusing on making the site responsive and adhering to the new university brand guide.

Updating the Purchasing Process

As implemented in 2015, the purchasing process for software was very confusing. The top of the screen told you you were in a 7-step process, but not all steps were required or actually visible for the shopper, making for a very confusing process.

To make the check-out process more intuitive, I designed a simplified three-step solution.

While not able to completely change the check-out experience to match my design, we were able to address some of the harshest problems from our starting place.

October is National Cybersecurity Awareness Month, which is a big undertaking at Texas A&M Division of Information Technology. From launching award-winning games to sharing tips on social media, we try to do whatever we can to help educate the public about how to stay safe online.

Sometimes we even get to stretch our creative muscles in a different way – like creating spooky cybersecurity illustrations that combine our goals as an organization with the fun of Halloween season.

In our fall newsletter mailed out to all Texas A&M University employees, we used one feature to focus on "knowing the lingo" of cybersecurity. For this article, I designed a drop-cap illustration with a creepy character to personify the cybersecurity term.

We had so much fun on this project that we decided to make it a full poster. A call out on the newsletter directed readers to download the full poster online.

This project was greatly inspired by Bitdefender's ABC of Cybersecurity post series. I hope the designer who worked on those graphics had as much fun I as I did with a fun take on what can often be a dry and technical topic.

Project Team

• Hailey Yamada, Graphic Designer
• Bobby Bernshausen, Content Coordinator
• Lacey Baze, Project Sponsor

In September 2019, Texas A&M Division of Information Technology ran a campaign to educate the campus community on how and why to report phishing emails.

The “See a Fake” campaign focused on communicating the complex idea of phishing (someone pretending to be someone else via email) by demonstrating the same concept using humor and highly-recognizable items or traditions from Texas A&M, including Reveille, a student Sports Pass, the Aggie Spirit bus, and the Aggie Ring. Using humor and Aggie-themed images, we hoped to grab our audience's attention long enough to impress upon them the importance of reporting phishing emails.

Our campaign was very successful, leading to an 84.6% increase in tickets reporting phishing attempts. Notably, our emails performed exceptionally well, with an average open rate of 40%, more than double the industry average.

Email

Informational emails were sent to all Texas A&M students and employees to inform them how to report a phishing email, why reporting is important, and give tips on identifying phishing emails. These emails performed over twice as well as industry average, with an average a 40% open rate (Constant Contact, MailChimp).

Signage

Physical Signage

Physical signage was utilized in computer labs across campus. We put up 3 poster series put up in 7 labs and smaller double-sided “monitor cards” were placed by computers. In the staffed labs alone, there are 1,035 workstations, 6 computer classrooms, and 2 study rooms that draw in students all year long.

Digital Signage

Digital Signage was created to spread the message in even more locations, including Help Desk Central, the main customer-facing branch of the Division of IT.

Links to digital signage available for download to use on signage across campus was sent out to IT professionals and the campus digital signage mailing list. By sending out our signage, we were able to get our message out to more places on campus, including campus libraries.

Social Media

Social media posts were written to be shared on Division of IT platforms during the month of September to promote reporting phishing emails to helpdesk@tamu.edu.

Web Content

Too help address the "why" of reporting, I designed an infographic that explains how the Division of IT works to protect campus inboxes. This was shared on social media an in a news story explaining why reporting phishing is important.

Additional resources were made available on our website, including an updated Safe Computing Guide with tips on what to do if when you receive phishing or spam emails.

I created the branding for Technically Speaking, a professional development series created by Texas A&M Division of Information Technology.

Technically Speaking Events

Technically Speaking events offer expert presentations on a variety of important information technology topics. Speakers vary from Texas A&M University leaders to nationally recognized leaders outside of the University.

Technically Speaking TV

Technically Speaking TV is the new KAMU-TV program created by the Division of Information Technology. The program addresses issues that concern the IT community but are relevant to all audiences in general, such as internet safety and leadership.

Branding Package

Logos

Email Template

Presentation Templates

The Technically Speaking PowerPoint Template is given as an optional presentation template for speakers at the Technically Speaking Events.

Challenge Coins

Technically Speaking TV Graphics Package

I created a TV Graphics Package for the TV portion of Technically Speaking, ensuring all files were designed for full HDTV broadcast.

Show Open

Animated Backgrounds & Back Plates

Lower Thirds

Closing Credits

Having worked at Texas A&M Division of IT for a little over a year, I often found myself wondering why. Why did we have so many websites with obscure URLs? Why did all of our websites and applications look so drastically different? Why did you need institutional knowledge to be able to find the content you needed?

Looking at our fleet of websites, I couldn't help but wonder if there was a better way to organize and present all of this information. When assigned to redesign one of our flagship websites, cio.tamu.edu, I started voicing some of the questions that had been consuming me over the last year. My fresh perspective and pointed questions led our team to reevaluate our website strategy.

Project Overview

In the fall of 2017, the Division of IT was managing over 40 public-facing websites and web applications. Looking at our content-focused websites specifically (excluding web apps), we had a large disparity of web traffic across our sites. From May 2016 through May 2017, our flagship site (it.tamu.edu) received more unique page views (UPV) than all of our other sites combined, and 3.6 times as many UPV as our next most-visited site (hdc.tamu.edu).

The number of websites had grown significantly over the past five years, and was becoming a difficult for our team to maintain in terms of content and development. Each content-focused website had been created with a target audience in mind (i.e., students, IT professionals). Although each site had a unique content strategy, none of them included a thorough strategy for dealing with maintenance, leading to content rot, dated design, and unpatched frameworks and libraries.

After months of research, discussion, and deliberation, we created a new web strategy that transformed our most prominent and highly-trafficked website (it.tamu.edu) into a "one-stop-shop" for information about IT at Texas A&M.

Design

Since this project dealt with multiple content types and audiences, we needed to create a cohesive design that still allowed content from the sites we planned to merge to feel distinct.

Organization

Our first challenge was deciding on the most strategic way to organize our content. To guide our discussions, I researched IT websites from dozens of peer institutions and diagramed their content organization. We used these diagrams to compare how we were presenting information on our two flagship websites (it.tamu.edu and cio.tamu.edu) to how our peers were handling the same types of content within one website.

Using my research and our division's priorities, we decided that we would have six top-level "buckets" that would hold all of our content: Services, Leadership, Policy, Security, Community, and Help. The launch of each section was scheduled for iterative release over the course of a year.

Learn more about our project management strategies in my blog post "Data Visualization in Project Management".

Navigation

The amount and complexity of the content we were moving into one website meant that navigation was going to be the most important design choice. We wanted to make sure that wherever a visitor entered the site, they didn't feel lost or too overwhelmed.

The solution we settled on was a three-tiered "navbar" that progressively reveals more options the deeper within the site you go. While this strategy does take up more real estate above the fold, it prioritizes clear way-finding within the site.

Our mobile solution provides a similarly signpost-focused experience. Mobile navigation is accessed by tapping on the hamburger menu, which reveals the site-wide search and allows you to navigate to any page in the site.

In addition, we included other ways of navigating the site:

• Prominently featured site-wide search
• Breadcrumbs on every page
• Mega-menu for available IT services
• "On This Page" navigation for pages with more than one heading
• Side-panel navigation for related content
• Buttons that link to deeper pages within a section
• Sub-footer with links to major content areas

Search

A powerful partner to our navigation strategy is prominently-featured search. A search field is available on every page of the site.

We utilized Elasticsearch technology to allow for a highly-controlled search experience. For high-priority content types, a tab is available to filter search results.

We were also able to leverage this technology to ensure that password-protected content doesn't appear in the search results.

Page-Level Templates

Each navigation level has a unique look that creates consistency throughout the site.

Home (Level 0)

The home page prioritizes getting visitors to the most important and popular content as quickly as possible by featuring search, "I want to" links, and buttons for our service categories.

Landing Pages (Level 1)

Top level "buckets" have a landing page that highlights important content and features within the section.

Microsite (Level 2)

With the reveal of the maroon navbar, we enter the "microsite" level. Each "microsite" has its own mini-landing page with a similar aesthetic to Level 1.

Content Pages (Level 3 and Deeper)

Content pages live within the "microsites", and utilize sticky "On This Page" and related content side-panel navigation.

Iconography

We created a series of icons to represent each "microsite". I mentored and collaborated with a junior designer to create a set of over 140 icons for use on it.tamu.edu. They can now be found in other contexts as well, such as email newsletters, creating a shared visual library that identifies content types across our communication platforms.

UX Icons

UX icons are used to help visitors navigate the website (i.e., arrows, chevrons, and carrots), identify link types (i.e., PDFs, external, password protected), or perform an action (i.e., print, chat, search).

Content Icons

Content icons are representative of content on it.tamu.edu and are used to visualize the idea behind a "microsite" (i.e., Audio, Video and Telecommunication or IT Governance). Content icons have two versions — line and solid. The solid icons are used in the maroon navbar, and the line icons are used within content bands that link to various "microsites".

Learn more about my strategy for creating and maintaining an official icon font in my post "Designing a Custom Icon Font".

Website Images

Non-content pages (levels 0-2) utilize images to add visual interest to our occasionally dry and technical content. Over the course of this project, I created and curated over 130 images for the new website, including service mockups, infographics, and more. Junior designers were tasked with creating dozens more graphics for news story cover images.

Project Team

• Hailey Yamada, Graphic Designer, Project Manager
• Chris Siems, Developer
• Dion McInnis, Developer
• Xavier Porter, Creative Director
• Allison Oslund, Content Coordinator
• Justin Everett, Content Coordinator
• Karlie Gaenzel, Jr. Content Coordinator
• Courtney Laird, Jr. Graphic Designer
• Xavier Maldonado, Jr. Graphic Designer
• Lacey Baze, Project Sponsor

Over the course of the One IT project, my team combined the content of seven websites into a "one-stop-shop" for information about IT at Texas A&M. The final website has over 400 pages of content and several custom-developed capabilities. Over the course of 20 months, we planned, designed, developed, and deployed multiple staged releases.

In addition to designing the website, I served as project manager for this highly complex and detail-oriented initiative. Using my design skills, I incorporated data visualization into my project management process to create documents, tools and processes that powered the One IT project.

Site Architecture

In order to help our team stay on the same page, I created a schema for labeling each page of content in relationship to all of the other pages.

Numbering Scheme

I created a numbering scheme help our team navigate the content. Each top level navigation item was given a number in the order that they would appear in navigation: 1. Services, 2. Leadership, 3. Policy, 4. Security, 5. Community, and 6. Help.

Within each of these sections, each Level 2 navigational item was assigned a number. For example, the subsections of Leadership included: 2.1 Office of the CIO; 2.2 IT Governance; 2.3 Strategic Initiatives; 2.4 Division of IT; 2.5 Reports & Publications; and 2.6 News.

This pattern continues as you enter Level 3, the "microsite". If we follow 2.2 IT Governance, we get the sections 2.2.1 Purpose, 2.2.2 Committees, 2.3 Members, and 2.2.4 IT Governance Calendar. Because IT Governance is the most complex "microsite", this pattern continues as the pages get deeper, such as the page 2.2.2.1 EITC, the page for the Executive IT Committee.

Site Architecture Spreadsheet

To visualize this hierarchy of content, I created a spreadsheet that detailed the website's architecture. Utilizing filters, the spreadsheet was able to make a large amount of information easy to navigate.

Managing Content Creation in Google Docs

In order to help make sure that all of the content was written for each page, I created a system to track the progress of content as it was written, edited and reviewed.

Sprint Overview

Each sprint had an overview document that outlined the pages included in the section. This document served as a way for our content coordinator to keep track of which pages had been written, reviewed, and put into the CMS. We also utilized this document as a place to record last minute items that needed to be addressed in the two weeks before launch.

Page Content Docs

Each HTML page got its own Page Content Google doc that got its name from the Site Architecture spreadsheet. The documents included a space to record information about the page and to record content, creating a focused process for writing page content and metadata.

Our CMS presents a form as the primary method input method for editing a page. In our Page Content documents, we used a table to label each piece of content with the corresponding CMS form label and the semantic HTML tag that it would output. This helped us make sure our content met WCAG 2.0 accessibility requirements for appropriately nested headings, as well as making sure content was input into the CMS correctly.

Progress Spreadsheet

In order to make sure the project was staying on track, I created the One IT Progress Overview spreadsheet. This tool allowed me to visualize the scale of the work needed for each section, how much work needed to completed for each section in each category (design, content, and development), and each individual page's progress.

Each sprint's tab created a dashboard for me as the project manager. Utilizing calculations and conditional formatting, I was able to easily see the scale of work and progress made for each role (content coordinator, designer, and developer) and each page. With hundreds of pages to move from concept through publication, this method helped me make sure nothing fell through the cracks.

Section Launch Checklist

During the course of our project, our division started utilizing Change Management. To make change management something that we thought about early, I started incorporating the Section Launch Checklist into our iterative launches.

I started filling out the checklist as soon as we had worked on a section enough to get a good estimate from our developers on how many weeks it would take to complete all of the features for that section, and how long it would take the content coordinator to write and/or revise the content. As soon as we had an anticipated launch date, I would begin filling out the Section Launch Checklist.

As part of the One IT project, I mentored and collaborated with a junior designer to create a set of over 140 icons for use on it.tamu.edu. These icons create a shared visual library that identifies content types across our communication platforms.

Icon Categories

UX Icons

UX icons are used to help visitors navigate the website (i.e., arrows, chevrons, and carrots), identify link types (i.e., PDFs, external, password protected), or perform an action (i.e., print, chat, search).

Content Icons

Content icons are representative of content on it.tamu.edu and are used to visualize the idea behind a section of content (i.e., Audio, Video and Telecommunication or IT Governance). Content icons have two versions — line (ln) and solid (sd).

Design File Setup

The One IT icons were created using Adobe Illustrator. My junior designer completed the process work in a living document. She first would find inspiration for each icon, then we would discuss which examples would work the best in the overall set. Then she would work on creating them and I would critique until they were at a place I was happy with.

Final approved icons were then added to the Final Illustrator file, where they were arranged by type (both Content vs UX and sub categories for each). This allowed for a visual way to find things. Each vector had its appearance expanded (outline stroke), was centered to its artboard, and its layer locked.

Each artboard is named according to the One IT icons naming convention and arranged alphabetically. Naming the artboards saves time on export and makes it easier to find them in this large document.

Naming Conventions

UX icons are named by common convention. The names of the Content icons match the folder on it.tamu.edu that the icon represents. On the website, the class for the icon in the maroon navigation bar is determined by looking at the folder name and adding "icon-" to the front of the file name and "-sd" to the end of it.

Example: class="icon-{{folder-name}}-sd"

• All lowercase
• No spaces, words separated by hyphens (-)
• Line icons end in the suffix "-ln"
• Solid icons end in the suffix "-sd"
• UX icons do not have a suffix

Even with this naming convention informed by the website directories, sometimes the icons required more than one class name. For these cases, we added "patch" class names to the CSS and SCSS files from IcoMoon.

Adding Official Icons to Icon Font

We used IcoMoon App to turn the vector files into an icon font. Because we had iterative releases of content in the One IT project, we were regularly adding new icons to the font. Luckily, IcoMoon allows you to upload a JSON file from a previous selection and make adjustments to it.

I created a GitHub project to make sharing the icons with our developers easier. In the GitHub project, I included a README file that detailed the steps for adding icons to the font to make the process repeatable for other designers on our team. This included instructions for recording "patch" names in the CSS and SCSS files.

Anchored Bar & Grill is a fictional seafood restaurant. This web design project focuses on simplicity of use while maintaining a distinct personality. Highlight features of this design include a sticky navigation anchored to the left-hand side of the web browser and access to the entire menu by scrolling or using a submenu in the navigation.

In my senior Interactive Design class, we worked in teams to create a concept for an app to control smart light bulbs. My team's concept, Green Bulbs, focused on having a green impact. After we created a shared set of criteria for our apps, each team member designed their own implementation of Green Bulbs.

Leading up to the 2016 Presidential primaries, my infographics class challenged us to choose a presidential candidate as a subject for our final project. In Fall of 2015, U.S. Senator (I-VT) Bernie Sanders was making quite a splash in the media, but I didn't actually know anything about him. I chose Bernie as my subject, and focused on showing his history in politics as well as the basics of his platform.

Overview

Timeline

I was most interested in researching Bernie because he had spent so much time in public service. I wanted to make sure this infographic could quickly convey the amount of time he had served in office, notable legislation he had written, and his voting record for topics of key interest leading up to the primaries.

Research

• Bernie 2016. BernieSanders.com. Web. 24 Nov 2015.
• FeelTheBern. FeelTheBern.org. "Who is Bernie Sanders?" Web. 25 Nov 2015.
• RealClearPolitics. RealClearPolitics.com. "All 2016 Democratic Presidential Nomination Polling Data." Web. 29 Nov 2015.
• U.S. Senate. Sanders.Senate.gov. Web. 23 Nov 2015.
• Veterans for Bernie Sanders 2016. VetsForBernie.org. Web. 5 Dec 2015.

The ACU Art & Design Department is housed in the Don H. Morris Center. Students taking Information Graphics in fall 2015 were tasked with designing a map of the department to assist students, faculty, staff and visitors with wayfinding around the department.

I redesigned the BBVA Compass mobile banking app as part of a JMC Capstone course in September 2015. I used Invision to create a high-fidelity prototype for my version of the banking app.

In the summer of June 2015, I interned for professional wedding photographer Asia Eidson, an ACU alumnus and owner and founder of Photobyjoy, LLC. My internship duties included producing a promotional video, revamping the company website, working as an assistant/second shooter at weddings and photoshoots, and helping on other projects as assigned.

Website Redesign

One of my major internship assignments was to improve the functionality and appearance of the company's website.

I researched different Content Management Systems (CMS) and hosting options and presented my recommended solution to Asia. After my proposal was approved, I moved the site from Squarespace to a WordPress blog. This process included finding a hosting platform, installing WordPress, working with domain registrars to set up emails, purchasing and implementing the theme "Crowd" by Flothemes and other plugins.

In addition to the technical setup, I was in charge of content curation and moving content into the new environment. This included curating 20-30 highlight images from each session to show potential clients the range of Photobyjoy's style in one blog post per session.

Promotional Video

In order to attract new clients, Photobyjoy wanted to create a behind-the-scenes promotional video to display on their website. The video needed to capture the fun and energy of working with Asia on a photoshoot as well as maintaining the same artistic style as Asia's photography.

In order to bring the Photobyjoy experience to perspective clients, I produced, filmed and edited a 90-second video using behind-the-scenes footage paired with Asia describing the process of working with Photobyjoy.

I filmed b-roll at two couple shoots, three bridal sessions, and two weddings – where I had to capture the same look-and-feel as Asia does in her photography in my footage all while avoiding getting in the way of her photos. We filmed the a-roll with a one-person crew, leaving me holding an iPad teleprompter, filming and recording audio all at the same time. In post production, I edited audio using Adobe Audition, found and purchased music, compiled and edited in Adobe Premiere, and added closed captions in YouTube.

Equipment: Canon 6D, 24-104mm 4.0 wide angle lens, 70-200mm 2.8 sniper lens, 50mm 1.4 prime lens

Additional Assignments

Photography Assistant & Second Shooter

Over the course of my internship, I accompanied Asia on over half-a-dozen photoshoots, including two all-day weddings.

Photo Albums

Clients have the option of ordering photo albums through Photobyjoy. For these albums, I curated photos from photoshoots and designed layouts that carried the same aesthetic throughout the book.