Website for MIT aeronautics & astronautics department

AeroAstro website
MITDigitalDigitalUX DesignWebsite DesignWebsite DevelopmentIndustryIndustryEducationAwardsAwardsWeb Excellence AwardProject teamProject teamCasey McGeeArt DirectorEllery MooreyCreative DirectorMaureen LyonsWeb-development practice leadSkadi GidionsenSenior UX & Digital Director

We have worked with the AeroAstro communications team for over 15 years, so we were over the moon (pun intended) to bring their logo — that we designed over a decade ago — to life in a new way with a redesigned website, featuring an expanded visual identity and color palette.

When creating websites, we make purposeful choices about design and consider both the website visitors as well as the web administrators. The new AeroAstro website features animation on the homepage that is not only visually engaging for a user when they land, but also is a subtle nod to air streams. Scrolling down, you will find a variety of content and animated icons to engage users with the content and research areas, which we illustrated to mimic the patches that are so unique to pilots and astronauts. The icons serve as a visual highlight not only on the homepage but also on the people profiles and research areas.

Individual research area pages outline the work done in those areas. We also built in lots of automation, so related content such as faculty profiles and impact stories could be displayed without adding to the site admin workload. The researcher profiles give the opportunity for consistent information for each person while allowing for individualization of information – did you know that one of the researchers had a Barbie doll created to acknowledge her achievements?

The site also includes several page styles for individual labs to create their own sub-site that feels cohesive while allowing flexibility for various content needs. Lab administrators have unique CMS permissions to create and add their pages, while the main AeroAstro site is only editable to the communications team. This gives flexibility to the individual teams while ensuring a proper level of control over the overall website.

Visit Aeroastro website

AeroAstro homepage
AeroAstro homepage

Animated Illustrations

Some of the most fun elements to design on this site were the animated program icons. Inspired by aviation patches which are so unique to this field, we created seven illustrations that represent the work of each individual program. Each “patch” begins to move as the user hovers their mouse over the program image. We worked closely with the team at MIT to understand the work that is done in each area to create visuals and motion that were relevant and engaging for the user. The palette expands upon the original AeroAstro blue and brings in a pop of yellow, and each includes a thick outer border and dotted white line element for uniformity. The animated icons live on the homepage and a still version of the illustration lives on the individual program page, while the .gifs are a versatile asset that could be used on other materials including social media.

AeroAstro animated patch icons
AeroAstro animated patch icons