Quirky eCommerce Site

Redesigned Quirky’s product page to showcase each product’s story from invention to fruition

Content Strategy / UX Design / UI Design

 
 

Overview

Upwards of 690k people invent, inspire, and inform Quirky’s 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. Over 400 unique products have been brought to market, selling at retailers such as Target, Bed Bath & Beyond, Best Buy, and Amazon.

Quirky hired me to work with their team of developers to redesign their product page, category landing page, and navigation to better tell the story of their products and community behind them.

 
 

 

Process

Assessing the current situation

Quirky’s goal was 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.

 
 
 

 

Exploring concepts through user journey maps and sketching

User Journey

fd-ipad-highlight-02.png

I mapped the journey we wanted users to experience while shopping based on my conversations with the team: “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

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 touch points over product photography, tabs to separate about, specs, and reviews, and placing a persistent purchase bar as users scroll down the page.

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

 
 

 
 

Final Designs

 

Product Hero

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.

 

Product Features

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.

 

Inventor Story

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.

 

 
 

Making it easy for shoppers to find what they want

 

Navigation

 

Category Landing

This template was designed to allow Quirky to showcase a featured or best-selling, and  break up the grid to cross-sell featured products from other categories.

 

Homepage

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

 

 
 
 
 
 

Let's work together

I’ll partner with you to hone your vision, understand user needs, test prototypes, and launch a product that stands out.

erin@madebyeno.com