Quirky eCommerce Site
Redesigned Quirky’s product page to showcase each product’s story from invention to fruition
Content Strategy • UX Design • UI Design
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.
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
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.”
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.
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.
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.
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.
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.
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
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.
A shop homepage concept was designed to mimic the dropdown navigation, featuring new and noteworthy products, categories, and collection browsing.
Erin is a product designer at Squarespace
Want to get in touch?
I’m available for speaking at events and conferences as well as teaching workshops on product ideation, testing, and design.