SPP Wireframes and Site Flows by Michael Jenkins

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Directing Sites

SPP

Configurator

SC.01

Staples.com

Directing Site No PR.10 Apply Custom Skin

SP.01

PR.26 Check for Custom Settings

SP.02

PR.11

SPP Landing Page

Cr.01

DC.10

Locate Product

Product Details

Corporate Images

Add to Cart

Custom Pricing

SPP Shopping Cart

Yes

Quantity Selected?

Error message displayed

DC.11

Payment Options Quantity Selected?

Add Decoration

Edit Decoration Select Quantity Update QTY Select Color Remove Item

Add Coupon

Yes

Edit Product

Yes Checkout

CF.00

Configurator DC.20 User Logged in to SPP?

PR.20 Yes

Check for Custom Settings (TBD)

DC.21 User directed from Cart?

PR.21

DC.22 Check for Design Properties

Yes

Apparel Product?

Yes

To PR.22 Sheet A1

DC.13 Decoration required for checkout?

LI.01

DC.12

Logged in to SPP?

Locations Decorated

Yes

Method Selected

PR.12

Colors Selected Cost Breakdown No

Decorations Applied Vendor Restrictions

RG.01

Create Account (Register)

Checkout

Flow does not include: - Image Locker - Saved configurations/products - Re-order functionality

Headwear Product?

Yes

No DC.24 Hard Good Product?

Yes

Sheet: HL_SPP

To PR.23 Sheet HW1

To PR.24 Sheet HG1

To PR.25 Sheet CHG1

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 1 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins To A1.50 Sheet A1

SPP

To A1.70 Sheet A1 CA .01

PR.22

Directs user to existing method details pages as a pop-up

Select decoration method

Check for SKU Attributes

CA .02

$##,###.00 Select a

Product Color Product Cost / Order cost breakdown

decoration method from below:

Qty: (edit) Printing Screen ###,###

Method Preview Apparel

Max Colors: 6 Learn more

Size & Qty Selected Decoration Types

Select Decoration Type

Have a Question?

Method Preview Apparel

Price Details Each Total

Product Color:

Qty: (edit) ###,###

Decoration 1 Decoration Location:

Boundary location appears on mouse-over of targets

Product Preview

Left Chest

IMG 4

Product Color:

Add to Cart

User can Begin decorating by selecting a location to decorate bychange the location to any selecting a view and location from the choices below or on empty option. Locations with the preview to the left. existing decorations are Delete Decoration 1 of 4 grayed out.

IMG 1

IMG 2

Left Bicep

Body Chest

Right Bicep

= Current Preview Shown

Decoration Location: Left Chest

Edit

Decoration Type: Image & Text

Sleeves IMG 3

Options only appear for locations that can be decorated. If only 1 location exists, no buttons appear except for add to cart. If max number of decorations have been applied “edit” buttons are all that shows.

Logo Example

Text Only

Image Only

Logo Example

Next IMG 4

Product Color: Save Project

Email Project

You are allowed to add 4 decorations max.

Zoomed image preview of decoration area.

Center Chest Color selector swatch only appears for hard goods and apparel

Product Color:

Center Back

Right Chest

User IMG can 3 zoom in and out with +/- arrows. Home icon returns user to full zoom out view. Arrows pan view when zoomed or they can grab and drag part of the preview image. Transparent until they are selected by a user

Decorate Your Product

Delete

Back

Front

IMG 2

$##,###.00

Decorate Your Product

Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

IMG 1

Users can select line item categories to view more general information on what they are.

Save Project

Pricing Breakdown Not Available for Amortized Only Customers

Qty: (edit) ###,###

Pricing window is displayed on-top with overlays for user to dynamically see price changes as user chooses different options throughout the decoration process. On a price change a line item will be added/ updated and highlighted.

Product Preview

IMG 4 Cancel

Overlay Screen

Price Details Each Total

Method Preview Hardgood

Rolling-over “learn more” gives user IMG 3 information on the method. Clicking on “Learn More” opens a pop-up.

To Previous

$##,###.00

Based on the product type and the method the user will need to know how many colors they can apply to decorations. (ex. Debossing has no color)

IMG 1

Embroidery IMG 2 Max Colors: 9 Learn more

CA .03

Have a Question?

Price Details the options Each Total

Decoration Methods

Configurator

Select Location

Have a Question?

Decoration Locations

To A6.01 Sheet A6

Product Color: Save Project

Add to Cart

Image & Text

Email Project

Text Only Selecting an image thumbnail updates the main preview and locations presented to the user. All decorations applied are shown on the main preview and thumbnail previews.

A1.01 >1 Decoration Methods Available?

Yes

Upon switching view, system autosaves applied decorations to a temporary location.

Yes

A1.02 >1 Decoration Locations?

Image Only

To A4.40 Sheet A4

To A4.10 Sheet A4

To CA.08 Sheet A3

To A3.01 Sheet A3

View defaults to editable location

To CA.04 Sheet A2

To CA.05 Sheet A6

To CA.061 Sheet A6

To A4.01 Sheet A4 A1. 50

A1. 70

Help Expand

Expanded Pricing Details

Have a Question?

Have Have a a Question? Question? $##,###.00 Chat with a Price Details representative

Search our Help/FAQ

Watch a tutorial video

Each Total

Qty: (edit) Or call us at: 1-800-###-#### ###,###

Price Details Product Prices Each Base Total Qty Size

Options expand down when user Decorate Your Product clicks on “have a question”

Product Preview

5XL 5.00 Subtotal

Decoration 1 Decoration Location:

Decoration Screen Printing (edit)

Right Chest Left Chest

IMG 3

Sleeves

Center Chest

Left Bicep

Body Chest

Right Bicep

= Current Preview Shown Product Color: Save Project Email Project

Add to Cart

Default shows decoration sections expanded.

Center Back

Decoration 1 Setup* IMG 2 Artwork Per Item $1.00 x 32qty Decoration 2 Setup* IMG 3 Artwork (reused) Pantone Match Per Item $1.00 x 32qty Decoration 3 IMG 4 Subtotal

130.00 50.00 48.00 32.00 82.00 50.00 0.00 20.00 32.00 100.00 $262.00

Project Product Subtotal Save $50.00 Decoration Subtotal $262.00

Total

Decorate Your Product

Total 10.00 10.00 20.00 10.00 $50.00

IMG 1

Delete

Back

10 10 10 2

Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

Front

IMG 2

IMG 4

S 1.00 Qty: (edit) L 1.00 ###,### XXL 2.00

Product Color:

IMG 1

$##,###.00

Product Color: Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left. Window opens when user1clicks on one Decoration of the line items. Window provides Location: Decoration information regarding where the selected option price comes from. Back Front

Product Preview Artwork Cost

Right Chest Left Chest

Delete

Center Back

Sleeves

Center Chest

Left Bicep

Body Chest

Right Bicep

= Current Preview Shown

Product Color:

Add to Cart

Email Project

$312.00

* indicates one time fee

Overlay Screen

Sheet: A1

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 2 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins To A1.70 Sheet A1 CA. 04

Configurator

To A6.01 Sheet A6

Image Only Decoration >> Select the image

CA. 043

Have a Question?

Image Only >> File Uploaded >> Print image as-is

Have a Question?

Price Details Each Total

Select an image to apply

Browse

Apply

Product Preview zoomed to decoration location selected by user Image Loading...

Select an image to apply

Select an image from one of the following: Previously uploaded images Images uploaded by your Company Customizable Clipart

Some form of ‘working’ animation as image previews are built. IMG 3user from making other Prevents selections while loading.

Message only shows when applicable; disables as-is option

Image preview is method specific (shows engraving / 2 / etc.) embroideryIMG / deboss

Uploaded Decoration Preview

Select how your image will print: *Your uploaded image has more colors than are allowed for this decoration method (<method name>), you will have to print your image as a single color or upload a different image.

Save Project

IMG 3

Change my image to print with new colors

Print my image without a color fill

3.00" x 2.00"

Controls appear when Image only decoration is selected.

IMG 4

Add to Cart

Cancel

Clear Selections

Email Project

We can match your image to specific pantone colors for a fee. Would you like to input specific PMS codes for your image’s colors? Uploaded Decoration Preview

IMG 2

Print my image with a color fill Changing thumbnails at this stage just changes the preview.

Finished with this decoration

IMG 1

Use my image as it’s shown

Transparent

Product Color:

Select an image to apply Uploaded Image: <Filename> (edit) Image print method: As Shown (edit)

Default = No

No, I'm fine with using regular colors Yes, I'd like to input specific PMS values

Change my image to print as a single color

Image locker appears AFTER user selects on of the two option

IMG 4

Decorate Your Product

Qty: (edit) ###,###

Uploaded Image: <Filename> (edit)

IMG 1

$##,###.00the image to calculate pricing. Price Details Each Total

Decorate Your Product

Qty: (edit) ###,###

Upload an image to apply: Enter file location...

IMG 1

$##,###.00the image to calculate pricing.

Decorate Your Product

Qty: (edit) ###,###

Liquid pixel automatically detects the number of colors in

$##,###.00

IMG 2

A2. 10

Image Only decoration >> Image Uploaded

Product Color:

Save Project

Select Color

Add to Cart

Cancel

Clear Selections

Email Project

IMG 3

Transparent

These options are shown INSTEAD of above options if method is single color only (ex. Engraving)

3.00" x 2.00"

Controls appear when Image only decoration is selected. IMG 4

Finished with this decoration

You can adjust the size, rotation, and/or whether your white image background will be printed or transparent before finishing your decoration.

Image Size:

Product Color:

Save Project

Add to Cart

Resets all choices made

To Previous

Personal or Corporate Locker Selected?

To IL1.05 Sheet IL1

To screen where user selected image type

Email Project

Personal

To IL1.04 Sheet IL1

Corporate

Resets all choices made

Clear Selections

To screen where user selected image type

A2. 11

To A7.10 Sheet A7

3.00" x 2.00"

Background appearance: Print my white image background Do not print my white image background Cancel

To A5.01 Sheet A5

Image Rotation:

Finished with this decoration

Resets all choices made

To CA.07 Sheet A3

Image Only >> File Uploaded >> Print image as-is >> Pantone Lookup

Have a Question?

Liquid pixel automatically detects the number of colors in

$##,###.00the image to calculate pricing. A2. 13

Price Details Each Total

Image Only >> File Uploaded >> Print image as-is

A2. 12

Have a Question?

Liquid pixel automatically detects the number of colors in

Price Details Each Total

Have a Question?

Liquid pixel automatically detects the number of colors in

Select an image to apply Image preview updates as user selects different color/option

Uploaded Image: <Filename> (edit) Image print method: Change to single color (edit) Select an option below to change your image to a single color. You’re image will print as shown in the preview to the left.

IMG 1

Uploaded Decoration Preview

IMG 2

Select a custom color

Price Details Each Total

Qty: (edit) ###,### IMG 1

Match to the Secondary Product color

IMG 3

Filled

Specify a Pantone Color (Fees apply)

PMS Code:

Save Changes

Product Color:

Save Project

IMG 2

Select an image to apply These options would reflect the path the user took to get to this page. (ex. For single-color match: Upload Image: <Filename> Image Print Method: <Change to single color> Pantone Color Match: Yes)

IMG 3

Add to Cart IMG 4 Cancel

Clear Selections

Finished with this decoration

Save Project Email Project

Number of Colors Defined: 4 (edit)

Save Project

Select a color to change from your image preview on the left.

+ 3.00" x 2.00"

Product Color:

PMS Code: ####

Cancel PMS Match

PMS Code: #####

Cancel PMS Match

PMS Code: Enter Code

Add to Cart

Cancel Cancel

When user selects a color from the preview it appears in the white section shown with the appropriate color swatch and a text field to enter a PMS code. User can select as many colors as they wish.

Cancel PMS Match

Save Changes

Email Project

3.00" x 2.00"

Background appearance: Print my white image background Do not print my white image background

Product Color:

You can save this version of your image to reuse on other products if you wish (your original image will not be affected).

Add to Cart

Save option only for images that have been recolored and non-corporate.

Clear Selections

Save Decoration

Clear Selections

Finished with this decoration

Saving the decoration will bring up the save overlay and then automatically “Finish the decoration” directing them to CA.07 (Sheet A3)

To screen where user selected image type

Resets all choices made

Finished with this decoration To A4.20 Sheet A4

Resets all choices made To screen where user selected image type

Sheet: A2

Controls appear when Image only decoration is selected. IMG 4

Pantone Color Match: Yes (edit)

Cancel To screen where user selected image type

Transparent

Image Rotation:

+ 3.00" x 2.00"

Controls appear when Image only decoration is selected.

IMG 3

You can adjust the size, rotation, and/or whether your white image background will be printed or transparent before finishing your decoration.

Uploaded Decoration Preview

Transparent

Email Project

Uploaded Decoration Preview

IMG 2

Uploaded Image: <Filename> (edit) Image print method: As Shown (edit)

Image Size:

Cancel

Pantone Color Match: Yes (edit) To change any color in your image, simply select a color from your image preview and then input the PMS code you would like to define for the selected color. Note: Additional charges apply for Pantone Matching. Show me how this works!

Decorate Your Product

Find

3.00" x 2.00" Controls appear when Image only decoration is selected.

IMG 4

PMS Code field only appears if option selected.

$##,###.00the image to calculate pricing.

Match to the Primary Product color

Image defaults to transparent for single color mask

Uploaded Image: <Filename> (edit) Image print method: As Shown (edit)

IMG 1

Decorate Your Product

Qty: (edit) ###,###

Select an image to apply

Qty: (edit) ###,###

Image Only >> File Uploaded >> Print image as-is >> Pantone Colors Defined >> IMG Adjustments

$##,###.00the image to calculate pricing.

Decorate Your Product

Resets all choices made

To CA.07 Sheet A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 3 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Configurator

To A6.01 Sheet A6 CA .07

User can drag and drop the decoration to any available location where it will auto-center and snap to that location when it enters the location’s boundaries. When dragging a ghost image will appear so user knows where the image is by default.

To A2.01 Sheet A2

To A1.50 Sheet A1

Decoration Placed

CA .08

Have a Question?

Price Details Each Total

Decorate Your Product

Each Total

User has the ability to resize the decoration using the corner handles or rotate the decoration 45 degrees using the side arrows. Image will resize to 70% of boundary if image is rotated outside of boundary space.

Remove

Dimension window appears and updates dynamically as user stretches decoration.

Save message displays if user has manually saved this decoration via A4.21 Sheet A4

No option to input exact dimensions.

IMG 1

Decoration Saved

IMG 2

This area should be highlighted so the user understands that the image being shown is what this information applies to.

Edit Decoration Thumbnail images update to show decoration previews

IMG 3

Transparent

Uploaded Decoration Thumbnail See Full Preview

IMG 1

Remove Uploaded Decoration Preview

Uploaded Decoration Preview

IMG 2

Uploaded Decoration Thumbnail

Product Preview See Full Preview

To A4.10 Sheet A4

2. Apply a Decoration Select a decoration type to apply:

Edit Decoration

IMG 2

Location: Right Chest Color Selection: Edit Decoration

See Full Preview

IMG 1

Logo Example

Product Summary Uploaded Decoration Thumbnail

Edit Decoration Location: Right Sleeve Color Selection: Image Only

Uploaded Decoration Preview

Uploaded Decoration Thumbnail

Product Preview See Full Preview Uploaded Decoration Thumbnail

Location: Right Sleeve Color Selection: Text Only Edit Decoration

Location:Image Center & Back Text Color Selection: Combined Edit Decoration

Text Example Image Text Example

See Full Preview

IMG 3

I approve!

3.00" x 2.00"

IMG 4

Product Color: Save Project

Qty: (edit) ###,###

Location: Right Chest Color Selection:

Text Online Proof Approval Example Please read the following statement and initial the box below to confirm that your product is production ready: Image & Text Image I agree that the spelling, content and layout of my Text product are correct. I Combined understand that I cannot make any changes once my order has been placed Example and that my product will be produced as specified.

Cancel

IMG 4

Preview window opens dynamically if user selects “See Full Preview”

$##,###.00 option from the product summary. They can not edit from this view, Price Details only zoom and preview. Each Total

Text Only

IMG 3

<Product Name/Description> Decoration Location Selected: <Selection> Edit Product Summary

Qty: (edit) ###,###

Product Preview

Have a Question?

Preview window opens dynamically if user selects “See Full Preview” $##,###.00 option from the product summary. They canDetails not edit from this view, Price only zoom and preview.

$##,###.00 Qty: (edit) ###,###

CA .09

Online Proof Approval

Save Project

Add to Cart

Email Project

3. Continue Decorating or Add to Cart

If user is logged-in, upon adding a Decorate Back project to the cart: Decorate Side Overlay Product Screen A) the project is removed from the Color: user’s saved project list Add B) tonon-text Cart decorations are saved to the recent decorations locker

Decorate Back

Proceed to Cart

Cancel

IMG 4 Save Project Email Project

Decorate Side

If user is logged-in, upon adding a project to the cart: Product Overlay Screen A) the project is removed from the Color: user’s saved project list AddB)tonon-text Cart decorations are saved to the recent decorations locker

Proceed to Cart

To A4.40 Sheet A4

To Cart

To CA.02 Sheet A1

A3. 01

To Cart

Decoration Placed >> full view with multiple decorations For non-primary view images which can be seen in the preview a box appears to show a decoration has been placed. On Roll-over it will show a preview of the image. Clicking on the box will change the user to the appropriate view.

Have a Question?

$##,###.00 Price Details Each Total

Decorate Your Product

Product Color:

Half the time toQty: mask (edit) this.

###,###

You are allowed to add 4 decorations max. Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

IMG 1

IMG 2

IMG 3

When a user selects a decoration they can move it to other locations in the given view by dragging and dropping the decoration or by using the radio buttons above. User will not be able to select a location that is already populated with another decoration.

IMG 4

Product Color: Save Project

Image Preview of Decoration

Right Sleeve Image Only

2) Decoration 2 of 4

Delete Edit

Delete

Decoration Location: Left Chest

Edit

Decoration Type: Image Only

Edit

Select a product option below to continue decorating or add to your cart Add a Decoration OR Add to Cart Note: 4 Decorations Max

Add to Cart

Email Project

Sheet: A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 4 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Configurator A4.10

A4.13

Yes

User Logged In?

New Project?

To A1.50 Sheet A1

Yes

A4. 11

Save a new project

A4.14 Does user have a username/pw?

Price Details Each Total

Qty: (edit) ###,###

Save Project for Later

System will append a <date&time> stamp to the end of file names so the user does not overwrite IMG 1 existing files by accident.

A4.16

$##,###.00

Saving your project to “My Projects” allows you to re-visit a project at a future date. To save, enter a project name or use the default name given and select “save project”. Projects are held for upto ## days. Project Name:

Save Project for Later

Save Project Changes (Overwrites previous project save)

Enter your question here...

Project Name: <previously_saved_name.filetype> Save Project

Send

Save a New Project Version (Creates new file based on changes)

IMG 1

Name_Style#.filetype

Project Name:

Product Preview

DECORATION SUMMARY 1)

IMG 2

System will append a <date&time> stamp to the end of file names so the user does not overwrite existing files by accident.

Default_Project_Name.filetype

Project Summary: PRODUCT DETAILS

Product Preview PRODUCT DETAILS

IMG 2

Chat with a representative Enter your question below to begin chatting with an SPP Representative.

Saving your project to “My Projects” allows you to re-visit a project at a future date. You can either save your project changes you’ve made or save a new version of your project in addition to your original project file. Projects are held for upto ## days.

Project Summary:

Registra -tion

Window opens as a pop-up.

SPP Representative >> How can I help today? You said >> Please help me with ABC

Have a Question?

$##,###.00 Qty: (edit) ###,###

A4. 01

Save Existing Project

Have a Question?

User Enters Credentials

Yes

A4. 12

DECORATION SUMMARY 1)

Zoom option is a toggle button that enlarges the font one-size, then shrinks it onesize

2) Product Color:

Zoom

Product Color: 3)

IMG 3

A4.15

IMG 3 Save Project

Cancel

Does user want to create an account?

Save Project Cancel

Yes Overlay Screen Product Color:

IMG 4 To Previous

Save Project

IMG 4 Upon saving all uploaded images will be merged to users personal image folder if they had not logged in previously.

Add to Cart

Email Project

Overlay Screen

Upon saving all uploaded images will be merged to users personal image folder if they had not logged in previously.

Product Color: Save Project

Add to Cart

Email Project To Previous

A4.40

Yes

User Logged In?

A4.20

Yes

User Logged In?

A4. 21

Save a decoration

$##,###.00 Price Details Each Total

Does user have a username/pw?

Yes

A4.24

System will append a <date&time> stamp to the end of file IMG 2 names so the user does not overwrite existing files by accident.

Registra -tion

IMG 3

Saving your decoration to your Image Locker allows you apply the same decoration to another project or decoration location in the future. To save, enter a file name and select a folder to place the decoration into in your decoration locker. Product Preview

Img Preview

File Name:

Defaults to file upload name +1

Image Locker Folder:

Personal Folder

Enter a folder name...

IMG 4

IMG 1

Folder drop down will present the option to create a new folder which will present the text field shown if selected.

Does user want to create an account?

Yes

Registra -tion

Email Project

Pricing info consists of detailed pricing details

Product Preview IMG 2

IMG 3

Product Color: Save Project

To CA.07 Sheet A3

Save Decoration

Cancel

Sheet: A4

A4.44 A4.43

Overlay Screen

To Previous

Have a Question? $##,###.00 Qty: (edit) ###,###

Save Decoration for Later

NOTE: You may not edit the text on decorations once they have been saved to your image locker.

Yes

User Enters Credentials

A4.23 Does user want to create an account?

Yes

Price Details Each Total

IMG 1 No

Does user have a username/pw?

Qty: (edit) ###,###

User Enters Credentials

Email project

A4.42

Have a Question?

A4.22

A4. 41

Add to Cart

Upon saving all uploaded images will be merged to users personal image folder if they had not logged in previously.

To Previous

4 all uploaded images UponIMG sending will be merged to users personal image folder if they had not logged Save in previously. Project Upon sending email,Email project is automatically saved to user’s “project locker”

Product Color:

Add to Cart

Project

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 5 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Configurator

A5. 01

A5. 02

ClipArt Locker >> Folder Level

ClipArt Locker >> Category Level

A5. 03

ClipArt Locker >> Image Level

Have a Question?

Have a Question? <Product Name/Description>

$##,###.00 Price Details Each Total

Decorate Your Product

Customizable Clipart (edit) Search for a piece of Clipart or browse the categories below. Search Search ClipArt...

IMG 1

Price Details Each Total

Multicolor decorations allowed?

Customizable Clipart (edit) Search for a piece of Clipart or browse the categories below. Search Search ClipArt...

Page 1 of #

Price Details Each Total

A5.05

Select an image to apply

IMG 1

Yes

Name

Select an image to apply

Qty: (edit) ###,###

Customizable Clipart (edit) Clipart Selected: <Image Name> (edit) <Image Name>

Page 1 of #

Color Element 1

ClipArt Image Preview

IMG 2

Clipart Image

IMG 3

Decorate Your Product

IMG 1

IMG 2

$##,###.00

Decorate Your Product

Qty: (edit) ###,###

Select an image to apply

Qty: (edit) ###,###

Have a Question? <Product Name/Description>

$##,###.00

Color Element 2 Color Element 3

ClipArt comes in defaulted to a “Live Trace” outline of the image with applicable transparencies

Color Element 4

IMG 3

+ 3.00" x 2.00"

IMG 4

Product Color: Save Project

Name

Name Next

Add to Cart Cancel

Email Project

Product Color:

Clear Selections

Finished with this decoration

Save Project Email Project

Add to Cart

Back Cancel

IMG 4

Next Clear Selections

Finished with this decoration

Back

Reset to Defaults

Cancel

Clear Selections

Product Color: Save Project Email Project

Add to Cart

Reset button sets colors to ClipArt defaults Finished with this decoration

To CA.07 Sheet A3

A5. 04

ClipArt Locker >> Image Level >> single color

Have a Question? <Product Name/Description>

$##,###.00 A5. 06

Price Details Each Total

Design Studio Loading

Decorate Your Product Select an image to apply

Qty: (edit) ###,###

Customizable Clipart (edit) Clipart Selected: <Image Name> (edit)

Have a Question?

IMG 1

Price Details Each Total

IMG 2

Qty: (edit) ###,### IMG 1

The Easy Design Center is Loading... Product Preview

ClipArt Image Preview

IMG 3

Save Project

IMG 4

Back

Reset to Defaults

Cancel

Clear Selections

Product Color: Email Project

IMG 3

+ 3.00" x 2.00"

IMG 4

IMG 2

Add to Cart

Reset button sets colors to ClipArt defaults Finished with this decoration

Product Color: Save Project Email Project

Sheet: A5

<Image Name> The decoration method you’ve chosen (<method>) only allows you to print using single color images. You can change the color you want your image to print as below. ClipArt comes in defaulted to Image Color a “Live Trace” outline of the image with applicable transparencies

$##,###.00

Add to Cart

To CA.07 Sheet A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 6 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins To A1.70 Sheet A1 CA. 061

Configurator

To A6.01 Sheet A6

Spotlighting >> IT Combination

CA. 062

CA. 063

Spotlighting >> Upload Image

Have a Question?

Have a Question? <Product Name/Description>

$##,###.00 Price Details Each Total

Create a Image & Text Decoration

Qty: (edit) ###,###

Step 1: Select how you want your text displayed in relation to your image: Text Above Image Text Sample

IMG 1

Text Above & Below Image Text Sample

Text Below Image

Image Sample

Have a Question?

First, Upload an image to combine with your text: Enter file location... Browse

IMG 3

Select an image from one of the following: Previously uploaded images Images uploaded by your Company Customizable Clipart

IMG 2

Cancel

Clear Selections

Finished with this decoration

Save Project

Use my image as itâ&#x20AC;&#x2122;s shown

IMG 3

Transparent

IMG 4

Cancel

Clear Selections

Process follows same as Sheet A2 but comes to here instead of going to A2.12 after moving through the process

Finished with this decoration

Change my image to print with new colors

+ 3.00" x 2.00"

Controls appear when Image only decoration is selected.

Product Color:

Save Project

Add to Cart

Email Project

Image & Text Style: Text Above/Below (edit) Uploaded Image: <Filename> (edit) Select how your image will print: *Your uploaded image has more colors than are allowed for this decoration method (<method name>), you will have to print your image as a single color or upload a different image. Change my image to print as a single color

Product Color:

To Previous

A6. 01

Message only shows when applicable; disables as-is option

Uploaded Decoration Preview

IMG 2

Image locker appears AFTER user selects on of the two option

IMG 4

Product Color:

Add to Cart

IMG 1

Apply

IMG 3

Email Project

Create a Image & Text Decoration

Qty: (edit) ###,###

Image & Text Style: Text Above/Below (edit)

IMG 1

Decorate Your Product

Text Sample

IMG 2

Save Project

Price Details Each Total

Create a Image & Text Decoration

Qty: (edit) ###,###

$##,###.00the image to calculate pricing.

Decorate Your Product

Image Sample

Liquid pixel automatically detects the number of colors in

$##,###.00 Price Details Each Total

Decorate Your Product

IMG 4

Spotlighting, Define image style

Add to Cart

Cancel

Finished with this decoration

Clear Selections

Email Project

To Previous

CA. 05

Edit Size & Quantity

CA. 064

Text Only Decoration

Spotlighting, Define image style

Selecting line 1 font will auto update lines 2 & 3, but they are still able to be changed by the user.

Have a Question? $##,###.00 Price Details Each Total

Qty: (edit) ###,### IMG 1

Have a Question? <Product Name/Description>

Enter Desired Sizes & Quantities

Please note that changing desired sizes can affect which color choices are available for your product because not all sizes are available in all Orders placed in groups of 12 colors. Decoration Location Selected: <Selection> Edit only required for headwear. Minimum order of ## required. Orders must be placed in groups of 12. 0 0 * XS XXL

6 XXXL S 4 4XL M Size not available for your product 7 5XL L color selection of <color>. 3 6XL XL

0 1 1 0

* * * *

Total Quantity:

*Additional charges apply for these sizes

Price Details Certain decoration locations will only allow the Each Total user to enter 1 or 2 lines of text. The 2nd and/or (edit) 3rd text entry linesQty: will not be displayed in this ###,### case.

IMG 3

Decorate Your Colors areProduct not available for selection depending upon decoration method. Create your text decoration Enter your text as you want it to appear on your product. You can have up to 3 lines of text without incurring an artwork fee.

IMG 1

Cancel

IMG 2

Update Sizes & Quantities If a user changes order to include Overlay Screen Product Preview a size which excludes the currently selected product color, the product Text Only Text color will change to the default Example color upon updating sizes & quantities

After manual selection, changing the top line font will not reset them. Text defaults to black.

$##,###.00

Line 1 text

Enter line 1 text (max ## characters)

Line 2 text

Enter line 2 text (max ## characters)

A-

A+

Save Project Email Project

Add to Cart

IMG 4

Controls appear when Image only decoration is selected.

Product Color: Save Project

Create a Image & Text Decoration Image & Text Style: Text Above/Below (edit) Uploaded Image: <Filename> (edit) Image Print Style: Print as shown (edit)

Enter top line text

Enter text to combine with your image: Enter top line text (max #)

Uploaded Decoration Preview

Format your text with the options below: Arial A-

Text or image tools show up here based on which component the user is editing

Cancel

Clear Selections

Finished with this decoration

IMG 4

Email Project

A+

*Please double-check to make sure your spelling is correct.

Product Color: Save Project

Add to Cart

Email Project

Color

A-

Arial

IMG 3

*Please double-check to make sure your spelling is correct.

A+

Enter bottom line text (max #)

Enter bottom line text

A+

Color

A-

Arial

Enter line 3 text (max ## characters)

Arial Product Color:

Decorate Your Product

Qty: (edit) ###,###

IMG 2 Line 3 text

Price Details the image to calculate pricing. Each Total

IMG 1

IMG 2

IMG 3

IMG 4

Have a Question? pixel automatically $##,###.00 Liquid detects the number of colors in

Add to Cart

Image Size:

3.00" x 2.00"

Image Rotation: Background appearance: Print my white image background Do not print my white image background You can save this combination of text and image to reuse on other products if you wish (your original image will not be affected).

Transparency options not shown for clipart. Save not shown for ClipArt.

Save Decoration

To Previous

To CA.07 Sheet A3

Cancel

Clear Selections

Finished with this decoration

To CA.07 Sheet A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 7 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Configurator A7. 10

A7. 20

Image Only >> File Uploaded >> Recolor

Have a Question?

Liquid pixel automatically detects the number of colors in

$##,###.00the image to calculate pricing. Price Details Each Total

Select an image to apply User can select a pixel of the image to change all pixels of that color.

Uploaded Image: <Filename> (edit) Image print method: Change to New Colors (edit) To change any color in your image, simply select a color from your image preview and then choose a new color to apply from the color palette below.

IMG 1

Uploaded Decoration Preview

IMG 2

Show me how this works! Selected Color: ?

IMG 3

Transparent

Controls appear when Image only decoration is selected. IMG 4

Save Project Email Project

Select an image to apply

Qty: (edit) ###,###

IMG 1

Uploaded Decoration Preview

3.00" x 2.00"

Selected Color:

Transparent

Controls appear when Image only decoration is selected. IMG 4

Product Color:

Save Project

PMS Code: (charges apply)

Email Project

Clear Selections

To screen where user selected image type

Show me how this works!

Select a color to change from your image preview on the left.

IMG 3

Cancel

Sheet: A7

Decorate Your Product

IMG 2

Add to Cart

Price Details Each Total

Decorate Your Product

Qty: (edit) ###,###

Liquid pixel automatically detects the number of colors in

$##,###.00the image to calculate pricing.

Resets all choices made

Finished with this decoration

To CA.07 Sheet A3

+ 3.00" x 2.00"

Product Color:

Add to Cart

PMS Code: (charges apply)

Cancel

User can select any color to change which portion of the image is being recolored before applying a color change.

Select a color from below to change this color.

Clear Selections

To screen where user selected image type

Resets all choices made

Finished with this decoration

To CA.07 Sheet A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 8 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Configurator

To A1.50 Sheet A1 IL1 .01

Image Locker Landing Page

IL1 .04

Have a Question?

Image Locker >> Personal Images

$##,###.00

MyDetails Image Locker Price Each Total Recent Artwork

Recent images are defined as the last 10 images the user uploaded, manually saved, or sent to the cart on a product from the configurator. (Personal images only)

Qty: (edit) ###,###

$##,###.00 My Image

Personal Images Corporate Images All Images

Qty: (edit) ###,###

My Personal Images

Select a folder... Folder 1 Folder 2 Folder 3 Folder 4 ----------------------------Create New Folder

VIEW ALL

Product Preview

IMG 1

One of the “new folder” options is to “Create New Folder” which opens a text input dialog box and then creates the folder.

Have a Question?

$##,###.00

My Image Locker

Price Details Each Total Personal Image >> <Folder Name>

Page 1 of #

Personal Images

Qty: (edit) ###,###

IMG 2

Option to apply not available if user accessed image locker from SPP.com

Image Locker >> Personal Image Folder

Locker

Price Details Each TotalImages Personal

IMG 1

IL1 .02

One of the “new folder” options is to “Create New Folder” which opens a text input dialog box and then creates the folder.

Have a Question?

Select new folder...

Page 1 of #

Product Preview Name

Name

IMG 1

IMG 2

Name

IMG 3 New Artwork Upload Product Preview

Uploads to “Personal” folder

IMG 3Folder Name: ABCDEFG (edit)

UPLOAD MULTIPLE IMAGES

IMG 4 Shared Corporate Images VIEW ALL

Delete Folder

Product Color:

Save Project

Name

Add to Cart Name

Name

Move to new folder...

Delete Image

Apply this Decoration

IMG 4

Name

Save Project Upload New Artwork Email Project

Both personal and corporate lockers can show folders and/or images

Messages displays for IMG 3 Filename: MarioKart_Color.TIF (edit) images with more Move to new folder... colors defined than is allowed Delete Image

Option to apply not available if user accessed image locker from SPP.com

Product Color:

Email Project Name

IMG 2

Filename: IMAGE.TIF (edit)

Folder Name: ABCDEFG (edit) Delete Folder

Add to Cart

IMG Message displayed for both corporate and personal images if user has selected a colorless Upload decoration method.

Create New Folder Create

Create New Folder:

IL1 .05

Image Locker >> Tabular View Options to edit filenames, move image to new folder, & delete images are only available for personal images

Have a Question?

One of the “new folder” options is to “Create New Folder” which opens a text input dialog box and then creates the folder.

$##,###.00

MyDetails Image Locker Price Each Total Personal Qty: (edit) Images

###,### Arrows will sort table Filename IMG 1 (edit) Filename

Personal Images

# of Colors

Upload

##/##/20##

Select a folder...

Folder

##/##/20##

Folder name

*Image will be printed as colorless with selected method of <method>

Have a Question?

One of the “new folder” options is to “Create New Folder” which opens a text input dialog box and then creates the folder.

##/##/20##

Image Locker >> Corporate Image Folder

Have a Question?

$##,###.00

Corporate Images Personal Images All Images

Preview

$##,###.00 My Image

Folder 1 Folder 2 Folder 3 Folder 4

Locker

Price Details Each Total Images >> <Folder Name> Corporate

Select a folder...

Qty: (edit) ###,###

Page 1 of #

Corporate Images

Select new folder...

IMG 1 Page 1 of #

IMG 1

Move to new folder...

Delete Image

Product Preview Filename IMG 2 (edit)

Uploads to currently selected folder

To Previous IL1 .03

###,###

Last Used

UPLOAD MULTIPLE IMAGES

Image Locker >> Corporate Images

My Image Locker Price Details Each Total Corporate Qty: (edit) Images

Delete Image

ApplyProduct this Decoration Color: Option to apply not available if user accessed Add to Cart image locker from SPP.com

Save Project New Artwork Email Project

User can only create one level of subfolders. This option will dissapear when the user is within a folder, OR for all corporate locker views.

Filename: MarioKart_BW.TIF (edit) Move to new folder...

Move to new folder...

*Image has too many colors for 4 printing with selected method of <method>

UPLOAD MULTIPLE IMAGES

IL1 .06

Filename: MarioKart_Color.TIF (edit) Delete Image

Product Preview

##/##/20##

Folder name

IMG 2

Product Preview

Move to new folder...

IMG 2 Delete Image

Filename IMG 3 (edit) Option to apply not available if user accessed image locker from SPP.com Filename (edit)

IMG 4

Artwork not yet Processed

##/##/20##

Folder name

IMG 3

Move to new folder...

Save Project Upload NewEmail Artwork Project

##/##/20##

Product Color:

Folder name

IMG 4

Move to new folder...

Folder Name: ABCDEFG

Product Color:

Delete Image

Add to Cart

Save Project Email Project

UPLOAD MULTIPLE IMAGES

Upload only available for Personal Folders

Folder Name: ABCDEFG

Delete Image

Apply this Decoration

To Previous

##/##/20##

Uploads to currently selected folder

Add to Cart

Filename: IMAGE.TIF *Image has too many colors for printing with selected method of <method>

Messages displays for images with more colors defined than is allowed

Filename: StaplesCorp.jpeg Description: File alteration is not allowed by corporate policy. IMGPlease 3 do not alter the coloring of this image. *Image has too many colors for printing with selected method of <method>

IMG 4 Option to apply not available if user accessed image locker from SPP.com

Apply decoration as single color

Save Project

Filename: ESPNdaduda.TIF Description: ESPN logo, do not use on Red Products.

Filename: LTch1293.TIF Description: None Given

*<method> prints images as colorless. Apply this image to preview how it will look using <method>.

Product Color:

This error message will be displayed for all images that contain more than one color if the user has selected a color agnostic method.

Add to Cart

Option to apply decoration as a single color is shown Email Project if decoration method does not allow the number of colors defined in the image file. It will appear for corporate images where applicable, and for all personal images

To CA.042 Sheet A2

SHEET: IL1

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 9 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins SPP

Configurator To HW1.20 Sheet HW1

PR.23 Check for SKU Attributes

CH .02

To A6.01 Sheet A6 CH .03

Headwear >> Customize decision

Headwear >> Product Buildup

To A1.50 Sheet A1

Decoration Locations

Have a Question?

Decoration Methods

Have a Question? <Product Name/Description> Customize your cap!

$##,###.00

Product Colors

Price Details Each Total

Product Cost / Order Breakdown

Youâ&#x20AC;&#x2122;ve selected a cap that can be customized to have different colors, brim types, and closure types based on your preferences.

Qty: (edit) ###,###

Bill Styles Closure Options Size & Qty Selected Decoration Types

Would you like to customize these options? (additional charges may apply)

IMG 1

Yes, Customize it!

Product Preview IMG 2

$##,###.00 Price Details Each Total

1. Customize your product

Qty: (edit) ###,###

Customize your product by selecting colors and styles: Crown Color Default colors/styles from

No, Just Decorate it.

Product Preview IMG 2 Options will only appear if relevant to product selection. (ex. Knit hats will not have visor options)

Overlay CA.01 (See sheet A1)

Product Color: Save Project

Add to Cart

Email Project

Yes

Example

Style 2

Style 3

Style 4

Visor Color 2

Closure Style

Product Color: Save Project

Example

Style 1

Visor Color 1

HW1.01 Stock Hat?

product selection page

Visor Style

IMG 1

Example

Style 1

Style 2

Style 3

Product view changes based on what the user is selecting options for (i.e. visor = front, closure = back)

2. Decorate Your Product Begin Decorating

Add to Cart

Email Project

Add to Cart

Overlay Screen

Product build view is not available

Overlay CA.02 (See sheet A1)

CH .04

No Customization Requested

HW1 .20

Have a Question?

Component & Headwear Pricing Details

$##,###.00 Price Details Each Total

1. Customize Your Product

Have a Question?

Product Color:

Qty: (edit) ###,###

Want to change the type of brim, closure or colors of your hat? Customize your cap!

IMG 1

2. Decorate Your Product Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

Product Preview IMG 2

Decoration 1

Delete

Back

Front Front Center

Back Center

= Current Preview Shown Product Color: Save Project Email Project

Close Qty 10 10 10 2

S 1.00 Qty: (edit) L 1.00 ###,### XXL 2.00 5XL Subtotal

5.00

IMG 1 Base 1.00 1.50 2.00

Qty 32 32 32

Want to change the type of brim, closure or colors of your hat? Customize your cap!

Total 32.00 Product 48.00 64.00 $124.00

Decoration 1 Setup* Artwork Per Item $1.00 x 32qty Decoration 2

Decoration Subtotal

Total

2. Decorate Your Product Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on Window opens when the preview to theuser left.clicks on one of the line items. Window provides Delete Decoration 1 where the selected information regarding option price comes from.

Preview

Artwork Cost

Decoration Location:

130.00 50.00 48.00 32.00 82.00 $262.00

Save Project$50.00 Product Subtotal Customization subtotal $124.00 Email Project

Sheet: HW1

Product Color:

Customizations

Subtotal

To CA.03 Sheet A1

1. Customize Your Product

Total 10.00 10.00 20.00 10.00 $50.00

Decoration - Screen Printing (edit)

Add to Cart

Price Details Product Prices Each Total Size Base

Feature Contrast Brim Rolled Edge IMG 2 Velcro Closure Subtotal

Decoration Location:

$##,###.00

Front Front Center

Back Back Center

= Current Preview Shown Close

Product Color:

Add to Cart

$262.00

$436.00

* indicates one time fee

Overlay Screen

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 10 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins SPP

Configurator

Check for SKU Attributes

>1 Decoration Methods Available?

CA.01 Sheet A1

Yes

Decoration Locations

To A1.70 Sheet A1

CHG.04

CHG.02

CHG.01

PR.24

>1 Decoration Locations?

CHG .05

Yes

Do multiple locations exist on the selected view?

Yes

Select Location

Have a Question?

Decoration Methods

To A6.01 Sheet A6

$##,###.00

Product Colors

Price Details Each Total

Product Cost / Order cost breakdown Size & Qty Selected

Decorate Your Product

Product Color:

Qty: (edit) ###,###

Decoration Types

Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

IMG 1

Decoration 1 of 4

Delete

Decoration Location: Back

Front IMG 2

To A1.50 Sheet A1 CHG .10

Center

Top Right Center Bottom Right

No No

Select decoration type

= Current Preview Shown

Next Product Color:

Have a Question? Save Project

$##,###.00 Price Details Each Total

Product Color:

Qty: (edit) ###,###

You are allowed to add 1 decoration max. Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

IMG 1

Decoration 1 of 1

To CA.03 Sheet A1

Delete

Product View: Front

For extra long and narrow boundaries, system focuses on center point where image would be snapped to.

Decoration Location: Lanyard String Decoration Type: Logo Example

Logo Example

Image & Text

Text Only

Image Only

Save Project

Shows appropriate view & existing decorations when adding additional decorations

Apply decoration

Product Color:

Apply decoration

Add to Cart

Email Project

Decorate Your Product

To A4.10 Sheet A4

Add to Cart

CHG .07

Email Project

Decoration Placed

To A4.40 Sheet A4

Have a Question? <Product Name/Description>

$##,###.00 CHG .11

CHG .12

Edit/Preview decoration

Step and Repeat

Have a Question? <Product Name/Description> Decorate Your Product

Qty: (edit) ###,### Repeat Decoration

IMG 1

Qty: (edit) ###,###

Have a Question?

$##,###.00 Price Details Each Total

Price Details Each Total

Repeat Decoration button only Product Color: applicable for certain products and locations, this will need to You are allowed to add 1 decoration max. be defined. Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

Uploaded Decoration Preview

Decoration 1 of 1

Edit Decoration

Delete

Product View: Front

Editing tools are always horizontally aligned. After a user clicks off of the decoration location the boundary and preview will realign to match the product.

Decorate Your Product

IMG 1 Do Not Repeat

Save Project Email Project

Sheet: HG1

Add to Cart

reduce to prevent images from Product overlapping one another.

To A3.01 Sheet A3

Delete

Edit Decoration

Decoration Type: Image Only

Add a Decoration

Save Project

Add to Cart

Note: 2 Decorations Max

Product Color: Edit

Edit Edit

Select a product option below to continue decorating or add to your cart

View: Front

Decoration Type: Image Only

Edit

Front

Decoration Location: Center

Decoration Location: Lanyard String Edit

Add to Cart

Email Project

Select a product option below to continue decorating or add to your cart

Add to Cart

Add a Decoration

Note: Max Number of decorations applied Option to add decoration is disabled if all decorations have been added

IMG 2

View will zoom out to show You are allowed to add 1 decoration max. entire area with multiple copies of the decoration. Original Begin decorating by selecting a location to decorate by location is still the only one that a view and location from the choices below or on the selecting can be manipulated with the rest to the left. preview mirroring that version. Delete Decoration 1 of 1 Acceptable boundary area will

Decoration Location: Lanyard String

Add a Decoration

Decoration 1 of 4 Product View:

Product Color:

Qty: (edit) ###,###

Begin decorating by selecting a location to decorate by selecting a view and location from the choices below or on the preview to the left.

Uploaded Decoration Preview

Price Details Each Total

Select a product option below to continue decorating or add to your cart

Product Color:

Product preview will show the decoration according to Product Color: the decoration method selected (i.e. debossing will show the image debossed.) You are allowed to add 4 decorations max.

IMG 1

$##,###.00

Edit Decoration

Decoration Type: Image Only

Decorate Your Product

Product Color: Save Project Email Project

Add to Cart

Note: Max Number of decorations applied Option to add decoration is disabled if all decorations have been added

To A3.01 Sheet A3

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 11 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins To HW1.20 Sheet HW1

SPP PR.25

CHG .03

To A6.01 Sheet A6

Configurator

Component Hardgoods >> Color only Product Buildup

Check for SKU Attributes

To HW1.20 Sheet HW1 CHG .04

Component HG >> Custom component buildup

Have a Question?

Decoration Locations

$##,###.00

Decoration Methods

Price Details Each Total

Product Colors (based on qty)

Have a Question? <Product Name/Description>

Decoration Types

Price Details Each Total

Customize your product by selecting colors and styles: Pen Color

Ink Color

IMG 2

1. Customize your product

Qty: (edit) ###,###

Default colors/styles from product selection page

Customize your product by selecting colors and styles:

IMG 1

Options will only appear if relevant to product selection. (ex. Knit hats will not have visor options)

Options will only appear if relevant to product selection.

IMG 2

2. Decorate Your Product

IMG 3

Add a Decoration

Stock hardgood?

Product Color:

To CA.01 Sheet A1 Save Project

Cap Style Example

Example

Style 1

Style 2

Style 3

Style 4

Cap Color

Select a product option below to continue decorating or add to your cart CHG.01

Default colors/styles from product selection page

Canister Color

IMG 1 Cap Color

$##,###.00

1. Customize your product

Qty: (edit) ###,###

Product Cost / Order cost breakdown Qty Selected?

To A6.01 Sheet A6

2. Decorate Your Product

Add to Cart

Note: 2 Decorations Max

Product Color:

To CH.04 Sheet HW1

Add to Cart

Save Project

Email Project

Add to Cart

Select a product option below to continue decorating or add to your cart Add a Decoration Note: 2 Decorations Max

Add to Cart To CH.04 Sheet HW1

Yes

Product build view is not available

To CA.02 Sheet A1

To A4.40 Sheet A4

Yes

To A4.10 Sheet A4

CHG.02 Color only customization?

To HW1.20 Sheet HW1 CHG1. 50

To A1.50 Sheet A1

To A6.01 Sheet A6

Component HG >> Customize decision

Have a Question? <Product Name/Description> Customize your <product>!

$##,###.00 Price Details Each Total

Youâ&#x20AC;&#x2122;ve selected a product that can be customized to have different <Components> types based on your preferences.

Qty: (edit) ###,###

Would you like to customize these options? (additional charges may apply)

IMG 1

Yes, Customize it!

Product Preview IMG 2

No, Just Decorate it.

To CH.04 Sheet HW1

Product Color: Save Project

Add to Cart

Email Project Overlay Screen

Sheet: CHG1

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 12 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins Directing Sites RO.01 Select single product or entire order to reorder

RO.02

SPP RO.03

Apply Custom Skin

Configurator

RO.04 Pass product to SPP Cart

SPP Cart RO.05

Directing Siteâ&#x20AC;&#x2122;s Order History

No RO.06 Edit Item?

Remove Item

To CA.09 Sheet A3

User makes desired Edits

Checkout

CA.08 Sheet A3

Preview Item

Edit Item

To A3.01 Sheet A3

Yes

TBD

Sheet: Reorder

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 13 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins SP .02

SPP >> Gifts

SP .03

SPP >> Apparel

SP .04

SC. 01

SPP >> Headwear

SP .05

Staples.com >> Print Services Page

To Artwork Login Page 5 LW.10 SP. 01

SPP >> Idea Center

To Account Login Page 5 LA.10

SPP Landing Page

SP .10

SPP >> Product Results

SP .20

SPP >> Product Details

Error message that displays if minimum order quantity is not met

SL .01

StaplesLink.com B2B To Configurator Page 3 CF.10 QL .01

Browse Quill.com

SP .06

SPP >> Advanced Search

To Cart Page 4 Cr.10

MA .01

MedicalArtsPress .com

Directing Sites

2.2.1 Locate Item (Browse, Search, Gifts, Idea Center)

Advanced Search File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 14 of 15

Staples Promotional Products (SPP) - Configurator Project | Version 1.0 Draft | November 11, 2010 | Mike Jenkins PMS Code: Apply

Product Colors:

Color not available for sizes XXL through 6XL

PMS Code:

Product Colors:

Additional charges may apply Apply

Color Picker Options Chat with an SPP Representative

Chat with an SPP Representative

Step 1. Select an image to apply from: Personal image locker Corporate image locker SPP Clipart

Img Preview

Personal image locker Corporate image locker SPP Clipart

OR Upload a new image: Enter file location... Browse

Step 1. Select an image to apply from:

Apply

Step 2.

Img Preview

Select how your image will appear on the product:

OR Upload a new image: Enter file location... Browse

Select how your image will appear on the product:

Use Image As-Is Use my image background Use product color as background

Change image to a new color

Use Image As-Is Use my image background Use product color as background

Select a custom color

Change image to a new color Select a custom color Select Color

Color 1 Match to product color (Tone on Tone)

Apply

Step 2.

PMS Code:

Clear Selections

Overlay Screen

Apply Image

Apply

Cancel

When mousing over a color the PMS code for that color is shown.

Product Colors:

If a user enters a PMS color that is in the color palette it will highlight that color as the selection and then apply it.

Match to product secondary color

Cancel

These views show two different options for where to put tone on tone and trim colors for users to select. The left version has color swatches as choices independent of the color selector. The right option incorporates these colors into the actual color selector.

Clear Selections

Overlay Screen

Apply Image

If a vendor does not match PMS codes then basic color swatches will be presented without the ability to enter a code. (example, Red, Blue, Green, etcâ&#x20AC;Ś)

File Name: SPP_8_21_2008_Thumbnail_Flows (Updated).vsd | Page 15 of 15