Site user flow
Article page wireframes
Product intro in article page
Airstream has hired the Lat Long team to expand the brand beyond trailers and into lifestyle and design. They wanted a new digital storefront that aims to take an editorial-first approach to product presentation. The final product was to be an eCommerce experience that is deeply rooted in editorial content. From a tech point of view the website was to be fully scalable and adjustable with new articles and products introduced weekly.
My main challenge was to create engaging layout that encourage users to read and explore content further while subtly suggesting products relevant to them. Diverting from the “traditional” ecommerce web layout, this website is going to feel more like a glossy magazine. Articles of great adventures and explorations would have products and collections highlightes rather than product pages.
What I did:
I started with a mood board, shared with my team. The board had images of unique layouts I liked, useful interactions and ideas for product introductions. Once I had a clear idea of the direction I wanted to take I created 2-3 wireframe variations to the key pages pages of the website. For scalability and fast iteration purposes, the wireframes were based on components. With few rounds of feedback I was able to quicly iterate my designs to the final layouts and create the component library. I then mapped out the site structure and user flows. This was the base for the clickable prototype of the website that I created for the development and design teams.
Sketchapp, Invision, Dropmark, Flowapp. Component Library.
Airstream’s brand new digital storefront is now live. You can view it Here