Jackpine Creates Sweet Site for SuzyQ
November 17, 2014
Ottawa-based design and strategy studio Jackpine Digital recently rolled out a new website for SuzyQ Doughnuts after completing a new identity for the brand late last year.
Susan Hamer opened SuzyQ Doughnuts in Ottawa’s trendy Hintonburg neighbourhood in 2012 after a stint selling at local farmers’ markets. From the cardamom-spiked original Sugar Munkki, to wacky variations such as the Blue Vanilla Fruit Loop, the doughnuts — based off a Finnish family recipe — were an instant hit.
“They cram a whole team of people into this little hut and make doughnuts for the whole city,” says Liam Mooney, creative director and CEO of Jackpine. “There’s always a line-up out the door.”
The team at Jackpine crafted a bubble-letter Q for the SuzyQ logo, which Mooney says was inspired by the process of making the dough. “We understood that we just had to show the doughnut,” he says.
They stuck to that simple mantra when developing the new web interface, too. “We needed to make sure that the doughnuts look delicious,” Mooney says. “When people go to a doughnut shop, they are familiar with the experience of looking at a rack and pointing. We wanted to replicate that on the Internet.”
So Jackpine toyed with the Google Maps API to match the brand’s colours and developed a unique shopping-cart execution. “The colour palette was largely inspired by the spices and the dough, as well as the ingredients and the materiality,” Mooney says. “We had the idea to do this as a left-side navigation website. It’s an old-fashioned product, and an old-fashioned recipe. [Left-side nav] is not an inherently bad design just because it was favoured in 1990s websites. We just really wanted to put the doughnut at centre stage. Nothing above it.”
To keep the design minimal and the focus on the doughnuts, he continues, “We thought, ‘why don’t we just take the photos on black?’ It gives it an infinity look so [the doughnuts] stand out.”
Jackpine also modified the shopping-cart framework developed by another Ottawa-based company, Shopify, to customize the purchase experience on the SuzyQ site.
“A normal Shopify store operates by allowing the user to add one product at a time to their cart. In the most basic setup, you click to add the product, and the page is reloaded with the item added to the cart. The SuzyQ store page requires the ability to add many products to a cart without reloading the page,” explains Jackpine’s developer Scott Thompson. “With that as a requirement, the store was designed with a locally managed cart that was modified as the user interacted with the page.”
Those modifications included having items added and removed with speed, and without page reload. Thompson wrote the code so users must have a minimum of 24 doughnuts in their cart before they can proceed with ordering, and so the system uses variants to recognize that every sixth doughnut is free. The pick-up and delivery time stamps are also elegantly integrated into the cart display.
“Even the little shopping cart icon — there’s a doughnut implemented,” Mooney says of the site’s attention to detail. “We looked at the boxes where you would place the products in your cart. Say you wanted to add five maple-bacon doughnuts. Where do we go? Do we try to make a 3D box? Something that has depth? In the end, we decided we could allude to the same concept but have a much simpler aesthetic to allow us to be consistent.”
The comprehensive SuzyQ design is resonating with locals, he explains. For the doughnut shop’s booth at this past summer’s TD Ottawa Jazz Festival, Jackpine created two banners containing a picture of a doughnut and a cheeky pun. The banner boasting the Toasted Coconut & Lime flavour said, “I’m coconuts about you.”
“Now, people buy double the amount of coconut doughnuts they used to. People can see the impact of design,” Mooney says. “When you merge creative vision, execution of craft and marketing, it can be quite an effective tool — and it helps if the product is really good.”