Alliance for vehicle efficiency case study

Alliance for Vehicle Efficiency (AVE)

Mission-focused, accessibility-first website MVP


Alliance for Vehicle Efficiency (AVE), a non-profit organization based in Washington D.C., wanted to simplify their website in a way that clarified their mission and put their main goals and objectives first. This meant showing who is part of the alliance and the specific things they are doing to make vehicles more efficient.


As designer and developer, my goal for MVP was to simplify the website's overall experience so that, rather than having to go to multiple pages to read key bits of information, the key information would sit upfront on the home page. This meant simplifying the website's architecture while leaving room for future site pages.

An image of the former alliance for vehicle efficiency home page
Color contrast failures in the navigation and hero banner, as well as an auto-scrolling logo carousel were a few of many accessibility issues I found in my initial audit.

Post-Discovery Accessibility Audit

In the absence of past user testing data and historical website analytics, I needed a starting point to figure out other possible pain points as part of discovery - things that might not be as immediately obvious as an overly complex website architecture. So I conducted an initial manual accessibility audit of the website by testing with a keyboard and VoiceOver for iOS. I also did an automated accessibility scan using TPGi's ARC Toolkit browser extension. Since the majority of the website's components were featured on the home page and reused elsewhere, the bulk of my testing could be done here.

  • Missing skip link
  • Incorrect heading structure and semantics
  • Color contrast failures in the header, hero banner and cards
  • Missing alt text in photos
  • No visible focus states on links for keyboard users
  • Auto-scrolling carousel

The accessibility audit gave me additional starting points for UX while still being able to use their branding assets in a more inclusive way.

Simplified website architecture

The original Alliance for Vehicle (AVE) website contained short bits of information that were scattered among multiple pages - approximately one paragraph of information per page. Much of the content was also redundant and could be consolidated. For example, "Our purpose" and "About" content could be combined together.

Color Palette

I isolated colors from AVE's logo to create both branding and utility color tokens for development.

AVE's green brand color swatch
AVE's blue brand color swatch
AVE's dark gray brand color swatch

Color Contrast Testing

Using TPGi's Colour Contrast Analyzer, I tested each color combination to allow me to best use them in the UI.

Colors over white backgrounds

AVE Blue on white
AVE Green on white
AVE Gray on white

White over color backgrounds

AVE white on blue
AVE white on green
AVE white on gray

Sketches and Wireframes

I started with sketches that explore both how to make existing components on the website more accessible, such as the hero area and the AVE member logo group. The wireframes include the home page's heading structure, link text and alt text for screen reader users.

Low-Fidelity Sketches

More accessible components included adding an overlay behind the text in the hero area and using alt text for company logos.
The accessible components were then sketched into a layout which was carried through to wireframes and final design.

Annotated Wireframes


I chose Inter for it's clean, legible style and created the typography using a modular type scale.

Initial Typography Doc

A document showing the various headings and body text and their respective sizes that AVE is utilizing for the website redesign.

Initial Type Scale

A mathematical type scale containing the inter font from it's smallest size to it's largest, along with the calculations for line height.

Final UI Screens

Home Page Final Designs

Post MVP Next Steps

The website was launched February 2023 and will continue being iterated on as-needed. The next steps are to create a customized blog template for press releases and to create profile pages for each member of AVE.