Alfo flooring system case study.

ALFO Accessible Van Flooring System

Website MVP design and development

Company Overview

The ALFO flooring system was created by Pareto Aluminum Systems, a Michigan-based automotive-focused startup. ALFO is an custom-made, interchangeable flooring system for large Ford and Chrysler transit vans. It allows anyone to create custom accessible seating arrangements for all passenger types, including those who use wheelchairs.


I worked alongside Pareto on a two-month basis to design and develop their initial website MVP focused on ALFO. The goal was to create the essential pages needed for them to garner more venture capitalist funding and build public awareness. The home page in particular needed to focus on key product features and benefits, while driving initial sales at their dealerships.

Initial Client Wireframes

The client's ideas were expressed through wireframes, which I used as a starting point. This included their original ideas for page layout and site architecture. A key challenge was drawing the distinction between Pareto's company name and their flagship product.

Initial home, about and contact page wireframes given to me by the client

Proposed Layouts with Annotations

I streamlined their initial home page idea by surfacing key features and value propositions, while creating a clear purchase call-to-action. I also created a separation between their company and the product in the marquee by using the phrase "Pareto introduces" above the logo. Annotations were used to clarify layout and component choices, along with functionality and semantics.

A side-by-side view of Pareto's home page wireframes for both mobile and desktop. This includes functional and design annotations.

Proposed Interior Page Layouts

The same annotated approach was taken with each page and their components to outline intent, layout and functionality. These examples below are the final proposed interior page layouts for desktop.

Pareto about page wireframe on desktop. This includes placeholder text about the company and image placeholders.
A desktop wireframe of Pareto's find a dealer page, which includes dealership info in various parts of the US and a map image placeholder.

Color Palette

I isolated Pareto's colors from their style guide to create a web-oriented palette.

Pareto's blue brand color swatch
Pareto's dark gray brand color swatch
Pareto's light gray brand color swatch
Pareto's white brand color swatch


Utilizing a modular type scale, I created Pareto's web typography. Poppins was the font that they were already using in their catalogs, so I expanded upon it's use on the website. I wanted to create a large breadth of sizes to scale with Pareto's eventual design system.

A listing of Pareto's web typography including their headings, links and body text.

Foundational UI Components

I wanted to ensure that, as Pareto's web ecosystem grew, their components would be well-documented and able to be handed off to future dev teams and designers. I created foundational component library in Sketch to seed a design system.


Final Home Page Design

A side-by-side view of the Pareto home page on desktop and mobile.

Final Interior Page Designs

Pareto about page desktop viewport
Pareto dealer page desktop viewport


Pareto was able to utilize the initial website MVP as a way to build brand awareness and continue to raise VC capital for ALFO. Utilizing the design elements that I had coded and documented, their development team was able to build new pages and expand the website to include more interactive functionality such as a self-serve floor layout builder.