Responses by Michael Janiak, cofounder/executive creative director, Pattern
Background: Boon Supply is a commerce and fundraising platform founded by Lily Kanter. Its mission is to power the “Doers,” the people working on the little things that add up to big differences and the everyday heroes who take action to make things better. With help from SDG, we brought the Boon Supply brand and mission to life by crafting a curated online retail experience that uniquely combines seamless browsing, shopping, fundraising and fundraiser management.
Highlights: The fundraiser signup and management dashboards. The fundraiser on-boarding and setup process was completely reimagined from the customer point-of-view, and designed to feel like a fully integrated brand touchpoint, not something that users simply had to slog through to get started.
Challenges: The complex integration of Boon Supply’s eCommerce platform, Shopify Plus, with its order management, CRM and fundraiser management systems, which run on Netsuite. These kinds of integrations are exceedingly rare on Shopify's platform and the complexities of making it all work in concert on the backend so that customers and fundraisers have a great, seamless experience on the frontend cannot be overstated.
Favorite details: The micro-interactions of the “waves” drawing themselves in and the imagery fading in as users scroll. We made sure the timing was perfect so that the animations encouraged interactivity and exploration, and reinforced the positive and playful nature of the brand. We also designed a system of fundraiser “cards” that offer contextual details at a glance about the status, progress and time remaining of every fundraiser on the site.
Navigational structure: The product catalog is going through some radical changes this year, so the design had to be really flexible so that it can adapt, as older products are cycled out and newer products, categories and collections are cycled in. Users can search for products and fundraisers, start a fundraiser, and shop from just two links in the top navigation.
Technical features: The Boon Supply site sits on a stack comprised of Shopify Plus and Netsuite. The front-end is built using a combination of Angular JS, React, JQuery, HTML5 and CSS3. We also used Core JS and Picturefill. For design integrity, we used a combination of the Google Fonts API and self-hosted web fonts and SVGs to ensure crispness and scalability of iconography and graphic patterns across all device sizes.
Alternative approach: I would have liked to spend more time on crafting a larger design language and experience around Boon’s impact in the world. You see this in a few places on the site, and it’s powerful. I’d love to come back to it and really blow it out at some point in the future.