I'm more often found outdoors than in. An avid lover of pine-scented air and sunshine, I call Colorado home and enjoy all the beautiful scenery it has to offer.
Sugar Spoon Candies
Creating an eCommerce website for a local candy store
scroll
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
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.
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.
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.
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.
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
Synthesis
After researching and testing, I created two user personas and a user flow that show how customers could navigate through Sugar Spoons' website.
User Personas
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
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
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.
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.
Sketching
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
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
Protoyping
Braden gets his gummy bears
Moving to High-Fidelity
Adding color, branding, and product images
