Product Designer | Accessibility Advocate
Strange Vacy Mock.png

Strange Vacation

Informational architecture for the potential expansion of an existing e-commerce website for the brand Strange Vacation.

Strange Vacation

Collage of images. One depicting an illustration of cookies; another a woman in a black jacket; text from a card sort; image of a keyboard; image of a woman wearing a motorcycle helmet.

Collage of images. One depicting an illustration of cookies; another a woman in a black jacket; text from a card sort; image of a keyboard; image of a woman wearing a motorcycle helmet.

The Project

Strange Vacation is a lifestyle brand dedicated to motorbikes and the ladies who ride them. Some number of years ago, my friend Kelly began riding motorbikes. As an apparel designer and all-around, stylish lady, she quickly realized that within the womenswear sphere, bike clothing was either (A) fashionable and not functional, or (B) functional and hideous. I’ve been a huge fan of how Kelly and her business partner Jenny have designed safety clothing with a fashionable edge. I don’t even ride a motorbike, and I’ve been tempted to purchase some of the pieces.

At present, Strange Vacation’s website is aesthetically pleasing but only has to display its currently limited range of products. What if they wanted to expand? I presented this idea to the founders, and they responded enthusiastically to the idea of expansion:

we’ll be selling a variety of things! it’s all about creating a curated mix of items for that lifestyle while keeping the balance of style x performance. we will most likely expand in jackets at some point... leather vest, Kevlar denim, potentially some pieces with armor... And then on the style side more graphic tees, basics cut & see pieces in cool silhouettes.... And then we’ll for sure mix in weird shit at some point like Swim suits, leather bras...socks, etc. And at some point we’ll def do dirt bike stuff. so... Haha, basically the world is our oyster but everything we make will have the same point of view... Gritty, sense of humor, style, performance attributes, rooted in the heritage of the Moto world. we also want to sell jewelry & already curated items for women that involve motorcycles like tools, knives, etc. Does that help at all?? I know it’s so broad, but our opportunity is pretty endless;)
-Kelly

My job was clear. I needed to redesign the current information architecture (IA) to account for a range of products, both those currently existing within the collection and others that have yet to be designed. An extensive range of products.

Images of black clothing and accessories, with white text reading "EXAMPLE" over each image.

Images of black clothing and accessories, with white text reading "EXAMPLE" over each image.

Information Architecture

I began by looking for some items online that would fit aesthetically within the framework of the existing collection, as well as fitting to some of the ideas presented to me. I then put these images into an open visual card sort and asked some friends to sort the pieces as they saw fit. The friends in question were not previously familiar with Strange Vacation but fit within the brand’s target demographic.

Screencap of a digital card sorting exercise.

Screencap of a digital card sorting exercise.

I gained some valuable takeaways from doing this card sort. Firstly, my friends maybe a little too “creative” for fully open card sorts in the future. But more importantly, many of the participants were grouping items in similar categories, which proved enormously helpful in designing the project IA.

Prototyping

After performing some heuristic evaluation on high-end e-commerce sites, I designed a few information architecture variations. One was immediately shot down by my best friend, who looked over my shoulder at a wireframe and exclaimed, “ugh, I hate that.”

Screencap of a mockup website. Featuring images of women in black leather motorcycle jackets.

Screencap of a mockup website. Featuring images of women in black leather motorcycle jackets.

Well, ooookay. After designing a few more navigation options and testing the different homepages with a few peers, my users and I settled on the black banner's current design, along with some image-based navigation.

I designed two user flows and had four users look for a leather jacket and/or a leather jacket and an enamel badge.

Screencap of a mockup website. Featuring eight different website pages, in the order of an idealised test flow.

Screencap of a mockup website. Featuring eight different website pages, in the order of an idealised test flow.

User Testing and Results

Additionally, one user remarked that he was unfamiliar with the term “flair.” Still, as it was independently used multiple times in the open card sort and did not present an information barrier to the target demographic, it was not changed.  

The result allows the brand to expand its collection to include any number or variety of products in the future.

Grey text on white background entailing the results of first round user testing.

Grey text on white background entailing the results of first round user testing.