Improving on existing software

Web Care Center

The Web Care Center (WCC), an internal application used by the Williams Sonoma brands Care Center to process customer orders, returns and replacements.

  • WCC is used to handle calls from customers to process returns of one or multiple items.
  • Can be a combination of a return with a replacement or an additional order.
  • System is built to handle returns and item search functionality to build orders.
  • Typically used while associate is on the phone with a customer, lot of multitasking.
 
Care Center Usability Study
Goals
  • To gain a better understanding of how WCC is being used by care center agents.
  • Identify key pain points and potential design concerns to be addressed in order to improve efficiency and productivity of care center agents’ order management workflow.
  • To gain a better understanding from leadership on the key Care Center metrics (e.g. handle time) and establish a baseline for WCC performance.
Methodology
  • Qualitative study with a small population (~50 agents).
  • Focus on the largest population (service agents) and highest order value (business sales).
  • Observational studies for usability sessions, small groups, 1-on-1 interviews.
Findings
  • Experience with WCC was low for agents, supervisors and leads.
  • Lack of data visibility and consistency across systems led to frustration.
  • Features to track agent productivity and performance were missing.
  • WCC did provides better experience is some areas, but not many.
 
 
Tabs - Visibility
Project Brief

I created a solution to visually separate order tabs by customer and order type.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
Order Summary Notes - Visibility
Project Brief

I created a solution for displaying notes left by customer care associates that allow for filtering by note type, contact details and related order notes to improve notes visibility and access.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
Agent / Action Search
Project Brief

I created wireframes for Agent / Action Search selection screen showing the layout and various selection criteria.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
Manage Adjustments
Project Brief

I created wireframes for order charges summary. Designs show the Line Total (individual item) and Order Total along with funtionality to adjust charges such as gift wrap, shipping charges and value-added services.

Each change made by an associate prompts a modal popup allowing for entering in a reason to allow for adjustment.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
Create Order
Project Brief

Customer care associates needed the ability to view monogram and personalization options that the customer elected for during checkout.

The challenge here was to display information that would mirror the options and display from the eCommerce site and paper catalog. The information displayed would help the customer and care center associate would be in sync while speaking on the phone.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 

Transitioning to new software

Care Center User Interface

Care Center UI (CCUI) is a custom internal application, used by the Care Center associates to process customer order and shipment tracking, displaying order status, create appointments for customer final mile interactions - delivery, returns, etc.

  • CCUI was originally a niche application designed to track shipments more accurately.
  • Speaking with associates at the Care Center, we found that associates preferred using CCUI over WCC.
  • We found that CCUI could by support most features from WCC, and reduced the need to multitask with other application, therefore speeding up the workflow.
  • Based on our conclusions from the study, it was decided to sunset WCC and transition WCC-specific features into CCUI.
 
Returns Work Order Pickup
03_Return Order Details.png
Project Brief

My first project working with the Care Center UI was to create a workflow for care center associates receiving calls from customers needing to return products that are too large to ship out of their post office.

The first step was to talk with engineering to learn how the process worked from the backend. In this complicated case, whiteboarding out the flow was a way I learned what the requirements were and where it could be improved.

Solution 1

I came up with a solution that aligned with the existing style. A multistep progress form.

Solution 2

I felt the multiple steps were unnessesary in this case, and that existing pattern could be slightly improved.

The proposed change would elimitate the the need for a multistep process and reduce the number of clicks needed to complete the form for the filling out the work order.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Advised engineering on interactions and styling.

 
 
Activity Date History
Project Brief

Create wireframes for a date history tab in CCUI showing information containing the Original Estimated Customer Delivery Date and Current Estimated Delivery Date. Along with a table with the Last Communicated Date History with date communicated to customer and date on which email was sent to customer with this information.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
Ship Dates
Project Brief

I created a visulization of shipments and tracking for 1 or multiple shipments.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling.

 
 
CCUI Search
Project Brief

Customer care associates, needed a way to search for and view existing orders based on various criteria so I can quickly service the right order.

  • Users have the option to search for order using criteria such as: Sales Order Number, Return Order Number, Customer Last Name & Zip Code, etc.
  • Searching returns relevant results and order attributes including Customer First Name, Last Name, Order Date, and Order Total.
  • The results list sort can be changed.
  • Search results include pagination if it contains more than a defined number of results. An indicator shows the total number of records.
  • Users may select any order to view additional detail.
Version 1
Version 2 with accordian
My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling. Style guide documentation.

 
 
CCUI Self Scheduling
Project Brief

Customer Service Agent's needed the ability to schedule delivery appointments for customers, and answer questions relating to the delivery in CCUI to matching those in the Self Service Delvery Scheduler for customers.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards. Conducted user research. Advised engineering on interactions and styling. Style guide documentation.

 

Buy Online, Pickup In Store

Buy Online, Pickup In Store (BOPIS) is actually a section of CCUI, used by the Care Center and store associates to process customer orders purchased online, but picked up by the customer in store.

The focus here, was to keep similar patterns as the rest of CCUI.

 
BOPIS
Project Brief

Business wanted a solution for care center associates, as well as store associates to be able to view and process orders that customers bought online to be able pick up in store.

This project included creating wireframes and mockups of a portal for associates to:

  • Search and view orders.
  • create a printed ticket by opening the order.
  • process the order by taking products out of inventory (items may or may not be in stock).
  • closing the ticket which triggers an email to the customer that the order is ready for pickup.
My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards.

 
 

Delivery Scheduling Tool

MacBook and iPhone.png
Project Brief

Create an online scheduling experience for the customer, that would allow the customer to choose a date and time that works with their schedule.

Use Case / Problem

Williams Sonoma's eCommerce Team wanted to improve the furniture delivery process in terms of speed and customer experience. The current process involved sending customers an email to confirm that their furniture order was ready to schedule. The email would instruct the customer to call the Care Center and make an appointment directly with a Care Center associate.

The current approach entailed a need for the customer to take time out of their day to call the Care Center, as well as the need to have a Care Center associate to take calls to manually schedule delivery appointments. Both tasks could be done online, reducing the Care Center call volume and empowering the user to schedule their own date and time.

Testimonials
What a wonderful design here - SO simple to use, thank you!!
Pottery Barn Customer
Very thorough and well-thought-out page for planning delivery
Williams Sonoma Customer
Approach

The task required 3 steps after the furniture purchase, email redesign communicating that the order was ready to schedule, a new online scheduling tool, and 2 emails confirming the appoinment date and time.

Alternatives considered

I considered having a the date widget house larger dates for increased clickability. But through testing, we found the dates made the page unnecessarily long and increased the need to scroll.

My role and work performed

Lead Supply Chain designer. Created wireframes, mockups and storyboards.

Tools used
  • Sketch - storyboards and mockups
  • Adobe Illustrator - vector graphics
  • Adobe Photoshop - bitmap graphics
  • Outlining apps - information architecture, structure of user-flows
  • Prototyping (web)-apps - simulate user-flows, find potential issues.
  • User research - OpinionLab for user customer comments and AirTable for organizing commments..

Tools used

I used a variety of tools from OmniGraffle for the storyboards and mockups, OmniOutliner for the information architecture and structure of user-flows and prototyping applications to simulate and find navigation issues. I employed Adobe Illustrator and Photoshop for the more advanced graphics editing.

Concurrent projects

WCC, CCUI, DropShip

 

Adding functionality to promotion authoring

 

Promotion Authoring

Project Brief

Williams Sonoma associates in charge of creating promotions for the site wanted to have the ability to:

  • Have a limited quantity of the products purchased to apply for a specific promotion (limited 5 per customer)
  • Create promotions with multiple merchandise discounts (more than one discount at a time).
  • Create tiered promotions (buy more, save more).

The mockups show an example of how one creates a tiered promotion with limited quantities.

My role and work performed

Lead UX designer. Created wireframes, mockups and storyboards.

 

Improving checkout based on user feedback

 

Checkout Experience

Project Brief

Improve the current checkout flow, knowing that:

  • 80% of errors on billing occur from the email address field
  • 40% of errors on shipping occur due to the Address Verification System
  • 25% of errors on shipping occur from the phone entry field
Customer Needs
  • What does it cost?
  • Why does the product say its available when it is not?
  • How long will this take?
  • Is this going to be easy?
Pain Points

Lack of Transparancy

  • Order Summary not dynamically updated as options are selected.
  • Product availability discovered after the shipping address is captured.
  • Shipping Cutoff Dates not dynamic to the time zone of purchase.
  • Promo Code Entry
    • Late in checkout process.
    • Exclusions / inclusions not clearly communicated.
    • Not able to apply on product page.
  • Shipping Preferences at per item level not available; ability to delay shipping.
  • Buy Online - Pickup in Store
    • Can be overlooked in checkout - not presented as a shipping option.
    • Benefits hidden – free gift wrap / shipping savings.

  • Billing not clear that international addresses are not accepted.

Convenience & Ease

  • Checkout Error States – Processing order, checkout down, etc.
  • Form Field Error States – Form fields are validating too early.
  • Ease of Navigation between pages (progress being forgotten).
  • ZIP Code Input does not populate city and state.
  • Credit Card Entry does not auto-detect card type, does not group digits (e.g. “1234 1234 1234 1234”).
  • Address Management (e.g. guest account unable to delete addresses).
  • No Field Entry Masks to clarify form field restrictions.
Research Artifacts
Desktop and Mobile Mockups
Conceptual Checkout Experience Wireframes

I created a conceptual checkout flow specifically for customers who have an existing account and who are logged in at the time of checkout to speed through the checkout experience.

The checkout funnel allowed the customer to start the checkout process right from the product page. Giving them a quick view of the order subtotal, visible while shopping. The checkout flow would also allow the customer to continue shopping while checking out, eliminating the need to exit checkout to add more items to their cart.

My role and work performed

Co-UX designer. Created wireframes, mockups and storyboards. Conducted user research.