William D Judge | Freelancer 2013 Kroger.Com Deli Bakery Ordering (Ui Prototyping)

2013 Kroger.com Deli-Bakery Ordering (UI Prototyping)

Deli-Bakery Online Ordering CONCEPTUAL DESIGN WIREFRAMES Iteration 1 Created By: Bill Judge, User Experience Architect October 2013 © Copyright 2015 The Kroger Co., Confidential Deli Bakery Online Ordering National Rollout October 2013 2 “Home” page with sign in modal dialog. 3 “Home” page with personalized welcome message and sign out / my account links displayed for authenticated user. 4 “Home” page with repurposed search box with Solr Search enabled. 5 Search results page. 6 “Department” page with faceted navigation in left sidebar. 7 “Sandwich Wedges PDP. 8 “Shopping cart” page. No changes from current. Included to demonstrate flow. 9 “Checkout method” page. Guest or returning user with account. 10 “Checkout” page with fields pre-populated. 11 “Checkout” page with order-level special instructions and unselected checkbox allowing anonymous user to provide password to create an account. 12 “Checkout” page with order-level special instructions and SELECTED checkbox allowing anonymous user to provide password to create an account. 13 “Review order” page with order-level special instructions. 14 “Order Confirmation” page with order-level special instructions. 15 “Select a Store” page. Modal dialog displayed warning user of changes to contents of shopping cart that would result from changing stores. 16 “”Select a Store” page. Popover displayed prompting user to sign in if he has an account. 2 Welcome! Sign In | Create an Account “Sign In”&triggers Deli Bakerymodal sign in dialog below. Search party trays and cakes Home Departments Weekly Ad Coupons Promotions Pharmacy “Create an Account” directs user to customer.[banner].com registration page. Our Brands Fuel | Deli and Bakery | Specialty Products Cakes Disney For Boys Need help? 1 - X Change store You’re Shopping Store: Harper’s Point 1234 Main St. Cincinnati, OH 54321 Create an Account Sign In For Girls Sign in to view your weekly ad and Plus Card Movies Community points, see what’s happening at your local store, and more. Sign in to view your weekly ad and Plus Card points, see what’s happening at your local store, and more. New Cakes Weekly Ad Sign up to receive your weekly ad by email [+] Feedback Special Occasions E-mail Address: Superheroes, Comics & Cartoons Plus Card View your Plus Card points and savings Password: Party Trays Shopping List Create and save a shopping list Appetizers Email Exclusives Receive emails for specials oﬀers, coupons & more Breakfast & Breads Chicken Remember me Condiments & Dips Desserts Sign In Coupons Download coupons directly to your Plus Card Forgot password? Fruits, Vegetables & Cheeses Sign user in, close modal and direct Salads & Sides Create an Account to “Home” page. Sandwiches, Wraps & Deli Meats Order a Party Tray Order a Cake “Create an Account” directsipsum user todolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem customer.[banner].com registration page. adipiscing elit. Cras risus ligula, rutrum non adipiscing elit. Cras risus ligula, rutrum non Direct user back to Deli-Bakery storefront ultricies ac, vehicula nec ligula. once registration isultricies complete.ac, vehicula nec ligula. Order a Party Tray Order a Cake Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons Personalized welcome message and sign Deli & Bakery out / my account links displayed for authenticated users. Promotions Pharmacy Cakes Disney Shopping cart moved to header. Our Brands | Deli and Bakery | Specialty Products Fuel Community Need help? 1 - You’re Shopping Store: Harper’s Point 1234 Main St. Cincinnati, OH 54321 Help number placed flush store Change against right margin. For Boys For Girls Movies New Cakes [+] Feedback Special Occasions Superheroes, Comics & Cartoons Party Trays Appetizers Breakfast & Breads Chicken Condiments & Dips Desserts Fruits, Vegetables & Cheeses Salads & Sides Sandwiches, Wraps & Deli Meats 2 Order a Party Tray Order a Cake Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies ac, vehicula nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies ac, vehicula nec ligula. Order a Party Tray Order a Cake Welcome back, Jane! My Account | Sign Out Search Coﬀ party trays and cakes Home Departments Repurposed search box scoped SUGGESTED KEYWORDS only to deli-bakery catalog. Weekly Ad Coupons Promotions Deli & Bakery Pharmacy Our Brands coﬀee | Deli and Bakery | Specialty Products Fuel Community Need help? 1 - coﬀee Cakes coﬀee Disney coﬀee For Boys [+] Feedback For Girls Solr search type ahead, You’re Shopping Store: Harper’s Point keywords, etc. 1234 Main St. Cincinnati, OH 54321 Change store CATEGORY Movies Kitchenware > Coﬀee Makers New Cakes Kitchenware > Coﬀee Makers Special Occasions Kitchenware > Coﬀee Makers Superheroes, Comics & Cartoons Kitchenware > Coﬀee Makers Party Trays Appetizers Breakfast & Breads Chicken Condiments & Dips Desserts Fruits, Vegetables & Cheeses Salads & Sides Sandwiches, Wraps & Deli Meats 2 Order a Party Tray Order a Cake Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies ac, vehicula nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies ac, vehicula nec ligula. Order a Party Tray Order a Cake Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons Deli & Bakery Promotions Pharmacy Our Brands Category Appetizers (15) Fuel Community Need help? 1 - | Deli and Bakery | Specialty Products | Search: Disney Narrow your results by: Search Results Your search for disney produced 33 results. You can refine your search using the Advanced Search options. Breakfast & Breads (15) Chicken (15) Displaying products 1-12 of 33 1-3 [+] Feedback Condiments & Dips (15) Desserts (15) Faceted search results. Fruits, Vegetables & Cheeses (15) Salads & Sides (15) Sandwiches, Wraps & Deli Meats (15) Brand DISNEY Belle Signature Petite DISNEY Cars - Mater Signature Petite DISNEY Cars 2 World Grand Prix DISNEY Cinderella Signature Petite $34.99 $34.99 $34.99 $34.99 Add to Cart Add to Cart Add to Cart Add to Cart DISNEY Belle Signature Petite DISNEY Cars - Mater Signature Petite DISNEY Cars 2 World Grand Prix DISNEY Cinderella Signature Petite $34.99 $34.99 $34.99 $34.99 Add to Cart Add to Cart Add to Cart Add to Cart Boar’s Head (15) Murray’s (15) Other (15) Price Less than $100 (15) Between $100 and $200 (15) Between $400 and $500 (15) Servings 4-6 (15) 6-12 (15) 12-16 (15) 2 Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons Deli & Bakery Promotions Pharmacy Our Brands Fuel Community Need help? 1 - | Deli and Bakery | Specialty Products | Party Trays Narrow your results by: Party Trays Category Appetizers (15) Breakfast & Breads (15) Chicken (15) Department pages (Party Trays, Cakes) utilize faceted navigation. Condiments & Dips (15) [+] Feedback Desserts (15) Fruits, Vegetables & Cheeses (15) Salads & Sides (15) Sandwiches, Wraps & Deli Meats (15) Brand Boar’s Head (15) Appetizer Murray’s (15) Other (15) Price Less than $100 (15) Between $100 and $200 (15) Between $400 and $500 (15) Servings 4-6 (15) 6-12 (15) 12-16 (15) Featured Products 2 Deli Meat & Cheese Sandwiches Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad 2 Deli & Bakery Coupons Promotions Pharmacy Our Brands Fuel Community Need help? 1 - | Deli and Bakery | Specialty Products | Party Trays | Sandwiches | Sandwich Wedges Sandwich Wedges $26.99 [+] Feedback Choose from chicken or tuna salad on white, wheat or both. Great with any of our veggie or fruit platters! Serves 12-16. Please specify choice of chicken or tuna salad in the special instructions box below. Quantity:* 1 Breads:* White Wheat Both Filling:* Chicken Salad Tuna Salad Special Instructions: Added options for filling. Type instructions here. Number of Characters Left:250 Add to Cart Price shown does not include taxes or discounts.Prices, promotions and item availability may vary by store and are subject to change. Ingredients Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons Deli & Bakery Promotions Pharmacy Our Brands Fuel Community Need help? 1 - | Deli and Bakery | Specialty Products | Shopping Cart Shopping Cart Continue Shopping Checkout Item Quantity [+] Feedback Batman - The Dark Knight Rises Size: 1/4 Sheet (serves 12-15) Message: Lorem ipsum dolor Icing Type: Buttercreme Special Instructions: Make it tasty 1 Directs user checkout methodItem pageTotal UnittoPrice (next slide), where user has choice to check out as guest or sign in. $22.99 $22.99 $22.99 $22.99 REMOVE Batman - The Dark Knight Rises Size: 1/4 Sheet (serves 12-15) Message: Lorem ipsum dolor Icing Type: Buttercreme Special Instructions: Make it tasty 2 No changes to this page. Including to demonstrate flow. 1 REMOVE This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. Subtotal: $45.98 Order Total: $45.98 Checkout Welcome! Sign In | Create an Account Search party trays and cakes Home Departments Weekly Ad Coupons 2 Deli & Bakery Promotions Pharmacy Our Brands Fuel Community Need help? 1 - Returning Customers New Customers & Guests Sign in to make checkout a breeze. Check out without signing in.You are not required to have an account to shop with us. Select the button below to proceed. E-mail Address: Continue Checkout Password: [+] Feedback Directs user to checkout page. Remember me Sign In & Check Out Forgot password? Signs in user and directs to checkout page. Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons 2 Deli & Bakery Promotions Pharmacy Our Brands Fuel Community Need help? 1 - 1 Customer Information First Name: * Last Name: * Jane Doe Confirm E-mail Address: * E-mail Address: * - [+] Feedback - Alternate Phone: Phone: * Optional - Pre-populate fields with Address 1: * known customer data. Address 2: 1234 Main St. Optional City: * State or Province: * Cincinnati Ohio ZIP/Postal Code: * 54321 Plus Card Number or 10-Digit Alternate ID:- 2 Order Details Enter the 12 digits on the back of your card, starting with the number 4. Don’t carry a Plus Card when you shop with us? Enter your 10-digital alternate ID instead. By default, your alternate ID is the phone number you used when you applied for your Plus Card. Heading changed to “Order Details.” Plus Card Number or 10-Digit Alternate ID: Enter the 12 digits on the back of your card, starting with the number 4. Don’t carry a Plus Card when you shop with us? Enter your 10-digital alternate ID instead. By default, your alternate ID is the phone number you used when you applied for your Plus Card. - 2 Order Details Heading changed to “Order Details.” Pickup Date: Pickup Time: Shows earliest available pickup date based on the items in your cart. 7/4/2013 1:00 PM - 1:20 PM Shows earliest available pickup time based on store hours and preparation time for the items in your cart. Special Instructions: Type instructions here. [+] Feedback Added order-level special instructions. Number of Characters Left:1000 Save time. Create an account Simply create a password and we’ll create an account that you can use to save time and make future orders a breeze! Back Save & Continue At this point in the checkout process, we have captured an anonymous user’s email address. We can set the store the user is placing the order with as preferred store. If we capture a password, we’ll have critical mass for account creation. Password and confirm password fields will be exposed when user checks the “Save time. Create an account.” checkbox (see next screen). Plus Card Number or 10-Digit Alternate ID: Enter the 12 digits on the back of your card, starting with the number 4. Don’t carry a Plus Card when you shop with us? Enter your 10-digital alternate ID instead. By default, your alternate ID is the phone number you used when you applied for your Plus Card. - 2 Order Details Heading changed to “Order Details.” Pickup Date: Pickup Time: Shows earliest available pickup date based on the items in your cart. 7/4/2013 1:00 PM - 1:20 PM Shows earliest available pickup time based on store hours and preparation time for the items in your cart. Special Instructions: Type instructions here. [+] Feedback Added order-level special instructions. Number of Characters Left:1000 Save time. Create an account Simply create a password and we’ll create an account that you can use to save time and make future orders a breeze! Create Password: * Passwords are case-sensitive and may include special characters. Passwords must: Required Verify Password: * Required Back Save & Continue - Be 6-12 characters long - Include at least 1 letter and 1 number Welcome back, Jane! My Account | Sign Out Search party trays and cakes Home Departments Weekly Ad Coupons 2 Deli & Bakery Promotions Pharmacy Our Brands Fuel Community [+] Feedback Need help? 1 - Customer Information Pickup Information First Name: Jane Pickup Date and Time: July 4, 2013 | 1:00 p.m. Last Name: Doe Store Information: E-mail Address: - Phone: - Kroger 1234 Main St. Cincinnati, OH- Plus Card/Alt ID: - Cart Summary COUPON AVAILABLE Edit Cart ITEM UNIT PRICE QUANTITY TOTAL Antipasto and Olive Platter SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Batman - The Dark Knight Rises SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Italian Meats SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Special Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies. Added order-level special instructions. Billing Summary Subtotal: $45.98 Balance Due at Pickup: $45.98 + tax Back Submit Order This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. Welcome! Sign In | Create an Account Search party trays and cakes Home Departments Weekly Ad Coupons 2 Deli & Bakery Promotions Pharmacy Our Brands Fuel Community Need help? 1 - Thank you for your order! You will receive a confirmation e-mail to verify your order. Your account for-was successfully created. To ensure that you receive email communcations, be sure to activate your account by clicking on the activation link that will be emailed to you soon. Pickup Date and Time: 7/4/2013 2:00 PM Order Placed: Store Information: Kroger 1234 Main St. Cincinnati, OH- [+] Feedback Order Number: 25506 COUPON AVAILABLE 6/12/2013 ITEM UNIT PRICE QUANTITY TOTAL Antipasto and Olive Platter SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Batman - The Dark Knight Rises SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Italian Meats SKU: Lorem ipsum dolor ait amet $22.99 1 $22.99 Special Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus ligula, rutrum non ultricies. Added order-level special instructions. Print This Page Continue Shopping This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. This is the price disclaimer. Subtotal: $68.97 Tax: $1.00 Discount: $0.00 Order Total: $69.97 1 Find Your Store Order By Web or Mobile 2 Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. 3 Pick Up at Store Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. X Find Your Store Find a Store Example:at “45140” or “Cincinnati, One or more items in your cart is not available this store Ohio” 54321 The following item(s) is not available at this store and will be removed from your shopping cart: Showing 1-5 ofAntipasto 18 stores 2 and Olive 1Platter 3 4 (1) x, $22.99 Kroger 1234 Main St. Cincinnati, OH 54321 - (1.2 miles) Shop This Store + - Are Krogeryou sure you’d like to change your store? 1234 Main St. Cincinnati, OH 54321 Yes, Change My Store - (1.2 miles) Shop This Store Keep My Current Store Kroger store, close modal, update contents 1234 MainChange St. cart, and direct (1.2 user to “Home”Shop page. This Store miles) Cincinnati,of OH 54321 - Kroger 1234 Main St. Cincinnati, OH 54321 - Kroger 1234 Main St. Cincinnati, OH 54321 - (1.2 miles) Shop This Store (1.2 miles) Shop This Store Welcome! Sign In | Create an Account Search party trays and cakes Home Departments Weekly Ad Coupons Already Deli have & Bakery an online account? Sign in for exclusive savings, and to make checkoutPharmacy a breeze! Promotions Our Brands Fuel Sign In | Deli and Bakery | Select a Store No thanks Community Display this popover once1 per Need help? - session for anonymous users. [+] Feedback Triggers modal sign in dialog. 1 Find Your Store Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. 2 Order By Web or Mobile Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. 3 Pick Up at Store Aenean ornare imperdiet neque, sit amet gravida lorem tempus vel. Find Your Store ZIP/Postal Code or Address of your store 2 Find a Store Example: “45140” or “Cincinnati, Ohio”