Description

A redesign of the monogramming feature on Nautica.com for mobile and desktop

Client

Nautica (Spring —2017)

Contribution

  • Visual Design
  • UX
  • UI

    • Software

  • Adobe Photoshop
  • Adobe After Effects



    • Overview/Goals:

  • Redesigning the monogramming service so it would be available in time for Father’s Day 2017.
  • Monogramming should be available on specific products and categories.
  • Monogramming badge needed to indicate which products on list pages were eligible for monogramming.
  • Nautica.com transitioned to a responsive design and the monogramming service needed to be usable on mobile.
  • The ecomm team requested that the steps be re-arranged for a more logical progression.
  • There were also requests to update the choice of icons that could be selected and for more thread color choices.

    • Background:

  • Nautica.com was not responsive when the monogramming experience was initially created.
  • The old monogramming experience was only accessible on desktop and used a lightbox.
  • The experience was cluttered within the lightbox.
  • The steps for creating a monogram were not clear.
  • Copy explaining the process, shipping and return policy were obscured and seemed like an afterthought.
  • The button to add a monogram did not compete with the "Add to Cart" button but was not styled prominently enough to indicate that monogramming was available.

    • Initial Steps:

    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.

    Design:

    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.