James Avery is a national jewelry brand focused on creating heirloom quality artisan jewelry. Their brand features a large multi-generational following familiar with purchasing in-store.

In oder to stay competitive, the brand decided to invest in digital innovation.

This six month project addressed the following: moving from a legacy platform to Salesforce, revamping taxonomy, updating in-store kiosks, a complete redesign, and overhauling the custom jewelry builder tool.

Hands with Jewelry Holding James Avery Jewelry Box - Photo Credit James Avery

Key Roles

As the UX functional lead, my role covered a variety of cross-department responsibilities including:

  • UX Team Management
  • Research & UX Strategy
  • UI & Design System Creation
  • Owning "Create Your Own" Tool Update
  • Code Development, QA, and UAT
  • ADA Compliance
  • Serving as the Salesforce SME
  • Content Strategy
  • Establish Training & Documentation Program

Research

The project kicked off with an in-depth discovery process geared towards uncovering user requirements and defining MVP work. Discovery took place over four weeks with IT, UX, and Site Merchandising.

Congruently, I began the research phase auditing existing digital experiences in-store, via email, and on site. The second half focused on competitor analysis and best practices.

Creating documentation was a pivotal part of the research process. The granular reports showed data in a variety of ways ensuring all stakeholders found the information useful.

The visuals captured in the Competitor Analysis served as a valuable reference doc when developing UI with the Product teams.

Top Research Findings

  • Site Was Not Competitive From an Ecommerce Perspective
  • Code Was Outdated Effecting Performance, SEO, & ADA
  • No Defined Design Standards Existed

Explore Reports

*Note - You Will Need to Sign Up for a Free Coda Account to View Full Reports

James Avery Homepage - Before

Screenshot of JA Homepage Prior to Replatform

UX Strategy

As the UX Strategist my tasks included serving a Core Team Member responsible for major project decisions, external resource management, and reporting progress to Executive Leadership.

Along with the steering committee duties, I also:

  • Held Executive Level Workshops to Propose Strategy and Gain Buy In
  • Documented Scope of Work Including Needed Deliverables and Business Rules in Confluence
  • Defined UX Team Member Roles and Workload
  • Coordinated Design Sprint Timeline IT

Design

The end-to-end design process took three months and fed directly in to the dev sprints. My responsibility was to manage the complete process.

Design System Development

James Avery had an existing brand guide focused on print and brand voice. The digital experience was not defined or documented. After several cross-department workshops with Branding, Creative, the CPO, and Site Merchandising I was able to translate the static elements into digital design system.

This Included:

  • Research around common font and element sizes, use of color, spacing, layouts, micro-interactions, UX copy, and ADA compliance.
  • Creating an XD Component Library and Working File
  • Building an Adobe Icon Library
  • Coding a Living CSS Styleguide for Dev
  • Writing Documentation
  • See Styleguide

High-Fidelity Deliverables

As functional lead it was my responsibility to design the wireframes for all templates, layouts, components, and modules on the new site.

It was vital to hold several stakeholder demos for each area of the site to guarantee all business use cases were accounted for.

Wireframes Included:

  • Navigation, Header, Footer
  • Homepage Layout and Module Template Library
  • Product List Page, Search List Page, Search
  • Product Detail Page
  • Cart, Checkout, My Account
  • Customer Service, Buy Guides
  • Static Landing Pages

UX Resource Management

Once I had established the design perspective with the styleguide and main wireframes, the UX team took over the remaining work needed to create granular use case mocks and dev notes for IT.

During this period, I pivoted to managing the team workload, hosting design reviews, synthesizing stakeholder feedback, and overseeing IT as they began to implement the designs.

"Create Your Own" Tool

In tandem to managing the UX team during the second half of the design phase I led the complete transformation of the "Create Your Own" tool. The existing tool allowed users to personalize bracelets and charms.

Although the visual layout was impacted by the redesign, the success of this project really relied on developing quality architecture and well defined user flows.

This was my favorite project to date because it was a combination of all my skills including UX, Development, Information Architecture, and Design

See Complete Case Study

Before & After

https://www.jamesavery.com/

Development

As the dev sprints began I was able to start focusing on all things code.

A largest portion of time during development was spent QAing the code and providing pixel by pixel feedback.

Work Included:

  • Defining Code Semantics For Optimized ADA and SEO
  • Providing Training to Dev Team on Code Requirements
  • Documenting All UX Feedback for IT
  • Managing Bugs/Ticket Prioritization and Backlog
  • Coordinating the Execution of Additional Wireframes
  • Working With Dev to Define Business Rules and Functionality Requirements
  • Building Page Builder Templates

Content Migration

One of the last steps was moving all products and content over to the new site.

To allow the web designer more autonomy while creating new modules, I decided on implementing Bootstrap during the migration. This required me to recode all static landing pages prior to moving to SFCC.

The Process to Migrate Included:

  • Creating a Template Library with New Modules
  • Recoding All Static Landing Pages
  • Partnering with SEO and Site Merchandising on URL Migration Strategy
  • Moving All Content Images to From Digital Asset Manager SFCC
  • Collaborating with Marketing and Brand on New Content As Pages Were Consolidated
  • QAing All New Code

Hands with Jewelry Holding James Avery Jewelry Box - Photo Credit James Avery

Final Thoughts

The new James Avery website successfully launched in time for the holiday rush. From redesign to new functionality I am truly excited to see the user response.

Personally I enjoyed being able to interact and collaborate with every aspect of the business. It is very rewarding to see the team's hard work come to life.

Let's Connect

I'd love a chance to collaborate or have a friendly chat.

m.anndailey@gmail.com