Hooptedoodle

Hooptedoodle is an e-commerce web design that encourages personality and self-expression with custom enamel pins. The site aims to provide an easy filtering system and a clean mobile experience for its products.

DESIGN ROLES

Identity

Personas

Research

Wireframes

Responsive

Prototype

Identity

Hooptedoodle is a brand that is bold and youthful with a dash of vintage flair. This online shop specializes in high quality custom enamel pins. These pins are designed and produced in small batches by a curated group of designers. There is also an emphasis on getting involved with the community and creating your own pin designs for sale.

The vibrant palette chosen (aqua, fuchsia and charcoal) is a nod to the classic 80’s color combo. The logotype was typeset in a modified version of Freehand 575—a punchy casual script. The design style for this site is enhanced with bold imagery to promote a sense of energy and self-expression. Overall, the layout is very clean and simple, which leaves room for loud retro banners and callouts. In contrast, the products are displayed with restraint.

Personas

From the very start, it was clear that Hooptedoodle would have a mainly female audience between the ages of 15 and 30. However, the product needed to be enticing and usable for all fringe users.

Kathy | Retail

Kathy is a fashion nut. She wants every day to be a good outfit day. Enamel pins are something that she collects to accessorize. She specifically looks for the perfect pin in the perfect color to compliment her ensemble.

Cassie | Actress

Cassie has been designing her own pins and making them by hand for years. She is looking for a company that can help her create high quality small volume orders and provide a storefront for her designs.

Lynda | Teacher

Lynda’s daughters are always looking for fun new accessories. She found Hooptedoodle through a search and wants to browse through all of the pins easily. She will probably order several different designs and wants the checkout process to be clear and simple.

Mark | Designer

Mark is a designer and he’s looking for a gift for his wife. She loves her zodiac sign (capricorn) and he wants to find her jewelry that would have a personal touch. He wants to visit the website and very easily filter through all options. He also wants to easily use a coupon.

Research

Research for Hooptedoodle began with a competitive SWOT analysis of other accessory driven e-commerce sites. To avoid oversaturation, special attention was paid to creating a strong tie with a vibrant and kitschy audience.

While settling on the exact approach Hooptedoodle should have towards showcasing products and attracting its audience, 3 larger e-commerce sites were analyzed (Sevenly, Big Cartel and Threadless). After taking detailed notes on the three, great opportunities were found in creating a very curated shop with a sense of community. Since enamel pins have to be created in large batches, there needs to be high quality control and active marketing to keep them appealing in a fresh manner.

While the filtering system would be very simple (since pins usually have one size and color) there would be routes to explore with collections and bundles. Social media outreach that encourages users to tag and post photos would also be very essential. These products are 3D and need to be seen on people for context. An emphasis on the user’s “relationships” could also reach into a functionality where artists collaborate or create small integrated shops like Etsy.

Wireframes

Planning for Hooptedoodle started with low-fidelity wireframes for the product list page. It was essential to make sure that the web design would translate cleanly to a mobile experience. From there, the product page, homepage and eventual flows for purchasing and reviewing were wired out.

Responsive Design

Hooptedoodle inherently appeals to a younger audience, so a clean responsive experience with the filtering system at the fore was essential. The simple wireframes were styled and vibrant imagery was added.

High-Fidelity

A good deal of time was spent iterating over colors and type that would create a clear sense of hierarchy. Additionally, after the first few designs, a sticky footer was added to allow for quick cart viewing and skipping up to the top of the site.

Homepage Design
Product Filtering

Screen Flows

Special attention was paid to the purchase, checkout and review flows. There needed to be easy and personal interaction with each product. Hooptedoodle should feel like a community experience where users remain doubtless of each pins’ representation.

Prototype

This interactive prototype focuses on the filter, checkout, purchase, reading and writing review flow of a bowling pin design. After testing, there appears to be room for more design exploration with onboarding a user for membership and creating a custom pin creator backend in the future.

View Other Case Studies