ALFO Accessible Van Flooring System
Website MVP design and development
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.
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.
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.
Color Palette
I isolated Pareto's colors from their style guide to create a web-oriented palette.
Typography
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.
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
Final Interior Page Designs
Outcomes
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.
