e commerce specs

7/31/2019 e Commerce Specs

1/20

***DISCLAIMER: THIS DOCUMENT IS THE SOLE PROPERTY OFEYEWEAR LIMITED. IT IS NOT TO BE DISTRIBUTED WITHOUTPERMISSION. ***

Welcome to the SITE PLANUse the left hand side bar to navigate through this document, but firstread this whole page :)

Super Overview this document is dividedinto 3 parts.

Overview (contains a client training manual, that you shouldread 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 productfor launching, a premium eyewear business.

This roadmap should give both designers and developers enoughinformation as to be able to build and before that generate estimates interms of cost and time. This document should serve as a roadmap foranchoring, and clearly defining client expectations for Eyewear 1.0.

How do we decide what goes into 1.0? How do we evolve the site tobetter synch with consumer wants once the site once is up? Having ashared scientific set of methods for answering these questions is a goodidea. The emerging science of asking and answering these questions isthe Lean Startup Methodology.


2/20

For example: Does a Virtual Try On feature increase customerconversion? We can fine tune our offering by rolling out features such asthis, marketing variations, and general pivots with measurable resultsvia an iterative build-measure-learn process. In order to do this we

need to synch business strategy with development strategy; again, theframework for this synchronization is the evolving science called the

Lean Startup Methodology.

Synchronizing Business stakeholder visions, with development teamexecution, and consumer validation, is a science and an art mapped outby many, but one book stands out as the cannon for Lean DevelopmentMethodology. It would be a good start to all build a common sharedframework by reading this book, which many successful startupsconsider their bible.

Learn more about the Lean Development Methodology

This section is for the designer to post information as well as for thedeveloper 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 havea space to display notifications Link to notification example.

**we can have this area expand to get created and push stuff out of theway, 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.
http://www.smashingmagazine.com/2010/01/22/35-beautiful-and-effective-ecommerce-websites/http://www.smashingmagazine.com/2010/01/22/35-beautiful-and-effective-ecommerce-websites/


3/20

Customer Admin Lens Company

Relevant information you may find on eachpage.

Breakdown of all pages. Notes about functionality Notifications or alert messages that might show up (this willprobably not be complete but once we have a template we canextend)

Assumptions made by the developer business analyst that theclient 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 designs3. Gets more information on product detail page 3. Selects up to 5 frame styles for free home trial4. Proceeds through shopping cart to reserve trials with credit card5. Is offered option to sign up for newsletter.5. Email confirmation of trial order placed6. Email notification of order shipped7. 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 shoppingcart)


4/20

10. Prospect comes to the site (new or as previous trial customer)11. Reviews catalog of frame styles and designs12. Gets more information in product detail page 12. Selects chosen frame style and color

13. Shopping cart process

Sign In or Register Select prescription type Submit prescription information (Upload and / or entermanually) Prescription options Shipping addressing

Payment information Confirmation

14. Email confirmation of trial order placed15. Email notification of order shipped16. END

Home PageDescription / 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 itemsfrom home page http://www.whatisblik.com/

Relevant Links (Similar Functionality) WARBY PARKER CATALOG PAGE

Design Ideas (To be provided by designer)
http://http/www.warbyparker.com/http://http/www.warbyparker.com/


5/20

Global (Header / Footer)

Header has a styled checkout bag. Home Try On and Purchases go in same bag.

Footerto be determined, probably includessocial linkscool 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 filtrationto results shown on catalog. Layer1: Width


6/20

Layer2: Size Layer3: Color

Features Male and Female versions of catalogue page may have distinctstyle. Product Detail page may have distinct styles based on thecatalog page from which the product was selected. Admin should be able to control what product variations showup on unfiltered category pages.


Design Ideas (To be provided by designer)TBD

Description

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

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
http://http/www.warbyparker.com/mens-eyewearhttp://http/www.warbyparker.com/mens-eyewear


7/20

Some products will have both gender options so the logic willneed to determine which navigation tree the user has selected anddetermine 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 needto 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).


Notes to designer We should design this with and without virtual try on option, asthis will likely be added after intial launch. Really cool zoomhttp://usa.tommy.com/tommy/browse/productDetailWithPicker.jsp?productId=0857803820&categoryId=0809&skuColorId=401

Design Ideas (To be provided by designer) TBD

Description
http://http/www.warbyparker.com/mens-eyewearhttp://http/www.warbyparker.com/mens-eyewear


8/20

There should be one or two info graphics that explain custom eyeglassattributes 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, orpurchase to their cart or, by clicking the cart utility navigation icon inthe header.

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

Features
http://www.warbyparker.com/mens-eyewear-roosevelt-eyeglass-frame-striped-tortoise?sc=9&category=-109http://www.warbyparker.com/mens-eyewear-roosevelt-eyeglass-frame-striped-tortoise?sc=9&category=-109


9/20

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 customizescolors / icons to match site. Link to notification example If someone tries to enter a HTO for the same style they havebought or vice versa they get an error message. If client has HTO Only their should be a status messageexplaining the fee

Assumptions1.) HTO Only Charge In the usa we can change the amount on acharge of if we have a capture on file. Client should confirm this is thecase 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
http://http/azuliadesigns.com/css-message-notification-barshttp://http/azuliadesigns.com/css-message-notification-bars


10/20

Confirmation

Notifications

All pages should have space for notifications, for the myriad of inputmistakes / omissions that are possible.

Notification messages should appear at the top of the screenand also some sort of attention grabber (arrow, or asterisks shouldpoint 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 pagethat 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 prescriptioninformation. 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.
http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/


11/20

The same prescription information is applied to all lenses inorder.

Confirmation of Assumption By Client There is just one set of entry by form prescription informationthat 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 paypalproperly onfigurred) User can also check out with google checkout.

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

Assumptions Client will need to set up an account with a merchant servicei.e. merchantwarehouse.com. Client will need to set up a gateway ie authorize.net. Its possible client can access paypment via credit card api viaother services such as a premium google checkout or paypalaccount but will have to research this on their own.


12/20

Confirm Zip Code checking mechanism across different countries.

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

User Stories Client will get a confirmation page telling them they have alsobeen sent an email. Confirm page has an order number. Confirm page also tells about whatever charity offer we havedecided to do. User can return to catalog from confirm page.

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

Informational Pages

SIte may use a variety of informational pages to be determined bydesigner and us

such pages may include

faq

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


13/20

return policy blog

o blog catalog pageo blog detail page

Login Page / Customer Dashboard

Page content.

User should be able to register for site by clicking a link that is availableon 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 optionalits a fun way to make a mark and have some fun, as you can see inabove 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
http://http/fab404.com/http://http/fab404.com/


14/20

Admin can change copy (text) or site via the contentmanagement system. Integrates with 3rd party shipping api

o Since its so popular and has been around for a while itintegrates 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 productattributes / function We extended the order system to accomadate the eyeweardomain We added extra views to allow for hto processing / overduemonitoring We integrated 10 custom tranactional emails for instancedifferent types of emails go out for hto vs purchase orders.

Mezzmer Product Custom Attributes
http://http/www.magentocommerce.com/product/featureshttp://http/www.magentocommerce.com/product/features


15/20

General Comments

These are the custom attributes added for a similar eyewear e-commerce store at the product level, to accommodate the eyewear

business process.

There is also an entire heap of regular standard attributes that Magentooffers 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 adiscussion of modifications needed for us

Explanation of formatting

field name //Notes about the fieldValue option1, Value Option2, ...

Product Custom Attributes

Primary color //we have two different types of color, ie shades of blackeach 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, foreach product, these go here.Shapes

width //used for navigationwide, medium, narrow

Length of Temple //an exact measurement, sent to lens lab, anddisplayed on homepagedecimal point number


16/20

Mezzmer Custom Order Configuration

General Comments

These are the custom attributes added for a similar eyewear e-commerce store at the order level, to accommodate the eyewearbusiness process.

There is also an entire heap of regular standard attributes that magentooffers 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 fieldValue option1, Value Option2, ...

Custom order attributes

Optical Status : // They send orders to a third party this will have to bemodified for usUnsent, Sent, Received

Order Type : //Purchase orders, Hometry on Orders, or Both, thatsmixed ordersPurchase, Home Trial, Both

Rx Status : // We need to Modify thisFax/Email, Contact Doctor, Completed, Upload, N/A

Lens Type : //Only available for purchase order typesPrescription, Plano, No Lenses, Reading


17/20

Reading Glasses Strength //Only if Lens Type is Reading0, +.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 andhave this flag set.yes, no

Prescription related attributes

Right eye: SPH or RXvalues same as warby parker

Right eye: CYLvalues same as warby parker

Right eye: Axisvalues same as warby parker

Left eye: SPH or RXvalues same as warby parker

Left eye: CYLvalues same as warby parker

Left eye: Axisvalues same as warby parker

Pupillary Distance Type: //(there are two ways of thinking aboutpupilary distance (monocular or binocular) our system allows for bothValue will automatically change based on Monocular/Binocular values


18/20

Pupillary Distance Right (OD): // If entered sets Pupillary Distancetype to Monocularvalues same as warby parker

Pupillary Distance Left (OS) // If entered sets Pupillary Distance typeto Monocularvalues same as warby parker

*Pupillary Distance Binocular * // If entered sets Pupillary Distance typeto Binocularvalues same as warby parker

Info needed to contact doctor

Doctor Name : // we offer the option to call the clients doctor if theygive us doctor contact infoUser entered text value

Clinic Name : // we offer the option to call the clients doctor if they giveus doctor contact infoUser entered text value

DOB: // we offer the option to call the clients doctor if they give usdoctor contact infoUser entered text value

Clinic phone // we offer the option to call the clients doctor if they giveus doctor contact infoUser entered text value

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

h2 General


19/20

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 weintegrate dynamic variables, then we hook it up functionally to thesystem. Its a non trivial effort that tends to get overlooked.

Set of custom emails created andintegrated for Mezzmer.

Mezzmer Purchase Confirmation //Order verification for non HTO orders.

Mezzmer Purchase Confirmation Verify Rx //Order verificatio fornon HTO where they need to go get more info and get back to us.

Mezzmer Purchase Shipment Confirmation //Email sent when we shipfor non HTO

Mezzmer Purchase follow up. // check in 10 days later to see howeverything is going

Mezzmer HTO Confirmation Email //Order verification fornon 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, anddisplayed on homepagedecimal point number


20/20

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

Gendermale, female, or unisex

Home try on //is this available for hometry onyes, no

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

e commerce specs

Documents