Safyre Labs wanted to add new product features to their existing locket collection to allow more personalization options and to increase locket sales. Previously, the company exclusively offered clear lockets and featured a static image on the product page demonstrating the possibility of having photos inside the locket. However, the customers encountered difficulties in printing, cutting and inserting the photos themselves, as it wasn't a user-friendly task. After receiving numerous customer feedback, the company decided to add two new product features which were the paper photos and the metal photos. The challenge was to have these features incorporated into the locket's product page and guide users to make an informed decision.

The goal of this feature was to provide customers with a significant time-saving solution to design a unique locket reflecting their style. Whether they prefer the versatility of a paper locket or the timeless elegance of a metal locket, the aim was to offer users ready-to-wear personalized photo lockets that can last a lifetime.

Before starting with the design, it's important to understand the main differences of the new features. With paper lockets, the image is cut, printed and inserted inside the locket. It can always be changed in the future. With metal lockets, the image is engraved onto a sterling silver plate and then inserted inside the locket. Thus, it's for users who seek a timeless and a luxurious touch to their fade-resistant keepsake.

Once the flow was approved, I finalized the high fidelity prototypes and passed it on to the development team for implementation. We thoroughly tested the new wizard, initially releasing it with the option for paper photos, and shortly after, introducing the option for metal photos.

The photo upload modal helps users in selecting and positioning their uploaded image to achieve the desired appearance. Users can utilize the directional arrows to adjust the image's placement. They can also have the option to rotate and zoom in or out. Meanwhile, users can see the end result with a dynamic image that changes with every click. Once done, users can confirm to proceed or replace the image and start again.

In this modal, users have the ability to review guidelines and recommendations prior to sending their final image for printing. These tips provide valuable assistance in image selection, as well as guidance on appropriate cropping, rotation, and filtering techniques.