Concept Design: Responsive E-Commerce

Nowadays, a store’s online presence is just as important as their physical presence. While Rocket Fizz’s physical chain stores are whimsical and inviting, their website was gaudy and difficult to navigate.

Rocket Fizz is a US franchise that specializes in soda, candy, and novelty items. Their stores sell a diverse variety of candies and produces its own line of soft drinks with wacky flavors.

This case study will walk through a conceptual redesign of the Rocket Fizz website. Namely, adding e-commerce functionality to make their wealth of products easier to navigate.

This was a project assignment from a UX bootcamp.

Competitor Analysis

I was personally not a fan of novelty candy stores, so this research was especially important to me as a designer. Truly, who are the customers that keep these businesses running? That curiosity guided my research.

I couldn’t get in contact with Rocket Fizz, so I visited my local Sugar Factory, a small kiosk that sells unique candies. An employee generously spent some time sharing her observations about her customers. I also did mini guerrilla interviews with 3 of Sugar Factory’s patrons, asking them what they bought and why they bought it at Sugar Factory.

Sugar Factory's employees and customers helped me get an idea of who goes to novelty candy stores, their goals, personalities, and preferences. This helped me establish my user interview questions and criteria.

Interviews

I conducted 6 user interviews to build user personas and to inform the design.

Interviewee criteria: They have bought or would buy novelty candy and items.

Goal: Identify their personalities, problems, & motivations when purchasing novelty goods.

Main Takeaways

  • Some users go out of their way to novelty candy shops to get a product, and some just happen to find themselves there while being a tourist, for example.
  • Some users would only purchase if it was convenient to them. Some would purchase even if it was inconvenient to them.

By affinity mapping the results into a cartesian plot (seen above), I was able to identify two main personas. Making an assumption that a user with casual shopping tendencies wouldn't just happen upon a site like Rocket Fizz, both personas became intentional shoppers.

Personas

From the research findings above, I created Javier & Jenny to represent Rocket Fizz's main customers. During ideation, these personas helped me verify that each feature in the design addressed user needs. Check them out below!

Card Sorting

Since Rocket Fizz's site didn't have an e-commerce feature, a card sorting exercise was crucial to establish an intuitive information architecture that aligned with user expectations.

I had 13 remote card sorting sessions using Optimal Workshop. The data confirmed 4 main categories for Rocket Fizz’s products and 11 subcategories total.

Sketches

To maximize effectiveness and time, I used the Crazy 8's exercise to sketch out each page from the established user flow. I reviewed my work and highlighted the features that would best serve Jenny and Javier. Those features made up more robust sketches that would inform the low fidelity wireframes on Figma.

Wireframes

Using Figma, I translated my sketches into low-fidelity wireframes. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.

Usability Testing

‍I did 3 usability tests to understand how intuitive it would be to navigate the site.

Findings

  • Had to provide “hints” to start tester in the right direction
  • Users were confused on shopping cart flow
  • Some users felt the card size was small

Solutions

  • Improve my usability testing interviewing skills
  • Visually make shopping cart flow stand out
  • Increase product card sizes for accessibility

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s whimsical personality, but also not overwhelming.

Next Steps

For future iterations, I would want to do more research! I didn’t get to interview that many people who have specifically gone to Rocket Fizz, and I think that interviewing more direct customers would have eventually led to a more informed visual brand.

Table of contents