American Rocketry Challenge
Overview
The American Rocketry Challenge is the world’s largest rocket contest with nearly 5,000 students nationwide competing each year. The contest gives middle and high school students the opportunity to design, build and launch model rockets and hands-on experience solving engineering problems.
nclud was hired by Aerospace Industries Association to come up with a new brand identity and a website redesign for the contest based on a recently redesigned logo. AIA needed a new website that could:
- Serve as participants’ primary resource.
- Attract new teams.
- Be easier to update and manage from the backend.
- Be easy to navigate.
- Be visually engaging and convey the energy of the competition and the participants.
User Experience
Sitemap
I began by site-mapping a new site experience. The new and improved sitemap leveraged current site analytics, audience discovery, and navigational best practices. I came up with an approach that appealed to two main audience groups: those that are familiar with the contest and wanted to complete specific tasks in a timeline manner and those who are unfamiliar with the American Rocketry Challenge and want to learn more generally.
I restructured to the site to reflect the items most accessed by users - important and time-sensitive resources, results, and the gallery of images. I also came up with several new features for the site based on discovery conversations conducted with the client, including an interactive mentor search map, an interactive team search map, and individual team pages for the top 100 finalists.
Wireframes
After establishing the site’s information architecture, I created wireframes for all representative page types and modules.
You can view wireframes here or below.
Visual Design
The visual design phase began with a process called moodboarding. I only had a redesigned logo to work off of, so many elements of the redesign were yet to be decided. I came up with two unique moodboards to help determine all aspects of the brand, including color palette, iconography, unique design elements, typography, user interface inspiration and image treatment. Each moodboard was curated around a set of adjectives taken from conversations with our project stakeholders.
Moodboard 1: Fun, Inclusive, Clear
Moodboard 2: Exciting, Diverse, Understandable
Design Direction
AIA provided nclud with feedback detailing aspects of both moodboards that they liked and wanted to incorporate into the design direction. Design elements that the client gravitated towards included:
- Chunky lines to help different content.
- Diagonals behind imagery.
- Bold Calls to Action.
- Creative use of the logo. For example, we used the stars as both the background on the website and in the custom iconography created for AIA.
- Text underlines and title image overlays for news items.
- Use of the light brand blue to call provide a bit of color-blocking.
We created a component-based design system for AIA using WordPress’s Advanced Custom Fields. This allows for AIA to easily edit any page across the site, as well as create a new page with ease.
You can view my design direction here or a sampling of high-fidelity designs below.
“The site looks really fantastic, I’m so excited.”
— Our Primary Contact at Aerospace Industries Association
You can view the live website here.