Jet Set Candy

the task

Design a responsive sliding cart that enhances the user's shopping experience on the website.

My Role:

UX & UI Design

Duration:

8 Weeks

Tools:

Figma

Jet Set Candy is a New York-based jewelry business that sells collectible charms that customers can customize to commemorate important events or trips in their lives.

Due to the customizable nature of their products, the business required an interactive shopping cart that would reflect the user's configurations without looking crowded or confusing. In addition, the business wanted to highlight other features in the cart interface such as a progress bar, free gift picker, and product suggestions.

This project allowed me with the opportunity to work with a mentor and the e-commerce's growth & strategy partner.

My prototype was developed and shipped on the company's website.

Research

Aligning Strategy with Design

I had a meeting with the growth and strategy partner which helped lay the groundwork for the sliding cart design. This gave me an understanding of the project scope and deliverables, including the features and requirements. I also learned about the company and the flow of their current shopping cart.

The client had sketched out a quick mockup and I was also given examples from other websites as inspiration.

Identifying Pain Points

The previous shopping cart experience was set on a separate page and the client wanted a cart that would slide out. This new concept will allow for a smoother shopping experience.

During this stage, I identified user pain points and considered the features or details that the customer would need to see in the cart design. I also had to be mindful that the interface was not too crowded and was suitable for both desktop and mobile viewpoints.

Ideation

Mid-Fidelity Wireframing

After compiling the components from the inspiration sites, I made a mid-fidelity wireframe using existing components from the brand's style guide.

The wireframes allowed me to visualize the shopping cart experience and the elements that would appear above the fold. I had to consider the elements that were sticky and ensure that the scrollable area didn't appear crowded on mobile. In addition, I also had to be mindful of the mobile browser's UI and the amount of real estate I had to work with.

Creating Flexible Components

I created components with variants as the shopping cart included elements that would change depending on the customer's cart total and configurations.

Since Jet Set Candy's products were customizable with different engraving and metal options, I needed to consider how product items would expand and change based on user interaction. These considerations also applied to the free shipping progress bar and free gift selection.

Final Product

Bringing the Menu to Life

The end-product of this project was an interactive prototype that reflected different types of checkout configurations. I created a mobile and desktop prototype that was eventually shipped on Jet Set Candy's website.

This project was my first experience creating a feature on an e-commerce website from sketch to hi-fi. The multiple revisions made me recognize the importance of creating components, especially because the products had so many different configurations. I had to ensure that I was providing the developers with all the possible layouts of an item.

It was really cool being able to work on this project because I have plenty of experience from the user end but never realized how meticulous shopping cart designs can be. Every detail needed to be considered as every customer's cart will look different. The thought of customers interacting with a feature that I designed with their needs and pain points in mind made me feel excited to work on future customer-facing products.