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 digital, organic experience

Inspired by how customers would order doughnuts in store, I took as much as I could of the organic experience of  buying doughnuts in person, and transferred it to the online interaction. People are familiar with using avending machine, so I designed the online point of sale platform to mimic the usability-engineered experience of operating a vending machine.

One of the benefits of this vending machine experience was how it allowed the user to organise boxes of doughnuts. The boxes are like money you put into a machine; featuring them prominently and empty next to a product functions as the visaul cue for the initial process of ordering something. It also acts as a mechanism to communicate and offer user control with an order. Perhaps someone wouldn’t want chocolate doughnuts and raspberry doughnuts in the same box. Combining a drag and drop interface with a simple number picker allows the user easily to create tailored doughnut boxes.

Platform technology challenges

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. Usually a user would add the product, and the page would reload with the item added to the cart via backend. The SuzyQ store page required 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.

 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. The new website has boosted SuzyQ's website traffic by over 200% and led to a healthy growth in sales. This website has been featured in Applied Arts Magazine as well as Shopify's Partner program.

[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]