Where it started
Upon digging into the project and working with the Motional internal stakeholders, a few insights were found to help guide the design process. The site had not only a problem with load times which inhibited users from exploring and learning more about Motional, but also had an issue with content cohesion.
Motional Interactive component showcasing features of their self driving cars
On the design side, to address these challenges, we streamlined the interactive elements and content of the existing site into a lighter weight set of components for building out pages. This allowed the content to still be brought to life and stay interactive without compromising consistency.
Key Screens & components of Motional.com
With this in mind we built out the design framework and structure for the component library in Figma including the unique stand-out components that still allowed for the site to keep its interactive and forward-thinking vibe. This allowed for a rapid site build out that didn't compromise on the details. Utilizing variables in Figma we kept consistency across the library with a one stop shop area for any changes that needed to be made along the way. The components themselves were also built to be auto scaling with auto layouts to handle transitions between screen types seamlessly requiring less upkeep as the library evolved and expanded.