About Quirky

Upwards of 690k people invent, inspire, and inform Quirky’s massively successful line of products. Each week over 2,000 ideas are submitted to be voted on and brought to reality in Quirky’s New York City-based headquarters. Inventors and community members who contribute to a product’s success then earn a percentage of the profit. To date, over 400 unique products have been brought to market, selling at retailers such as Target, Bed Bath & Beyond, Best Buy, and Amazon.

Quirky’s Head of Platform Experience, Steven Walker, hired me to work with him and his team of developers to redesign their product page, category landing page, and navigation to better tell the story of their products and the community behind them.

Assessing the current site

Initial discussions with Steven centered around Quirky’s goals to overhaul their product landing page, which was informative but lacked the very personality their products had become so well known for. It was clear that there was a huge opportunity to highlight the product’s features and inventor through storytelling in the redesign.


Mapping a user journey

user_story_grid

From these initial conversations I was able to map the journey we wanted users to experience while shopping: “Show me what it is, tell me what it does, help me imagine how I’ll use it, inspire me with a story, and let me explore what else I might like.”

Sketches

quirky_sketches

With the user journey as a guide, I sketched a broad range of options for consideration. We explored templates for multiple-use products like the magnetic bottle opener, templates with large videos and lifestyle imagery to help bring products like the pivoting power strip to life, and multiple variations of the inventor’s story and user reviews.

Wireframes

Rough sketches were refined in three distinct directions through wireframes. Explorations included using information touchpoints over product photography, tabs to separate about, specs, and reviews, and placing a persistent purchase bar as users scroll down the page.

quirky_wireframes_3up

Because of its large video-centric approach, purchase bar, and scalability, we agreed to move forward with the heroic wireframe into visual design.

Using a grid and color to lead the eye

When you land on a product page, the video is the first thing you’ll see. The grid leads the shopper’s eye from the large video, to the graphic thumbnails, and then pulls the eye down to the vibrant color of the add to cart button.


Telling them why

Quirky’s products solve unique problems most common goods fail to address. Before the redesign, products and features were described with a simple bulleted list. Now, each product page has a features section to highlight functionality using fun images and blurbs.


Inspiring the customer

We wanted to inspire our audience to invent while encouraging purchasing. The inventor’s story humanizes the product design process and provides each product with a relatable narrative.


Encouraging exploration

After the shoppers have had a chance to look at the product in detail, we wanted to make sure they had quick access to explore more products that might fit into their lifestyle. Recommendations are based on purchases that other shoppers made who also viewed the current product.


Navigation

To make it easy for shoppers to get around, we created a navigation dropdown that allowed quick browsing by categories, featured collections for holiday seasons, and price. Recently added products display on the right to keep the site feeling fresh while maintaining consistent navigation on the left.


Category landing

We wanted shoppers to enjoy browsing categories just as much as product landing pages. This template was designed to allow Quirky to showcase a featured or best-selling product larger than the rest. We also introduced the idea of interrupters to break up the grid and cross-sell featured products from across other categories.


Shop homepage

A shop homepage concept was designed to mimic the dropdown navigation, featuring new and noteworthy products, categories, and collection browsing.