Laddawn.com : Share Items and Carts - COMPLETE

 

Please note

On 5/30/13 we decided to present share interface in large shadow boxes. The shadow box design is shown below for Saved Items. We decided not to replace the other images which still show the share item/cart features within the tab container. If anything about the UI is unclear as a result, please see Steve.

 

 

Overview

"Share" functionality enables distributors to share individual items or whole carts with their customers ("end users" external to Laddawn.com) or with colleagues (at their own distributorship or at Laddawn). It will also enable Laddawn staff to share carts and items with distributors and Laddawn colleagues.  Sharing is not a tab unto itself, but is functionality that can be accessed from the shop or cart tabs, via this link:

 

 

Whether items or whole carts are being shared, the design/UI objective is for sharing to feel quick and easy to the user, something that can be done in a click or two, while at the same time giving the user extensive control over the content being shared via optional messaging and pricing tools.  For this reason, black and white indicates the content that is to be included in the message, thus eliminating the need for a preview step; color has been reserved solely for interactive features or temporary states.

The act of sharing will generate an email to the sender and recipients, as well as a post to the narrative thread that can be read and replied to by any recipient with a Laddawn.com login. In user preferences, users will be able to opt out of receiving email copies of what they share.

Sharing carts

Reaching the share interface

The user is within an active Cart and clicks one of two links for sharing the whole cart:

At the top of the Cart
At the bottom of the Cart

Sharing an unnamed cart

A cart has to be named/saved before it can be shared. If the user attempts to share an un-named cart, upon clicking the share link we will present them with a simple shadow box  – "To share this cart, please name it first"; text entry field, and "Save Cart" button. Let us know if you need a mockup or wireframe. Once they enter a name and click save, the share cart interface (a large shadow box) will open with the cart name in the subject line (the user can overwrite this subject).

The share cart interface (note: the shart cart interface will be displayed in a shadowbox based on the design below)

The initial default interface is for sharing internally (defined as other contacts from the distributorship, or with Laddawn staff). Items in this view will always include price breaks (in the case of MOD, if the user created his own breaks, those are the ones that will show; otherwise, standard breaks will show). 

External sharing (sharing with the distributor's end user) is initiated by selecting the "Yes" radio button for "Sharing this cart with a customer?"  The Laddawn logo is replaced with the user's brandit logo, if there is one, or left blank, if there isn't one. The user is presented with an open pricing markup drawer for the first item. (See External sharing flow below.)  

 

Internal 1 - Send disabledInternal 2 - Send button becomes enabled once an email
address has been entered.
  
  

External 1 -

User Story
The user has answered "Yes" to "Sharing with a customer?"; the brandit logo appears, and the "Price Markup" drawer drawer expands open for first item.

Users have to either leave all items without pricing, or price (mark up) all items before they can share a cart; they cannot share carts with some items priced, and some not priced.

Functional Notes

  1. Once expanded the drawer's arrow reverses direction.
  2. The "Send" button at the bottom remains active until data is placed into the first drawer and the "Set Price" button is clicked. The Send button then becomes inactive if there are other items in the cart to be priced. Once one item has been priced, "Product total: Please price remaining items" appears. (After all items have been priced, this changes to "Product total: $XXX.XX.) 
  3. The "Unit Price" and "Total Price" labels are inactive until "set price" button is clicked for at least one item.
  4. Typing a value in one field, causes the other fields to autocalculate. For example, if I enter a sell price first, the gross margin and markup fields autocalculate. If I type over the autocalculated gross margin with a new value, the sell price and markup re-autocalculate. And so on.


External 2

User Story
The user has completed 1 row and moves on to a 2nd row
for price markups.


Functional Notes 
  1. Once a row is completed, all remaining items need to be completed (priced) before the "Send" button becomes active. In this scenario, once all 4 items have been marked up the "Send" button becomes active.
  2. The user can mark rows up in any order.  

External 3

User Story
The user selects price breaks checkbox within a pricing drawer, and 3 rows of entry fields expand vertically. 

Functional Notes
1. The user clicks "Show Price Breaks" check mark and 3 price break entry fields open. "Show Price Breaks" checkmark and "Set Price" button fall to the bottom of the box.

2. Price break quantities will not be editable once a user enters the Share Cart flow. If the user set his/her own price breaks in a prior screen, those are the breaks that show here; otherwise, standard price breaks are the ones that display.

3. Even if the first row is populated, markup, gross margin and sell price fields empty. Once a field has been filled in, the user may overwrite any of the values - the other cells will recalculate.
 

External 4

User Story
The user has completed all 4 of the price markups for this cart. The user has completed price breaks for 2 of the 4 items in the cart.

The Send button is now activated, and the product total displays the sum of the marked-up prices.

Margin v. markup

Retailers can measure their profit by using two basic methods, markup and margin, both of which give a description of the gross profit. The markup expresses profit as a percentage of the retailer's cost for the product. The margin expresses profit as a percentage of the retailer's sales price for the product. These two methods give different percentages as results, but both percentages are valid descriptions of the retailer's profit.

 

Source: http://en.wikipedia.org/wiki/Gross_margin

 

For our purposes…

  • Margin equals sell price minus Laddawn price divided by sell price. ($12 - $10 / $12 = 16.67% margin)
  • Markup equals sell price minus Laddawn price divided by Laddawn price. ($12 - $10 / $10 = 20% markup)

 

Programming  notes: If any of the To or CC recipients are not registered Laddawn.com users, and "No" is still the answer to "sharing with a customer," users will get a warning like "XYZ@email.net is not a Laddawn user. This message includes pricing. Are you sure you want to proceed?"

Customer Experience

As a matter of policy, we do not want CE to share carts or items with any distributors' "end users," with or without markup.  Only distributors can share with end users. CE staff will not be able to type an email address in this field; they will only be able to select from a pick list of contacts.

Sharing items

Reaching the interface

Item sharing can be initiated from either the shop widget results or an item row in the active cart. (Sharing a saved item occurs after restoring the saved item to the widget/search results.)

 
 

  1. Clicking "Share" will open a large shadow box with the color scheme of the tab you are originating from (shop tab - purple; cart, blue).
  2. When sharing a MOD item from search results, that has not yet been saved or added to a cart, clicking "Share" will create a unique Laddawn MOD item number and a 14-day price quote (and pricing structure for all quantities).
  3. If the MOD or stock item has not yet been saved to saved items list, item will save upon clicking share; user will be presented with save item shadow box. (See Saved items - COMPLETE .)

Share item flow and interface

Where applicable, share item interface and functionality piggybacks on share cart above. The main differences are:

1- Product detail, description, specifications and images (if any) are included, since the focus is on a single item.

2-Subject line is product dimensions, category, and for MOD's, pricing expiration date. Subject can be ovewritten.

3-Prompt to save occurs at end of process (when Send is clicked).

Note:

Save item shadow box is where users can add optional part number. Seems highly probable that distributor would want to include this number somewhere within the Share message, but at this stage in the process it is too late. We debated modifying the share interface to include the ability to add an optional part number (in addition to the save item shadow box, not instead of).  In the end, we decided this creates more problems than it resolves. We've decided to rely upon workarounds for the initial release, and to tackle optional part numbers more holistically as part of phase 2 (for both stock and MOD). The workarounds are:

    • a) the user learning/knowing to save the item before sharing it. The optional part number would automatically carry through to the item description within the body of the share message.
    • b) the user knowing/learning to add the part number to the share message  - either via the subject line, or in a cover note, and then knowing/learning to enter it again (accurately) when save item shadow box opens, in order for it to carry through down the line. We recognize this is not ideal and potentially error-prone.

Final Visual Designs for Share an Item

Who is it from?

When the customer working online on behalf of himself, to the To's and CC's it will be an email from Bob, with Bob as replyto. Bob gets nuthin unless he shares w/himself. His record  online is sufficeint.

When Bob faxes in a RFQ, and CE shares it with Bob, the From is CE@laddawn  , the To is Bob (automatic default) - and at Bob's request, CE can add other To's, CC's from pick list of sales org contacts.

UNFINISHED - WHAT GOES TO SALES REPS Either auto cc all shared items and shared carts (and SAVED ITems)  or not.  OWEN

        

 

Attachments:

mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
ShareCart_Initial.png (image/png)
ShareCart_single.png (image/png)
ShareCart_PriceBreaks.png (image/png)
ShareCart_PBCart.png (image/png)
image2013-6-3 16:15:14.png (image/png)
image2013-6-3 16:16:20.png (image/png)
image2013-6-3 16:16:41.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
mockup_Share Item Flow.bmml (text/xml)
mockup_Share Item Flow.png (image/png)
ShareCart_Internal_1.png (image/png)
ShareCart_Internal_2.png (image/png)
ShareCart_External_1.png (image/png)
ShareCart_External_1.png (image/png)
ShareCart_External_2.png (image/png)
ShareCart_External_3.png (image/png)
ShareCart_External_2.png (image/png)
ShareCart_External_3.png (image/png)
Laddawn_ShareCart_TestingUnoDosTres.jpg (image/jpeg)
ShareCart_External_2.png (image/png)
ShareCart_External_3.png (image/png)
ShareCart_External_3.png (image/png)
ShareCart_External_4.png (image/png)
ShareCart_External_1.png (image/png)
ShareCart_External_2.png (image/png)
ShareCart_External_3.png (image/png)
ShareCart_External_4.png (image/png)
Shop_ShareItem_DevVersion.png (image/png)
Shop_ShareItem.png (image/png)
ShareCart_Internal_1[1].png (image/png)