***DISCLAIMER: THIS DOCUMENT IS THE SOLE PROPERTY OF EYEWEAR LIMITED. IT IS NOT TO BE DISTRIBUTED WITHOUT PERMISSION.

***

Welcome to the SITE PLAN

Use the left hand side bar to navigate through this document, but first read this whole page :)

Super Overview this document is divided into 3 parts.

Overview (contains a client training manual, that you should read next)

Sitemap (all the pages, and helpful info about each ) Core System Extensions (whats Magento?)

You can comment, or upload files related to each page, in the bottom. Dont worry if you change something we can always revert it!

What are we doing here?

This document defines a roadmap for creating a minimal viable product for launching, a premium eyewear business. This roadmap should give both designers and developers enough information as to be able to build and before that generate estimates in terms of cost and time. This document should serve as a roadmap for anchoring, and clearly defining client expectations for Eyewear 1.0. How do we decide what goes into 1.0? How do we evolve the site to better synch with consumer wants once the site once is up? Having a shared scientific set of methods for answering these questions is a good idea. The emerging science of asking and answering these questions is the Lean Startup Methodology.

For example: Does a Virtual Try On feature increase customer conversion? We can fine tune our offering by rolling out features such as this, marketing variations, and general pivots with measurable results via an iterative build-measure-learn process. In order to do this we need to synch business strategy with development strategy; again, the framework for this synchronization is the evolving science called the Lean Startup Methodology. Synchronizing Business stakeholder visions, with development team execution, and consumer validation, is a science and an art mapped out by many, but one book stands out as the cannon for Lean Development Methodology. It would be a good start to all build a common shared framework by reading this book, which many successful startups consider their bible. Learn more about the Lean Development Methodology This section is for the designer to post information as well as for the developer to post notes he expects the designer may find handy. The sitemap is broken into 3 parts, you will only design the customer pages

You should discuss with client email design

Catalog, product detail, cart, and checkout pages need to have a space to display notifications Link to notification example. **we can have this area expand to get created and push stuff out of the way, but we need to have space to do this, and a notification template. Cool Ecommerce Links:

35 award winning ecommerce sites

Sitemap is broken down into three groups, based on user group.

Customer Admin Lens Company

Relevant information you may find on each page.

Breakdown of all pages. Notes about functionality

Notifications or alert messages that might show up (this will probably not be complete but once we have a template we can extend) Assumptions made by the developer business analyst that the client should verify in comments section of page.

Hyperlink references to similar relevant functional sites Links to design aesthetics pertinent to page

Core User Experience Flow Of Users. PROSPECT comes to site and requests frame trials (via shopping cart) 1. Prospect comes to the site. 2. Reviews catalog page of frame styles and designs 3. Gets more information on product detail page 3. Selects up to 5 frame styles for free home trial 4. Proceeds through shopping cart to reserve trials with credit card 5. Is offered option to sign up for newsletter. 5. Email confirmation of trial order placed 6. Email notification of order shipped 7. Email reminder to return frames. 8; Email Notification when returns are received by us 8. END PROSPECT comes to site to order prescription glasses (via shopping cart)

10. 11. 12. 12. 13.

Prospect comes to the site (new or as previous trial customer) Reviews catalog of frame styles and designs Gets more information in product detail page Selects chosen frame style and color Shopping cart process Sign In or Register Select prescription type

Submit prescription information (Upload and / or enter manually) Prescription options Shipping addressing Payment information Confirmation

14. Email confirmation of trial order placed 15. Email notification of order shipped 16. END

Home Page

Description / User Stories

Home Page probably has a gallery Introduces People to your site Navigation options to category pages.

(if designer chooses) User can navigate to featured / new items from home page http://www.whatisblik.com/

Relevant Links (Similar Functionality)

WARBY PARKER CATALOG PAGE

Design Ideas (To be provided by designer)

Global (Header / Footer)

Header has a styled checkout bag.

Home Try On and Purchases go in same bag.

Footer to be determined, probably includes social links cool footer ->http://www.akqa.com/ Description This page shows a selection of categorized, filtered product thumbnails. User Stories

Users can see a layered navigation of eyeglasses Users can add HTO (Home try on) Items to their cart Users can add item to cart Users can navigate to a product detail page Catalog option should change state on hover Active layered Navigation should change state. Navigation Options should change on Hover over of thumbnail.

Notifications
If users try and add more than X HTO items they get a notification saying they have already hit limit.

Layers of Layered Navigation

Layered navigation means that you can apply layers of filtration to results shown on catalog.

Layer1: Width

Layer2: Size Layer3: Color

Features
Male and Female versions of catalogue page may have distinct style.

Product Detail page may have distinct styles based on the catalog page from which the product was selected. Admin should be able to control what product variations show up on unfiltered category pages.

Relevant Links (Similar Functionality)

WARBY PARKER CATALOG PAGE

Design Ideas (To be provided by designer) TBD Description

This is the page where the user gets more information about the product.

User Stories

User can zoom into current angle. User can change angle of current view. User can preview / navigate other color variations of frame.

User can see an image of a gender appropriate model wearing their glasses. User can navigate to fit guide User can purchase an item (forwards him to cart) User can add a HTO to cart (also forwards him to cart)

Features

Some products will have both gender options so the logic will need to determine which navigation tree the user has selected and determine which image is appropriate to display.

Page displays custom product attributes such as Width of lens, Width of bridge, Length of temple, also face shape, complete list of attributes define in Admin -> Product Attributes.

Sidebar

Side bar is disabled on this page

Notifications
*Make sure to make a space for notifications on this page, we may need to put some such as the following (Copy to be revised by client)

Out of stock, sorry try back later Sorry we dont have that available for home try on right now. Cant add to cart, Home try on limit already reached (5).

Relevant Links (Similar Functionality)

WARBY PARKER CATALOG PAGE

Notes to designer
We should design this with and without virtual try on option, as this will likely be added after intial launch.

Really cool zoom http://usa.tommy.com/tommy/browse/productDetailWithPicker.jsp ?productId=0857803820&categoryId=0809&skuColorId=401

Design Ideas (To be provided by designer)

TBD

Description

There should be one or two info graphics that explain custom eyeglass attributes such as size, and face shape.

User Stories

User clicks a link on product detail page to open up fit guide. User can close modal by clicking x in top right of fit guide.

Relevant Links (Similar Functionality)

Click link on product detail page link #1- Best fitted for you link #2 Whats this

Design Ideas (To be provided by designer)

TBD

Virtual Try On
To be specced out later and rolled into a 1.1 release. Building this thing is going to be a month project in itself.

Description
This is the page where the user gets directed after adding a HTO, or purchase to their cart or, by clicking the cart utility navigation icon in the header.

User Stories

Users can update or remove quantity. Users can proceed to checkout. Users can return to shopping the catalog page.

Features

If user only has type HTO orders in the cart there should be a $1 dollar purchase
o

see assumptions

Notifications
Suggest designer makes something using this but customizes colors / icons to match site. Link to notification example

If someone tries to enter a HTO for the same style they have bought or vice versa they get an error message. If client has HTO Only their should be a status message explaining the fee

Assumptions
1.) HTO Only Charge In the usa we can change the amount on a charge of if we have a capture on file. Client should confirm this is the case with their merchant provider / gateway.

Client Sign off on Assumptions

1.) Awaiting Confirmation

Check Out

4 stage purchase checkout

Login / Checkout as guest Enter Prescription Info Customer Address / billing Info Confirmation

3 stage purchase checkout

Login / Checkout as guest Enter Prescription Info Customer Address / billing Info

Confirmation

Notifications
All pages should have space for notifications, for the myriad of input mistakes / omissions that are possible. Notification messages should appear at the top of the screen and also some sort of attention grabber (arrow, or asterisks should point to the section of the form that has caused an issue)

Relevant Links
Fundamentals of checkout design Article, a serious must read

Checkout | Sign In

User can sign in with a guest, or pre-existing account. User can click lost pw Link

New pw link
Takes user to a (to be designed) forgot your password page that takes as user input an email address.

User Stories

User selects prescription information if he has it.

User is offered also information to fax or upload prescription information. User can select reading glasses. User can select blank lenses. Users can check out with prescription information on file.

Features

Information is saved for admin and Lens Company to review. Some prescription types affect price of order.

The same prescription information is applied to all lenses in order.

Confirmation of Assumption By Client

There is just one set of entry by form prescription information that we process.

Relevant Links (Similar Functionality)

See warby parker checkout

Description.
This is the page where the client checks out and pays.

User Stories.

User can check out with credit card.

User can check out with paypal (assuming they have paypal properly onfigurred) User can also check out with google checkout.

Features.
Client will get a modified version of onestepcheckout showing an additional cart summary of items in cart during checkout.

Assumptions
Client will need to set up an account with a merchant service i.e. merchantwarehouse.com.

Client will need to set up a gateway ie authorize.net.

Its possible client can access paypment via credit card api via other services such as a premium google checkout or paypal account but will have to research this on their own.

Confirm

Zip Code checking mechanism across different countries.

Description.
This is the final screen in the check out process, and concludes the users experience alerting them that we have sent them an email.

User Stories
Client will get a confirmation page telling them they have also been sent an email.

Confirm page has an order number.

Confirm page also tells about whatever charity offer we have decided to do. User can return to catalog from confirm page.

Confirm
Confirmation email for HTO is different to confirmation email for regular purchase.

Informational Pages
SIte may use a variety of informational pages to be determined by designer and us such pages may include

faq How it works About us Gallery Special unnamed marketing angle privacy policy terms and conditions

return policy blog

o o

blog catalog page blog detail page

Login Page / Customer Dashboard

Page content. User should be able to register for site by clicking a link that is available on all pages on the top somewhere. when registered for siteuser should receive a confirmation email.

User has choice of registering OR signing in OR being guest . Lost password option, use email address for username.

Custom page not found page example of fabulous 404s. users actually get this a lot, and although this page is kind of optional its a fun way to make a mark and have some fun, as you can see in above links.

Admin Pages / Stories

Custom features / stories:

Admin can see overdue home try ons. Admin can mark overdue home try ons as returned Admin can edit prescription Info. Admin can review status of lens company.

Some key standard features

Admin can change copy (text) or site via the content management system.

Integrates with 3rd party shipping api

o

Since its so popular and has been around for a while it

integrates with almost everything. **Zendesk for customer support integration Quicken / Quickbooks Maillchimp newsletters Really like whatever you can imagine / need / grow into

Advanced Inventory management So many options its ridiculous Core Magento Features

Lens Manufactures Pages / Stories

Lens company can login and see new orders. Lens company gets email updates for new orders.

lens company can set status of work: not started, started, blocked, completed. lens company can write notes about nature of being blocked.

Description.
We extensively extended the core Magento platform. We extended the way products work with changing product attributes / function

We extended the order system to accomadate the eyewear domain We added extra views to allow for hto processing / overdue monitoring We integrated 10 custom tranactional emails for instance different types of emails go out for hto vs purchase orders.

Mezzmer Product Custom Attributes

General Comments
These are the custom attributes added for a similar eyewear ecommerce store at the product level, to accommodate the eyewear business process. There is also an entire heap of regular standard attributes that Magento offers out of the box, this document just is a list of the custom ones. This is a list of customizations we made for a similar site, followed by a discussion of modifications needed for us

Explanation of formatting
field name //Notes about the field Value option1, Value Option2, ...

Product Custom Attributes

Primary color //we have two different types of color, ie shades of black each with dystinct names and a master color, which controls navigation, primary color is a more limited set of colors used to control navigation.

Color //We have different shades of primary color that sound sexier, for each product, these go here. Shapes width //used for navigation wide, medium, narrow

Length of Temple //an exact measurement, sent to lens lab, and displayed on homepage decimal point number

Mezzmer Custom Order Configuration

General Comments
These are the custom attributes added for a similar eyewear ecommerce store at the order level, to accommodate the eyewear business process. There is also an entire heap of regular standard attributes that magento offers out of the box, this document just is a list of the custom ones. This is a list of customizations we made for a similar site, followed by a discussion of modifications needed for us

Explanation of formatting
field name//Notes about the field Value option1, Value Option2, ...

Custom order attributes

Optical Status: // They send orders to a third party this will have to be modified for us Unsent, Sent, Received Order Type: //Purchase orders, Hometry on Orders, or Both, thats mixed orders Purchase, Home Trial, Both Rx Status: // We need to Modify this Fax/Email, Contact Doctor, Completed, Upload, N/A Lens Type: //Only available for purchase order types Prescription, Plano, No Lenses, Reading

Reading Glasses Strength //Only if Lens Type is Reading 0, +.25, +.5, +1. +4 Prescription Name: // users can save prescriptions and associate it to their account. name entered by user Include High Index Lenses: //some lenses are heavier, cost more and have this flag set. yes, no

Prescription related attributes

Right eye: SPH or RX values same as warby parker Right eye: CYL values same as warby parker Right eye: Axis values same as warby parker Left eye: SPH or RX values same as warby parker Left eye: CYL values same as warby parker Left eye: Axis values same as warby parker Pupillary Distance Type: //(there are two ways of thinking about pupilary distance (monocular or binocular) our system allows for both Value will automatically change based on Monocular/Binocular values

Pupillary Distance Right (OD): // If entered sets Pupillary Distance type to Monocular values same as warby parker Pupillary Distance Left (OS) // If entered sets Pupillary Distance type to Monocular values same as warby parker *Pupillary Distance Binocular * // If entered sets Pupillary Distance type to Binocular values same as warby parker

Info needed to contact doctor

Doctor Name: // we offer the option to call the clients doctor if they give us doctor contact info User entered text value Clinic Name: // we offer the option to call the clients doctor if they give us doctor contact info User entered text value DOB: // we offer the option to call the clients doctor if they give us doctor contact info User entered text value Clinic phone // we offer the option to call the clients doctor if they give us doctor contact info User entered text value

Customizations

we may not want contact doctor options we may not be needing high index customization

h2 General

Setting up each email is a 5 step process, first the client creates copy, then designer should lay it out, then we turn it into html / css, then we integrate dynamic variables, then we hook it up functionally to the system. Its a non trivial effort that tends to get overlooked.

Set of custom emails created and integrated for Mezzmer.

Mezzmer Purchase Confirmation //Order verification for non HTO orders. Mezzmer Purchase Confirmation Verify Rx //Order verificatio for non HTO where they need to go get more info and get back to us. Mezzmer Purchase Shipment Confirmation //Email sent when we ship for non HTO Mezzmer Purchase follow up. // check in 10 days later to see how everything is going Mezzmer HTO Confirmation Email //Order verification for non HTO orders. Mezzmer HTO Shipment Email //Email sent when we ship for non HTO Mezzmer HTO Return Reminder //reminder to return items. Mezzmer HTO Returned //notification that we received the HTO Mezzmer Password Reset //self explanatory

Modifications needed
Width of bridge //an exact measurement, sent to lens lab, and displayed on homepage decimal point number

Width of lens //an exact measurement, sent to lens lab, and displayed on homepage. decimal point number

Gender male, female, or unisex Home try on //is this available for hometry on yes, no

Customizations
Need to make hto, and purchase separate skus and itegrate all the associated logic of making that change.