Product Page
Overview
The product page is a dynamic section that undergoes constant updates with the addition of new items on the website. To ensure a satisfying user experience, each product requires specific options and modifications. Safyre Labs assigned me the task of incorporating a stone modal within the wizard, which provides additional information about their birthstones, encouraging users to purchase more products with stones.
In addition to that project, there was another exciting endeavor: designing an entirely new wizard for the new travel cases recently added to Jewlr's collection. To accomplish this, I thouroughly studied and comprehended the unique attributes of each product, enabling me to integrate those details into the wizard's interface.
Role
UX/UI Designer
Research, Product Strategy, Visual Design, Wireframing, Prototyping & Testing
Team
UX Designers, Developers, Product Manager, Project Manager & Stakeholders
Date
Dec 2022 - Feb 2023 (the two projects)
Gemstone Wizard
The challenge here was to upgrade the stone wizard for our products, which offers users the option to choose from a variety of genuine gemstones. The goal was to motivate users to explore different genuine stones, learn about their meanings and origins, and ultimately make informed decisions when making a purchase.
'About Stone' Modal
When users choose a particular genuine stone, they can click on the About Stone link, triggering a modal that provides detailed information about the selected stone's attributes and its association with a specific birth month. Birthstones are gemstones traditionally linked to each of the twelve months, often representing qualities we aspire to embody. Additionally, users have the option to explore more genuine stones in an image carousel.
Mobile Approach
The design was fully responsive and optimized for mobile devices. In this version, however, when a user selects a stone, a pop up modal appears partially covering the screen, and providing a preview on the stone. The user has the choice to either close the modal or click on the "Explore More" call-to-action (CTA) button. By clicking on the CTA, the modal expands into a full screen mode, displaying comprehensive details about the selected genuine stone. This allows users to dig deeper into the stone's information, explore their options and make a more informed decision.
Travel Case Wizard
Jewlr added jewelry travel cases to their product lineup, featuring various unique characteristics and extensive customization options. These features were distinct from our existing wizards used for other products, necessitating the creation of a new wizard specifically tailored for the travel cases. My responsibility was to design a user-friendly wizard that incorporated all the available options while keeping things simple and easy. The cases offer a range of color choices, customizable text options for the top, and the ability to print user-selected and uploaded photos. Additionally, each of these options can be further personalized to meet user preferences.
In this scenario, which is the Customizable Text feature, all the wizard tabs are open, displaying the selected options. Here, the user has the ability to select the case color, top design, top design style, input text, and the text color. The exciting aspect is that as the user makes their selections, they can witness the product image dynamically changing to reflect each choice.
Iconography & Components
Outcome
I conducted extensive testing on the new wizard features to ensure seamless functionality and a satisfying user experience. However, it's important to note that these projects are ongoing, with plans to incorporate additional features and implement further changes in the future. Throughout this process, I gained valuable insights into how each product influences the user experience and understood the unique attributes that users require to make informed purchase decisions.