I had an initial conversation with the ecomm business team to discuss development timeline, requirements, and goals. After receiving the brief, I started working on the mobile monogramming experience. A lightbox experience would have been clunky on mobile and unnecessary. I recommended that the process should be streamlined and integrated within the PDP page as an option before adding to cart.
I created a mockup, starting with the assets that were currently in use. I began re-evaluating the previous design choices for indicating selections and errors. I decided to use radio buttons to indicate icon and font selections instead of a box outline (as previously used). For the color selection, I decided that a checkmark over the color choice would be the most visible way to indicate to the user that a choice was made. For the Text input field, I added styling for errors and confirmation that the correct type and number of characters was entered. My original design included a PDP that would update dynamically to show changes to the monogram. Upon hearing from the business team that that was not within scope, I decided to keep the original design that allowed for a preview of just the monogram. The next step was to work on the desktop version which I thought would work better as an accordion style menu. This would allow for the same amount of steps and options and keep the user from having to scroll too far down the page. On desktop, the preview is displayed and updated under the PDP.
Pitching the design:
Once the high-fidelity mockups were done I put together prototypes for mobile and desktop. Since the design would need to be shown to a 3rd party development team, the in-house Creative Director, and the ecomm business team, I wanted to make sure my thoughts for how the design would be implemented were as clear as possible. I wanted to demonstrate my vision for how the experience would work. The prototype would also help inform the developers estimate on development timeline and whether it could be implemented or not. I used After Effects to animate the behavior on mobile, and created a short gif in Photoshop for the desktop version to help communicate the behavior to the development team.
Approvals and Feedback:
After showing the comps and prototypes to the Creative Director, and ecomm team, they approved of the direction and passed the designs to the development team for feedback.