Overview:

This is a spec project.

The vision for the project was to build an e-commerce solution that would allow customers to buy candy from Rocket Fizz online. As COVID had a negative effect on in-person shopping, many businesses turned to online or digital solutions to connect people with their products. Facing similar issues and declining numbers, Rocket Fizz undertook the same initiative as many other businesses and added an online store to their existing website.

My Role:

As the lead UX Designer, I was responsible for the entire project from research to the final product.

 

Timeframe:

2 week sprint

Applied Skills:

Competitive Analysis | User Interviews
Affinity Mapping | User Personas | Card Sorting
Information Architecture | User Flows | Wireframing
Prototyping | Usability Tests

 

Programs:

Figma | Miro | Optimal Workshop | Adobe Photoshop

Frame 4.png

Company:

Rocket Fizz Soda Pop and Candy Shop is a franchise with stores all around the US. They specialize in selling candy and soda and have a massive inventory of products designed to overwhelm consumers when they enter the store.

 
 

Candy consumers need a convenient way to get candy online to satisfy their cravings for sweets.

COVID has caused a decline in in-person consumers. Starting from the ground up, Rocket Fizz would like to establish an e-commerce solution to allow consumers to purchase sweets and soda online.

Frame 4.png

The competition has standard e-commerce solutions with little deviation.

I started with a competitive analysis of other local candy stores’ online stores and comprised a feature inventory. Secondarily, I counted the number of clicks and actions required to purchase a product from their online stores. The biggest takeaway is that my store will need the following features:

  • Search

  • Browse

  • Filters to expedite the browsing experience

  • Membership/Sign-in

  • Express Checkout Options

Secondary features that were less common were cold shipping options so the candy does not melt and custom packaging for gifts.

 
 

Users usually buy candy spontaneously and often want online shopping to be as convenient and secure as possible.

I conducted a series of user interviews to gain insight into what users would want from an online candy store. As I took notes on the data, I wrote those quotes and statements onto sticky notes. With everything written down, I organized the sticky notes into groupings that allowed me to pull insights in the form of “I Statements”.

(Click on the image to view larger.)

Frame 4.png

Meet Robin the Gift Giver and Willy the Candy and Soda Enthusiast!

These I statements lead to the creation of two user personas so I could focus in on exactly who I am building this store for.

Seeing as demographics such as race, age, job, marital status, and education did not seem to change user’s answers, I excluded them from my personas. Ultimately I was left with two abstract representations of users based around common candy purchasing habits. 

One group of users bought candy as a gift, were extremely spontaneous, enjoy trying new things, and want online shopping to be convenient and secure. 

The second most common set of users have specific candy that they enjoy eating, are careful and methodical when shopping, and they enjoy saving money.

Users classify candy in many different ways.

With Rocket Fizz’s massive, expansive inventory of candy came a lot of problems with categorization. Should a Snickers candy bar be classified as a chocolate? Or should it be a caramel candy? What about a peanut candy? Or should it be categorized by its size? Or maybe its color or country of origin? There are no right or wrong answers here, but in order to understand how users would categorize these candies, I asked users to do just that and categorize a long list of 100 candies and soda in any way they see fit. It turned out that those categories were soda, chocolate, chewy, hard, fruity, taffy, licorice, and lollipops.

The most commonly used categories formed the information architecture of the store.

Frame 4.png

Sketching and digitizing the online store.

Using the user flows and the site map as a guide, I sketched wireframes for every page necessary. I put the sketches in front of classmates and users in order to gauge whether or not they were intuitive to navigate through. With some feedback and iteration, I digitized them in Figma and began prototyping.

Sticking to the Rocket Fizz brand.

Rocket Fizz aims to poke at customers’ nostalgia for classic candy shops. Their website follows this trend by ditching a potential modern aesthetic in favor of an early 2000’s design. I embraced this nostalgia and design as I breathed life into my wireframes. By using certain existing design aspects in their site, I created an online store with modern functionality and in-brand styling. It is important to keep this new part of their site in line with what users have come to expect.

Frame 4.png

Users are very familiar with the online shopping experience and faced few problems.

Upon completion of a clickable prototype, I put it in front of users and asked them to complete certain tasks. The general flow was quite easy to navigate and users did not face many problems with that. Users did have problems with some design choices though. I outline them below.

High fidelity prototype demonstration.

The prototype allows the user to do the following tasks based on the personas and user flows:

  • You are shopping for a gift for a friend. You know they like fruity chewy candy. Find and select a fruity chewy candy to order.

  • You don't know what you want to get. Pick a candy of the day and make sure the ingredients don't include peanuts because you are allergic.

  • Search for and purchase six bottles of your favorite soft drink, Coconut Cream Lime Soda.

The first two tasks are based on the persona, Robin - The Gift Giver. The last task is based on the secondary persona, Willy - The Soda and Candy Enthusiast. Robin wants to give gifts to people a lot and needs to find candy that she knows her friends like. She is also a spontaneous shopper and would like to be given recommendations and options when shopping for candy. Willy knows exactly what he wants and has his favorite candies and sodas. Users who showed this sentiment also usually liked searching for products when online shopping. 

Frame 4.png

Results and takeaways.

Since this was a speculative project, there were no numbers to reference to gauge success, but as an exercise in developing my skills, the project was very successful. Prior to this assignment, I faced a lot of difficulty with research and synthesis. This project, however, served as a eureka moment for me where it finally all made sense. I was able to conduct a lot of interviews, synthesize the data from them, and make personas that were all connected clearly through the data. From there the rest came easy. With most of my career spent in graphic design, I am very familiar with designing within a brand and my love of digital design programs spread to figma with ease. My skills with figma progressed very quickly and set me up nicely to take over the entire prototype in my next speculative group project, OpenTable. 

My other projects: