UX/UI Design

User Experience and Interface Design projects for Shane Co.

2019
Product Detail Page and
Design-Your-Own-Ring Flow

The Challenge:

Elevate the digital shopping experience by improving the layout and shoppability of the Product Detail pages. Reduce cognitive load throughout. Promote current shopping options and incorporate new ones.

My Role:

Coordinate with the eComm Managers, Development team and VP of Digital Marketing to provide ideas for areas of improvement and feedback. Create high-fidelity mockups based on the team’s proposed changes. Provide mockups and specs to the development team.

before

Problems & Objectives

How to Shop

  • When shopping for engagement rings, the user needs to select both a setting and a gemstone to place in the setting. This allows customers more flexibility in the design and price of their ring. This is not clear to some users and is not an intuitive way to shop for jewelry online.
  • The Goal: Make this process more obvious and intuitive.
  • Solutions:
    • Create a third step for the upgrades and add-ons (engraving, matching wedding bands, halo heads).
    • Add a steps/progress bar to the top to emphasize the “easy as 1, 2, 3” concept and to give direction/point-of-reference through the process.

Clear & Cohesive Shopping Options

  • The Gemstone Previewer, Also Available In (alternative metal types), and Add a Wedding Band sections are lower on the page, disconnected from the product and other shopping options.
  • The Goal: Move them above the fold, closer to the product image and other options.
  • Solutions:
    • Redesign the Also Available In section and move it up to the right column.
    • Redesign the Gemstone Previewer section to be more compact, and move it directly underneath the product image (designed by another team member).
    • Redesign the Matching Wedding Bands section and move it to the new step 3 page, along with the Halo Head and Engraving options.

Other Improvements

  • Clean up the right column: Present the Ring Size Selector as a dialog box upon clicking “add to cart”. Center content and stack each function/item on its own line. Also, change the button UI to be more inline with other styling on the site, and add it to the style guide.
  • Redesign the Questions and Reviews sections and move them closer to the top.

Result:

Step 1
Choose Your Setting
Design-Your-Own-Ring flow


mobile layout


Step 2
Choose Your Stone

Objective

  • Improve upon the Diamond Recommendation Tool, which helps the user to pick a diamond from an expansive selection. Make the tool more visual appealing, intuitive and informative.

Solutions

  • Add a steps indicator so the user knows how long the process is (only three steps) and where they are in that process.
  • Display the search parameters at the top with links to go back and edit selections. Also include a ‘back’ link to edit previous steps.
  • Redesign the 4 Cs preferences with interactive cards to drag into order, and a visual diagram to emphasize hierarchy.
  • Add tool tip dialogs for terminology definitions.
  • Redesign the final results screen to display three categories of results. Include a compare option, a start-over option, and a collapsed state for the “More Like This” option (to better view the sorted catalog below).
  • Add copy throughout for voice and clarity.

View all steps:
Desktop  |  Mobile

Step 3
Personalize
Add-ons and upselling options:
Wedding Bands, Halo Heads and Engraving
Engraving option shown


Family Collection and Design-Your-Own-Necklace
with drop-down selectors for customizable gemstones
Replaced dated interface and brought the layout/design inline with the other product detail pages


Reviews and Questions
Redesigned and moved closer to the product image

2016
Budget Estimator
widget for the Engagement Ring and Wedding Band landing pages

2015
POS UI update
icons, button states, brand colors

2014
Global Navigation updates

Task:

Based on I.A. and direction from by the eComm manager, provide wireframes and mockups to visualize, iterate, and get final approval. Code up the final designs. Each tab had its own unique layout — the “Diamonds & Gems” tab is shown here (wireframe – mockup – production).

2014
Mobile update

Task:

Redesign the mobile website (at the time a separate website) to match the recent desktop update. Fit the most relevant links and content above the fold. Update overall UI.

Provide wireframes and mockups to share my ideas, iterate, and get final approval. Also provide some of the graphic design and UI pieces and assist in coding of the final designs.

2014-2015
Mobile Catalog updates

Task:

For the 2014 update (center), redesign the mobile website product catalog (at the time a separate website) to match the recent desktop update. Improve overall layout and UI.

For the 2015 update (right), improve catalog results AND design collapsible filter and sort options.

Provide mockups to visualize my ideas, iterate and provide to back-end developer. Assist in front end development.


View more examples of web design >