Suzy Q Doughnuts


  • Type: Art Direction, UI Design

  • Agency: Jackpine Creative

  • Featured in Applied Arts magazine

When you merge creative vision, execution of craft and marketing, it can be an effective tool — and it helps if the product is really good too. The creative vision for Suzy Q was to provide a visual identity and e-commerce site that was as enticing as their doughnuts and also communicated the product as the brand.

A sweet problem

What started as a small food truck in 2012 grew into a thriving business with early-morning lineups a dozen deep, but Suzy Q was still faced with a barrier. Being located in a small space meant that their customers would line up for blocks before being able to choose their doughnuts. What if there was a way to cut the queue down by offering patrons the ability to order doughnuts online for a speedy pickup or delivery?

A digitally organic experience

Inspired by how customers would order doughnuts in store, I created a vending machine experience that made it simple to buy doughnuts and organise them in boxes. I took as much as I could of the organic experience of  buying doughnuts in person, and transferred it to the online experience.

Perhaps someone wouldn’t want chocolate doughnuts and raspberry doughnuts in the same box. A simple number picker combined with a drag and drop interface allows the user to create tailored doughnut boxes for pickup or delivery.

Platform technology

The Suzy Q website pushed the limits of Shopify,  the platform it was built on. 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. With that as a requirement, the store was designed with a locally managed cart that was modified as the user interacted with the page. Another modification included having items added and removed with speed, without page reload. The back end code was written 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. This website has been featured in Applied Arts magazine, and Shopify's Partner program.

 The design of the logo is also influenced by the process of making dough.

The product is the brand

The charm and artistry of the pastries is preserved by a design that puts the doughnut front and centre. The use of a vibrant color palette in the Suzy Q brand represents the spices that give their doughnuts a unique explosion of flavour. Customizing the appearance of the Google Map API further incorporated the brand into the experience.

[unex_ce_button id="content_1oew2zqmw,column_content_hj393hm9q" button_text_color="#000000" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="0.5px" button_bg_color="#ffffff" button_padding="15px 70px 10px 70px" button_border_width="1px" button_border_color="#777777" button_border_radius="4px" button_text_hover_color="#ffffff" button_text_spacing_hover="0.5px" button_bg_hover_color="#f26739" button_border_hover_color="#f26739" button_link="https://suzyq.ca/pages/store" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW THE SITE[/ce_button]