top of page
Sugar Spoon Mockup

Sugar Spoon Candies

Creating an eCommerce website for a local candy store

scroll

candy jars

Introduction

Sugar Spoon Candies is a small mom and pop candy and ice cream store located in the heart of downtown Castle Rock, Colorado. Owned and operated by a husband and wife team, the shop specializes in bulk candy, international candy, and (most importantly), homemade ice cream sold for $1 a scoop. 

Tools

Sketch

InVision

Whimsical

Optimal Workshop

Methods

Competitive Research

Comparative Analysis

Usability Testing

Card Sorting

User Personas

Hand Sketching

Wireframing

Prototyping

Timeline

Three weeks from ideation to high-fidelity wireframes for desktop and mobile

Problem

While the in-store offerings abound, Sugar Spoon does not have a website. Further, there is no way to currently order any of Sugar Spoon’s bulk candies or snacks online

Approach

With the end goal of providing customers with an easy-to-navigate online store, I began with a detailed inventory of Sugar Spoon's offerings. I then looked at online sales options, quantities, and categorization. 

Assorted Treats

Research

As Sugar Spoon is surrounded by many competitors, this research was beneficial, as it helped maintain the priority of keeping Sugar Spoon competitive in a small community.

Research
What do users look for in an online shopping experience?

"Sometimes I like to look at the related or recommended products."

"Make it as easy and simple as possible."

"Easy to navigate."

"I like to be able to use reviews."

"Detailed description of products."

"Safe and secure payment."

"Simplicity."

"I like to compare products."

"Simple process."

"I want it to be easy and secure."

Competitive Research & Comparative Analysis

Within two blocks of Sugar Spoon, two different competitors sell their stock: Mountain Man Fruit & Nut Company, and Rocket Fizz. 

 

Neither location has a website with an online store. Three additional small treat shops, still located within 15 miles of the store, were used for feature analysis.

Sugar Spoon Competitor Feature Analysis

Takeaways

  • Simply having a website would be beneficial

  • Having a functional online store would bump Sugar Spoon above the direct, extremely local competition

  • The online store, along with its functions (cart, filter, search), need to be obvious when users first land on the homepage of the website

Usability Testing

A competitor's website was used for the purpose of usability testing.

 

GOAL: Testers were given the task of shopping for two different treats, adding them to their cart, and proceeding to checkout. 

Lolli & Pop's Error Message
Lolli & Pop's Add to Cart Button Error
Lolli & Pop's Checkout Page
Lolli & Pop's Filters

Takeaways

  • Ensure all pages and features of the website are accessible

  • Maintain consistent styling across all pages of website

  • Provide a simple and obvious filter option

gummies

Synthesis

After researching and testing, I created two user personas and a user flow that show how customers could navigate through Sugar Spoons' website.

Synthesis
User Personas
Sugar Spoon User 1: Braden

Busy Braden

​

“Sugar Spoon is my favorite candy shop, but I don’t always have time to go into the store and browse for what I want.”

 

Needs: 

same selection online as in store;  quick and easy checkout

 

Favorite candy: 

chocolate covered gummy bears

Giving Gail

 

“I can always count on Sugar Spoon for high-quality products that make great gifts for everyone on my list.”

 

Needs: 

gift wrap options; ability to ship anywhere

 

Favorite candy: 

the Original  Goo Goo Cluster

Sugar Spoon User 2: Gail

How Might We...

  • Provide both shipping and pick-up options for customers

  • Ensure this website is both usable and enjoyable, to include search, filter, and sort options

  • Maintain a consistent style across all web pages; make this style reflective of the vintage atmosphere of the store

Understanding user behavior
Sugar Spoon Task Flows

As with the majority of online shopping, both users begin at the home page. From there, their paths diverge, as Braden uses the search feature and Gail uses the navigation options to browse products. She also uses the sort and filter functions to narrow her results. After looking at their respective product description pages, both users add the product to their cart and complete the checkout process.

Image by Luis Aguila

Ideation

Ready to bring ideas to life, I began with hand-drawn sketching and quickly moved to wireframing. A second round of usability testing was completed before making small adjustments and creating a prototype.

Ideation
Sketching
Sugar Spoon Home Page Sketches

Home Page

  • Using the Sugar Spoon logo as the “home” button

  • Providing five or six primary navigation categories to enable users to shop right away

  • Including a large hero image or slideshow, to include specials, events, and interior/exterior photos of the store

  • Large sections for news, specials, and top sellers for each category

Sugar Spoon Product Listing Page Sketches

Product Listing Page

  • How to display the category as a header

  • How many products to list and how to shape their images

  • Where and how to list the filter and sort options

  • Whether to include breadcrumb navigation at the top of the page

Wireframing

Mid-fidelity screens

Sugar Spoon Product Description Page (mid-fi)
Sugar Spoon Checkout Page (mid-fi)
Sugar Spoon Order Success Page (mid-fi)
Protoyping

Braden gets his gummy bears

Moving to High-Fidelity

Adding color, branding, and product images

Sugar Spoon Mockup 1
Sugar Spoon Mobile Mockups
Sugar Spoon Mockup 2
Image by Iwona Castiello d'Antonio

Next Steps

As this was a concept project, I would love to make it a reality. I am an avid supporter of the Shop Local movement and think that a website with an online store would make Sugar Spoon stand out among the close competition in the Castle Rock area.

Next Steps
bottom of page