Re-design a monogramming service 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 reevaluating the previous design choices for indicating selections, and errors.
I decided to use radio buttons for the 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 comps 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.
Nautica E-commerce Re-design
Contribution —
Visual Design, UX, UI, IA
Client — Nautica
Software — Photoshop, InVision
Date — Spring 2017
Initial steps —
A request from the business team was made to update the
design of Nautica.com to be full width. Realizing there were
also other issues that needed to be addressed, including
layout of the top nav, footer, and list pages. I decided to
broaden the scope of the project, knowing that the marketing
team would be on board. The goal was to improve the look
of the site and improve usability.
Design —
I created desktop wireframes based on current and
past editorial stories. Taking into consideration the
minimum/ maximun number of editorial stories
that are planned by the business and marketing teams, I
designed templates for the department pages that could
be adjusted based on the amount of content
available for each site refresh. I also designed an update for the
top nav mega menu which would mak it easier for the user to explore
more categories by taking fewer steps. For example, double exposing
the accessories categories for men and women, under the men's and women's categories respectively,
made it easier for customers to find accessories products.
Mobile top navigation and footer —
I updated the search bar to be easily accessible and confined the menu to one
screen with dropdown categories instead of a sliding/drawer menu. The old footer had a background image that was
outdated and made the links difficult to read. I replaced the background image with a solid color.
Approval and Feedback —
The Creative Director and marketing team approved of the direction. I then
presented the desktop re-design to the ecomm business team implementation, possible challenges, and timelines.
Trigger Email Templates
Contribution — UI, UX, ecommerce
Client — Nautica
Date — November 2016
Brief:
Improve Nautica's email program by adding trigger emails,
making emails more personalized
Work with 3rd party agency to create templates cart abandonment, search abandonment, and product abandonment
Create wireframes for the 3 types of trigger emails, and provide specs to the agency for development
Re-designed email footer for mobile email templates.
Contribution —
Graphic Design, Identity Design
Identity re-design for Musical Artist Paul Couture. Goal was to
create a more sophisticated brand image for the producer/singer/songwriter.
New Logo used on "The Art of Being Single E.P" stickers, hats, and t-shirts.
Client — Phase One Network
Software — Illustrator, Traditional Drawing, Wacom tablet
