Safeway Online Delivery App Wireframes and User flow by Robert Soo

Title Page

Safeway Canada WIREFRAMES – Safeway Mobile App VERSION 1.0

March 26, 2011

THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION. THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT Kristy Streefkerk AND Safeway Inc. CONSIDERS CONFIDENTIAL, PROPRIETARY AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

About This Document This documents the Information Architecture and structure of the Safeway Mobile Application design concept. Wireframes Wireframes illustrate the information architecture and interaction design elements of a site. This document defines the page structure (information), interaction, and navigation. It does not influence the nomenclature, colours, stylesheets, shapes, aesthetics, and other visual design parts of the website concept. Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the development, design, and UE teams to scope out the project. New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the â&#x20AC;&#x153;Revision History.â&#x20AC;?

Revision History Version 0.5 (March 21, 2011) - First draft Version 0.75 (March 24, 2011) - Updates and Addition of Page Notes Version 1.0 (March 26, 2011) - Updates and Addition of Page Notes complete

Title Page About This Document Loading Screen Login Create Account Create Account 2 Area Code Not within Delivery Area Proceed as Guest Shop Shop 2 Search Function Item Information Cart & Checkout Delivery Options Confirm Order & Receipt for Guests Receipt for Members/Shopping Complete No User Account User Account Update Account Information Receipts Delivery Lists/Add List Choose Regular Delivery Schedule Updating a List Help/FAQs User Flow Diagram

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Loading Screen Page Notes

Carrier

12:00 PM

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

1.0 Safeway Brand/Logo This is a placeholder for the Safeway logo/branding. This image should be a clickable link that takes the user back to the main shopping page when pressed. Future such instances will be similar in functionality.

2.0 Members login

1.0

Carrier

12:00 PM

Carrier

12:00 PM

Visitors will be able to log in as members providing they already have an existing account. Clicking on this button will take users to the next frame over.

3.0 Register a new account Welcome to the Safeway Mobile Application.

Please Input Username and Password

Clicking on this button will allow visitors to register a new account. After clicking on this button, users will be taken to the Create Account Page on Pg.5

4.0 Proceed without an account Please select an option.

2.0 Log In

Username

This button will allow users to access the application without having an account or having to register an account. Clicking on this button will take users to the Proceed to Guest page on Pg.8.

Password

5.0 Username/Password input

5.0

3.0

After clicking on the Log In button in the prior frame, users are taken to this screen in order to input their Username and Password information. Users will have to touch each entry space in order to call up the standard smartphone keyboard.

Back

Proceed as a Guest

4.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Create Account Page Notes

1.0 Back button Navigation Users are able to press this button in order to return to the prior level last visited. Future such instances will be similar in functionality

2.0 Postal Code Verification

Carrier

12:00 PM

Carrier

1.0

This entry will allow users to input their Postal Code. Once imputed, the system will automatically check the Postal Code against a list of serviced areas. If the imputed Postal Code is not serviceable then the users will receive an error message on Pg.7. Future such instances will be similar in functionality

12:00 PM

Back

Create My Account

* =required field

* Postal Code:

3.0 Search Function User information entries marked with a * will be required in order to proceed.

4.0 Standard Keyboard

* Postal Code:

Standard keyboard

2.0 Mr

* First Name:

* Last Name:

Q W E * Address Type:

3.0

* Address Line:

-Select-

* Address A S Type: D * Address Line:

123

F -SelectG H 4.0

N M

V space

L Õ

Enter

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Create Account 2 Page Notes

1.0 Club Card Number Already existing Safeway Club Card members are able input their number here. Those member who do so, will allow the system to automatically apply member discounts to all applicable items on the database.

2.0 How did you hear about us? Carrier

12:00 PM

Carrier

12:00 PM

Back

Create My Account

This placeholder will hold a dropdown menu to allow the user to select the method of which they heard of this application. Choices will include: At one of our stores Advertisement Word of Mouth Etc.

Back

Create My Account

3.0 Terms and conditions link City: Vancouver * E-Mail Address:

2.0 How did you hear about us?

* Retype E-Mail Address:

* Choose Password:

1.0

Club Card Number:

3.0

* Retype Password:

This link will allow users to access a page with the terms and conditions of using the Safeway mobile app.

4.0 Terms and conditions confirmation This placeholder represents a checkbox that the user will have to press before being able to proceed.

-SELECT ONE-

5.0 Create Account

Please click to read the terms and conditions

After user has imputed all the required information, clicking this button will submit the users information and create the account for the user to use. Afterwards, the user will be taken to the main shopping area on Pg.9 already logged in.

* Check this box if you agree to the terms and conditions.

4.0 Create Account

5.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Area Code Not within Delivery Area Page Notes

1.0 Non-Serviceable Postal Code â&#x20AC;&#x201C; Be Notified This button will take users to the following frame in the event that the entered postal code is not within a serviceable area. Future such instances will be similar in functionality.

2.0 Non-Serviceable Postal Code â&#x20AC;&#x201C; Proceed as Guest This button will take users directly to the main shopping page on Pg.9 in Browser Mode. Future such instances will be similar in functionality. Carrier

12:00 PM

Carrier

12:00 PM

3.0 Search Function Back

Back

Create My Account

Service Notification

* =required field

* Postal Code:

In case the user has accidentally imputed the incorrect Postal code or has another Postal Code to submit, users can correct it in this text box and be taken back to the Create My Account page with the new Postal Code already imputed (provided it is a serviceable postal code). If the User came from the Proceed as Guest Page on Pg.8, a serviceable Postal Code entered will take the user directly to the Main Shopping page (provided it is a serviceable postal code).

* Email Address:

A1B 2C3 Mr

* First Name:

* Last

1.0

Phone Number:

We apologize, Safeway.com does not deliver in the A1B 2C3 Name: Postal code at this time. Would you like us to notify you when we start delivering to your area?

* Address Type: Yes

Submit

2.0

-Select- No, Proceed as a Guest

* Address Line: Go

3.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Proceed as Guest Page Notes

1.0 Postal Code imput In order to make use of the delivery function within the application the user must place his or her Postal Code within this placeholder. If the Postal code is not serviceable, the user will received the same error message as on Pg.7.

2.0 Enter on Browse Only mode Carrier

12:00 PM

Carrier

12:00 PM

Please Input Your Postal Code

1.0 Postal Code

2.0

Browse only mode

By clicking on this button, users will be able to browse the goods offered by Safeway without providing any further information. Clicking on this button will take the user to the Main Shopping page, however, they will not be able to access either the User Accounts or Checkout areas, and the option to buy goods will not be provided.

! Postal Code We apologize, Safeway.com does not deliver in the A1B 2C3 postal code at this time. Would you like us to notify you when we start delivering to your area? Submit No, Proceed as a Guest

Yes Back

Back

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Shop Page Notes

1.0 Cart Tracker This placeholder will display the total number of items that the user currently has in his or her shopping cart. This display will be hidden if the user is viewing in Browser Mode. Future such instances will be similar in functionality.

2.0 View User Account Carrier

12:00 PM

Carrier

Shop 2.0

View User Account

12:00 PM

Back

1.0

Shop

You have 0 items in cart View Shopping Cart

This button will take registered users to their User Account on Pg.18. If users are non-registered guests then by clicking on this option will take them to the notification display on Pg.17. This option will not be visible to Browsing Guests (guests who could not provide a serviceable Postal Code). Future such instances will be similar in functionality.

3.0

View User Account

You have 0 items in cart View Shopping Cart

Air Miles Baked Goods Bakery

Pharmacy Produce Refridgerated

Beaverages Buy 1 Get 1 Free Dairy

Seafood Snacktime Search

4.0

3.0 View Shopping Cart This button will take users to their shopping cart where they can review and modify the goods they currently have in their shopping cart. Clicking on this button will take users to the Shopping Cart Page on Pg.13. This option will not be visible to Browsing Guests (guests who could not provide a serviceable Postal Code). Future such instances will be similar in functionality.

4.0 Primary Categories These placeholders represent the primary categorization of goods within the shopping application. Users are able to click on any part of the row in order to get the secondary categories on Pg.10. At any point, selecting these primary categories will close the current category tree. Future such instances will be similar in functionality.

5.0 Search Function This placeholder will allow users to access the application search function outlined on Pg.11.

5.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Shop 2 Page Notes

1.0 Primary Categories - Activated After the user selects the primary category, this placeholder reacts by opening the secondary category underneath it, scrolling the entire list downwards. The arrow on that particular line also points downwards to denote this. Future such instances will be similar in functionality

2.0 Secondary Categories Carrier

12:00 PM

Carrier

12:00 PM

Back

Shop View User Account

Back

Shop

You have 0 items in cart View Shopping Cart

Artisan Bread Sandwich Bread

Beverages

You have 0 items in cart

View User Account

Air Miles 1.0 Baked Goods Baked Snacks

These placeholders represent the secondary categorization of goods within the shopping application. Users are able to click on any part of the row in order to get the tertiary category in the following frame. At any point, selecting one of these categories will close the current category tree up until the secondary categories. Future such instances will be similar in functionality

3.0 Category Selection - Activated After the user selects a secondary category, this placeholder reacts by opening the tertiary category underneath it, scrolling the entire list downwards. The arrow on that particular line also points downwards to denote this. Future such instances will be similar in functionality

View Shopping Cart

Air Miles Baked Goods 2.0

4.0 Items Category These rows of placeholders will contain specific items with the secondary category. Includes an image that can be selected to take the user to the item information page shown on Pg.12. The item‟s name, its price, and the option to add the item to the shopping cart will also be included.

Baked Snacks Artisan Bread

3.0

Item 1

$X.XX

Buy

Item 2 Item 2

$X.XX $X.XX

Buy

4.0

5.0 Purchase Item This placeholder will be a button that will allow the user to add the good to his or her shopping cart. Users can press this button several time and each time following that will add the item to the cart again. As items are added to the users shopping cart the number of bought items will be reflected in the „You have – items in cart‟ display. Future such instances will be similar in functionality

5.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Search Function Page Notes

1.0 Search Function In this placeholder users are able to search the application database based on imputed keywords. Items that match the keyword will be populated as listed items as shown in the example in the second frame. Users are able to interact with these listed items as if in the main shopping area. Entering new keywords will repopulate the list.

Carrier

12:00 PM

Carrier

12:00 PM

Back

You have 0 items in cart

View User Account

View Shopping Cart

Shop

You have 0 items in cart

View User Account

1.0

Q W E

View Shopping Cart

G H

N M

123

space

Item 1

$X.XX

Buy

Item 2

$X.XX

Buy

Item 3

$X.XX

Buy

L Õ

Enter

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Item Information Page Notes

1.0 Item Information This placeholder will contain all pertinent information of a selected good such as, manufacturer, nutritional information, listed ingredients, a breakdown of volume per price, and any other pertinent information regarding the good.

Carrier

12:00 PM

Back

Item Information

You have 0 items in cart

View User Account

Item 1

View Shopping Cart

$X.XX

Buy

1.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Cart & Checkout Page Notes

1.0 Shopping Cart Confirmation This placeholder allows the user to start the process of buying the goods he or she has in the shopping cart by taking the user to the Customer Information confirmation screen in the next frame.

2.0 Price of Goods Total This placeholder will display the total amount which the listed items in the shopping cart will cost. As items are added or subtracted from the list this function will update in real-time. Carrier

12:00 PM

Carrier

12:00 PM

3.0 Shopping Cart Items Back

Shopping Cart

2.0

Price Item 1

$X.XX

Customer Information

You have 7 items in cart 1.0

Price of Goods: $X.XX Item

Back

4.0

Please ensure that the following information is correct

Proceed to Checkout

Quantity 5.0 1

3.0

Proceed

Credit Card XXXXXXXXXXXX5555

4.0 Customer Information Confirmation This placeholder allows the user to continue the process of buying the goods he or she has in the shopping cart by taking the user to the Delivery Options screen on Pg.14.

Update Credit Card

Item 2

$X.XX

Item 3

$X.XX

Item 4

$X.XX

2 1

6.0

These placeholder rows provide the users with a list of the total amount of goods that he or she has in her shopping cart. Besides the name and the price, there are two other functions that will allow the user to increase or decrease the number of that particular item to the shopping cart. Decreasing the number to zero removes the item from the list. The number in the box along the right updates automatically when the user utilizes the increase/decrease function. Future such instances will be similar in functionality

Delivery Address XXXX Lorum Ipsum Street. Vancouver, B.C. X#X #X#

5.0 Credit Card Information This placeholder is required from the user to determine form of payment for the ordered goods. For users who are registered members of the application, this entries will already be listing the credit card number on file. Unregistered users or users who have a different credit card will have to make use of the Update Credit Card button below to input that information.

3 Update Delivery Address

Need Help? Visit our Help/FAQ section for more details.

7.0

6.0 Delivery Address Information This placeholder is required from the user to provide the address from which the purchased items will be delivered. For users who are registered members of the application, this entries will already be listing the delivery address on file. Unregistered users or users who have a different credit card will have to make use of the Update Delivery Address button below to input that information

7.0 Help/FAQs link This link will allow the user to review the process of using the application as well as clear up any other terms or questions they may have. This link will take the user to the Help/Frequently Asked Questions page on Pg.24.

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Delivery Options Page Notes

1.0 Delivery Options Confirmation This placeholder allows the user to continue the process of buying the goods he or she has in the shopping cart by taking the user to the Confirm Order screen on Pg.15.

2.0 Delivery Time Window Selection These placeholders will be radial buttons that will list the various times of delivery windows available to them based on the time that the order is placed. Prices are associated after every option. Carrier

12:00 PM

Carrier

12:00 PM

3.0 Following Day Delivery Option Back

Delivery Options

Back

Following Day Delivery Setup

1.0

Please select the desired delivery time window

Selecting this option and proceeding will take users to the Following Day Delivery Setup screen in the following pane.

Please select the desired Day and time for delivery

Proceed

4.0

After selecting the options available to the user in order to set up a following day delivery, this placeholder button is used to confirm the selection. Pressing this button will return users to the Delivery Options screen in the prior frame with the â&#x20AC;&#x17E;Setup following day deliveryâ&#x20AC;&#x; option selected and the price of that delivery displayed to the right of it. All parameters are required to be selected before the application will allow the user to proceed.

Proceed

*From point of time which order was submitted

March 11

1 Hour Delivery Window

2.0

2 Hour Delivery Window 4 Hour Delivery Window 8 Hour Delivery Window

$12.95 $9.95

17 5.0

$6.95 $4.95

Setup following day delivery

Select Day

Select One

Select Time

Select One

Select Delivery Window Select One

3.0

Need Help? Visit our Help/FAQ section for more details.

4.0 Following Day Delivery Option Confirmation

5.0 Calendar

6.0

This placeholder will provide a calendar tool that provides the user with a visual confirmation of his or her delivery option settings. These is also a symbol both representing the current day and the day that the user selected for the day of the delivery. Future such instances will be similar in functionality.

6.0 Following Day Delivery Options These placeholders represent pull down menus from which users can select the parameters of the delivery. Day options will include the following 7 days starting the day after the day it currently is. The option for times will allow for all Safeway operational hours up to the last hour of operation. The Delivery Window option will reflect the same selections displayed in the prior frame. Future such instances will be similar in functionality.

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Confirm Order & Receipt for Guests Page Notes

1.0 Confirm Order Confirmation This placeholder will allow users to confirm that all the information is in order and purchase the goods in his or her shopping cart. Clicking on this button take users to the receipt options in either the next frame if the user is an unregistered guest or to Pg. 16 if he or she is already a registered member of the Safeway application.

2.0 Amount Totals Carrier

12:00 PM

Carrier

These text placeholders will provide the user with the total amount the purchase will come to after adding the cost of delivery and applicable taxes.

12:00 PM

Back

Confirm Order

3.0 Listed Items

You have 7 items in cart

1.0

Please confirm that this order is correct

Proceed

$X.XX

Tax: Delivery: Total Items:

+$X.XX +$X.XX $X.XX x x x x

Item Item Item Item

4.0 Estimated Delivery Time

Please expect delivery

Total Price:

1 2 1 3

This placeholder will allow the user to view all the items and their quantity in the shopping cart.

Thank You for your order! 4.0

1 2 3 4

The text within these parenthesis are variable values depending on the delivery window option that the user selected. Future such instances will be similar in functionality.

[Within 1 Hour] If you would like to keep your receipt, please provide an E-mail address for it to be sent to. Registered members are able to keep their receipts on their phones

2.0

5.0 Receipt â&#x20AC;&#x201C; Email delivery This placeholder will allow unregistered guests who had placed an order to input an email address for the resulting receipt to be emailed to them. Clicking on this placeholder will bring up the standard keyboard to enter the email address. After imputing their email address, the receipt will be sent automatically and the user will be taken to the Shopping Complete frame on Pg.16.

E-Mail Address:

5.0

E-Mail to this address

6.0 3.0

6.0 Register to be Member

This Placeholder provides the unregistered guest the opportunity to register for an account. This takes the user to Create My Account frame on Pg.5 before being returned to this screen.

Proceed without receipt

7.0

7.0 Proceed Without Receipt This placeholder gives the option for unregistered guests to discard the receipt for the current purchase. After imputing their email address, the receipt will be sent automatically and the user will be taken to the Shopping Complete frame on Pg.16.

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Receipt for Members/Shopping Complete Page Notes

1.0 Receipt â&#x20AC;&#x201C; Registered Members Delivery This placeholder will allow registered members who had placed an order to have the resulting receipt to be emailed to them. The entry will already contain the user email address if any in the field though the user can choose to update the email address if necessary. Once confirmed the receipt will be sent automatically and the user will be taken back to the Shopping Complete frame on the next frame.

2.0 Receipt â&#x20AC;&#x201C; Store on Phone Carrier

12:00 PM

Carrier

12:00 PM

This placeholder gives the registered member the option to have the receipt stored on his or her smart phone. Selecting this option will then take the user to the Shopping Complete page in the next frame.

3.0 Variable Response Confirmation

Thank You for your order!

The text within these parenthesis are variable values depending on the receipt option that the user selected.

Please expect delivery

1.0

4.0 Purchase Complete

Your receipt has been [sent/stored/discarded]

[Within 1 Hour] Email receipt to your email address or keep receipt on this phone?

This placeholder marks the end of the one time delivery process, taking the user back to the main shopping page on Pg.9.

3.0

user01@email.com E-Mail to this address

Back to Shopping

4.0

Update Email Address

Keep receipt on this phone

2.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

No User Account Page Notes

1.0 No User Account Notification This notification is generated for unregistered guests who select the „View User Account‟ button. The notification provides the benefits of registering, an option to register via the process outlined in the „Create My Account‟ page on Pg.5. and the option to continue shopping as a guest, returning the user to the Main Shopping page as on Pg.9.

Carrier

12:00 PM

Back

Shop

You have 0 items in cart

View User Account

View Shopping Cart

! Air Miles Postal Code Baked Goods 1.0 Bakery

You are currently logged in as a guest, only user account holders are able to access the member areas for increased functionality. Would you like to sign up for a free user account? Submit

Yes

No, Proceed Shopping as a Guest

Beaverages Buy 1 Get 1 Free Dairy Back

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

User Account Page Notes

1.0 My Account These text placeholders will provide all the account information that the registered user has provided.

2.0 Regular Scheduled Deliveries This placeholder will list the Regular Schedule Deliveries the registered user currently has setup on his or her account.

3.0 Update Account Information Carrier

12:00 PM

Carrier

12:00 PM

Back

This placeholder button will take the user to the Update Account Information frame on Pg.19. Back

4.0 View Receipts My Account

1.0

First Name: Last Name: Address Type: Address: City: Postal Code: E-mail address: Credit Card:

Club Card Number:

This placeholder button will take the user to the Receipts frame on Pg.20.

My Account Scheduled Regular Deliveries

Jane Doe Apartment XXXX Lorum Ipsum St. Vancouver X#X #X# user01@email.com XXXXXXXXXXXX5555 123412341234

Regular Scheduled Deliveries

5.0 Update Regular Delivery Lists This placeholder button will take the user to the Regular Deliveries List on Pg.21.

3.0 Update Account Information

2.0

4.0

View Receipts

Update Regular Delivery Lists

5.0

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Update Account Information Page Notes

1.0 Update Account Information Users are able to update their account information here if necessary. Should the users Postal Code changes to one that is currently unserviceable, the system generates a user such as the one on Pg.7 and removes any regular scheduled delivery lists in place.

2.0 Update Account Information Carrier

12:00 PM

Carrier

12:00 PM

Back

Update Account Information

After updating their information the system checks to see if any information is missing. If so, the application will generate an error an have the user check again to make sure that all the necessary information is present. Back

Update Account Information

* Postal Code: City: Vancouver

X#X #X#

* E-Mail Address: Mrs.

1.0

* First Name:

user01@email.com * Retype E-Mail Address:

Jane * Last Name: * Choose Password:

Doe

********** Address Type:

Apartment

* Address Line:

* Retype Password:

2.0

XXXX Lorum Ipsum Street Update Account Information

City: Vancouver

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Receipts Page Notes

1.0 Receipt List This placeholder will contain all the stored receipts on file from the user, ordered by purchase date. Time of order and the total amount of the particular purchase will also be provided. Users are able to highlight a particular list and then press the view button to be taken to the following frame.

2.0 Receipt Carrier

12:00 PM

Carrier

Back

Receipts

1.0

This place holder will contain the receipt information of any particular stored receipt that the user wishes to view.

12:00 PM

Back

View Receipts

Receipts March 11th , 2011. – 14:23 – $124.22 March 09th , 2011. – 11:35 – $69.32

2.0

View Receipt

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Delivery Lists/Add List Page Notes

1.0 Regular Deliveries List This placeholder will contained a list of all the regular delivery orders currently setup on the users phone. The lists will be categorized by date of creation. Users must select a list in order to make use of either the „Remove a list‟ or „Update a list‟ option.

2.0 Add a Regular Delivery Order Carrier

12:00 PM

Carrier

12:00 PM

Back

Regular Delivery

Regular Deliveries List

1.0

Scheduled Regular Deliveries

5.0

You have 0 items in cart

Create Regular Delivery Order

Tuesdays: 1300, 2 hour window

Air Miles Baked Goods Bakery

2.0 Add a Regular Delivery Order

Remove a Regular Delivery Order

3.0

Update a Regular Delivery Order Need Help? Visit our Help/FAQ section for more details.

4.0

Beaverages Buy 1 Get 1 Free Dairy

This option will allow the user to setup a new regular delivery order with this button. After selecting this option the user will be taken to a modified version of the main shopping cart (such as on Pg.9.) except that the goods added to the cart cane be setup to be delivered on a regular predetermined basis rather than as a one time purchase. Clicking on this button will take user to the Regular Delivery shopping cart in the following frame.

3.0 Remove a Regular Delivery Order This option will allow users to remove a regular order they had setup beforehand. A particular order must be selected from the list above first however.

4.0 Update a Regular Delivery Order This option will allow users to update a regular order they had setup beforehand. A particular order must be selected from the list above first however. Selecting this option will take the user to the Updating a List frame on Pg. 23.

5.0 Create Regular Delivery Order While in the Regular Delivery shopping cart, the View User Account and View Shopping Cart options are replaced by the Create Regular Delivery Order button. After selecting the desired goods to be regularly delivered, the user will be taken through the purchasing process that is outlined on Pgs. 13 and Pg. 15. except for scheduled deliveries users will be forwarded to the Choose Regular Delivery Schedule frame on Pg.22.

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Choose Regular Delivery Schedule Page Notes

1.0 Frequency

Carrier

12:00 PM

Carrier

When creating a Regular scheduled order, the additional option of frequency is present in order to allow for the user to select the basis of frequency at which the contents of the list will be delivered. Some options provided: 1 time weekly The first [day] of the month The second [day] of the month The third [day] of the month The fourth [day] of the month Every [x] days. Etc.

12:00 PM

Back

Choose Regular Delivery Schedule

Please select the desired schedule for regular delivery

Proceed

March 11 M

Future such instances will be similar in functionality

2.0 Calendar Display Proceed

Based on the day and frequency that the user has set up the calendar display will be updated to reflect the schedule. Future such instances will be similar in functionality

March 11

S 6

2.0 Select Day

Select One

Select Day

Tuesday

Select Time

Select One

Select Time

1300

Select Delivery Window Select One

Frequency

Select One

Select Delivery Window 2 hours â&#x20AC;&#x201C; $9.95

1.0 Frequency

1 time weekly

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Updating a List Page Notes

Carrier

12:00 PM

Carrier

12:00 PM

Back

Update List

You have 9 items in cart

Price of Goods: $X.XX Item

Back

Proceed to Delivery Options

Update Delivery Options Please select the desired schedule for regular delivery

Price Item 1

$X.XX

Item 2

$X.XX

Item 3

$X.XX

Item 4

$X.XX

Proceed

March 11 M

3 2 1 3

Select Day

Select One

Select Time

Select One

Select Delivery Window Select One

Frequency

Select One

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

Help/FAQs Page Notes

1.0 Help/Frequently Asked Questions This placeholder will contain detailed instructions and clarifications for the operation of the application as well as explain terms and answer frequently asked questions. Customer Service contact information will also be present for further inqueries.

Carrier

12:00 PM

Back

Help/Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

Commodo consequat. 1.0 Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioqueciviuda.

not indicative of final design or nomenclature

Safeway Canada Document: Wireframes Last Edited: 3/26/2011

Author: Robert Soo

User Flow Diagram

Proceed as a Guest Register?

Input postal code for delivery?

Input Email

Yes

No Yes Postal code necessary for delivery

No Input Info

Let you know when it is available?

Proceed anyways?

No Postal code provided?

Yes Input Info Postal code provided?

Let you know when it is available?

Postal code necessary for delivery

Input Email

Yes

Postal code inside of delivery area? No

Yes

Postal inside of delivery area?

Sorry, no delivery available to this location

Sorry, no delivery available

No Yes

Yes

Start

Yes

Purpose of user accounts

Yes

Sorry, no delivery available

Remove delivery lists?

Existing user? No

No Update purchasing totals Setup Delivery Time

Confirm Credit Card and Address Information

Display items in cart/total

Checkout

No Postal code changed?

Shop

View User Account

Yes

User account

Update Information

Update Info

Inside of delivery area?

Yes

User is a registered? No

View Receipts

Input Email Regular deliveries

User a Member or a Guest? Confirm Order

Member

Receipt added to User Account

Keep receipt, have it emailed, or update email?

Keep Add new regular delivery list

View regular deliveries lists

Add/Remove items from regular delivery list

Update a regular delivery list

Receipt emailed to address on file Guest Email

Have receipt emailed to you or discard?

Discard

Email Change a delivery time Input Email

View Receipts

Remove a regular delivery list

Yes