API GUIDELINES DRAFT

Transcription

1 API GUIDELINES DRAFT..05

2 API GUIDELINES TABLE OF CONTENTS API Introduction 3 Tracking via SMS Tracking - Real time Requirements 4 Messaging & Usage 5 Implementing for Mobile 3 Introduction 6 Overview 4 Service Description 7 User Flow - Mobile 5 Usage Guidelines 8 Product Page - Displaying 6 Shopping Cart - Selecting 7 Implementing for Web 9 Delivery Method - Collecting Supplemental Info 8 Overview 0 Delivery Method - More Info 9 Userflow - Web Track Delivery - Descriptors 30 Product Page - Implementing How to Calculate your Delivery TIme 3 Shopping Cart 3 Confirmation & tracking via CTA 3 Delivery Method - Collecting Supplemental Info 4 Tracking via 33 Delivery Method - Info Icon 5 Tracking via SMS Notifications Delivery Method - Descriptors 6 How to Calculate Your Time 7 UI Assets 35 Confirmation & Tracking via CTA 8 UI Assets 36 Adding - Inline Tracking 9 CSS File 37 Tracking via 0 Logotype

3 API GUIDELINES 3 INTRODUCTION Tapping into our API gives your business the ability to offer customers the on-demand delivery option. Please follow these guidelines when promoting and incorporating our service in your app and web user flows.

4 API GUIDELINES 4 REQUIREMENTS Developers must follow these guidelines to activate the feature within their app or website and whenever is promoted in marketing communications. The information in these guidelines is subject to change. For updates, please refer to the Uber Developer Portal: Uber reserves the right to withdraw permission to use and Uber provided user interface (UI) assets anytime their use is inconsistent with these guidelines or is otherwise deemed inappropriate by Uber.

5 MESSAGING & USAGE

6 API GUIDELINES 6 INTRODUCTION The concept of on-demand delivery will be a new one to many of your customers, and we want to help you clearly communicate what is and how it works. There are also usage guidelines around the brand name and service description that you ll need to appropriately follow.

7 API GUIDELINES 7 Service Description Short Description is an on-demand delivery network powered by Uber that lets you track the exact location of your delivery from any device. Long Description is an on-demand delivery network powered by Uber. Once your order is picked up, you ll receive a text message with a link to track your delivery in real time on the map. So you always know exactly when it will arrive.

8 API GUIDELINES 8 Usage Guidelines DO In all instances, use in its entirety, with the U and RUSH in caps and no space between Uber and RUSH. Use on-demand delivery and delivery as the general descriptors of our service. Refer to the customer s courier as your courier. Or just refer to the delivery itself (i.e. Your delivery via will arrive in 5 minutes). DON T Shorten to Uber or RUSH. Use ride or shipment to describe the service. Refer to the courier as your Uber driver, Uber courier, driver, or courier.

9 Implementing for Web

10 API GUIDELINES 0 OVERVIEW For the most seamless web experience, we recommend providing users with a clear understanding of and a variety of ways to track their delivery once the order is complete.

11 API GUIDELINES USER FLOW Web PURCHASE We ve organized implementation considerations for each step of the user flow. PRODUCT PAGE SHOPPING CART CHECKOUT DELIVERY METHOD CONFIRMATION + TRACKING (CTA / INLINE) TRACKING VIA TRACKING VIA SMS

12 API GUIDELINES COMPANY NAME PRODUCT PAGE Placement Here s an example of how the option would appear on a product page. Product Name Description of the product Price Reviews ADD TO CART 3 4 Store pickup should be a separate category from shipping. should always be categorized under Shipping. If there s space, include the logo. In-Store Pickup Stores within 5 miles of 9405 Edit In Stock at: San Francisco Central The village at Colma Find in another store Shipping: Standard Shipping - FREE get it by 0//05 order by 3:00 p.m. Get it Sooner Today by 3pm via

13 API GUIDELINES 3 COMPANY NAME SHOPPING CART Placement Here s an example of how the option would appear item in your cart Product Name in stock Shipping Today by 3pm via change shipping In-Store Pickup 3 4 Qty: $00 should be an option alongside other shipping options. Choose a shipping method Standard Shipping est. delivery (Mon 4/0) in a shopping cart. Premium Shipping est. delivery (Wed 4/5) Express Shipping est. delivery (Tue 4/4) est. delivery (Today by 3pm)

14 API GUIDELINES 4 should be available as one of the shipping or delivery options. To ensure that the descriptor is accurate DELIVERY METHOD Collecting Supplemental Information requires a mobile phone number and address. Standard Shipping Two Day Today by 3pm via $.00 $8.00 $ and consistent, please see page 6 for details. When users select the delivery option, a modal will appear to allow them to fill out required fields: Mobile phone number We specifically require a mobile number to send SMS notifications to the user. Since this information may not have been previously collected in the user flow, we suggest the following method to collect it. Standard Shipping $.00 This field should only appear if the user did not previously provide this information in the checkout flow. address This field should only appear if the Two Day $8.00 user did not previously provide this information in the checkout flow. Today by 3pm via $6.00 Delivery instructions This field should always To provide you with real-time tracking, we need the following information. Mobile Number * appear. While it is optional for users, these instructions can help prevent failed delivery attempts and returns. Include hint text to encourage users to 3 Address * fill it out. Delivery Instructions Doorbell broken, please knock / Leave with roommate

15 API GUIDELINES 5 Delivery Method DELIVERY METHOD Info Icon Standard Shipping Two Day $.00 $8.00 Clicking the information icon will show a tool tip explaining the service. Always include this with the option. To help customers understand Today by 3pm via $6.00 The message in the tool tip should include everything that is shown in the example and a, always include a help icon with a link to learn more about the service. is an on-demand delivery network powered by Uber. Once your order is picked up, you ll receive a text message with a link to track your delivery in real time on the map. This allows you to always know exactly when it will arrive. link to learn more. You should be present to accept the delivery, unless otherwise specified in your Delivery Instructions. Learn more

16 API GUIDELINES 6 NAME BASED by 3pm today TIME BASED Today by 3pm via PRICE BASED $ Today by 3pm Example Example 4 Example 5 DELIVERY METHOD Descriptors Shipping Method Standard Shipping Next Day Shipping Estimated Delivery Apr 5 Apr 4 Get it by: Wed, Oct 4 - FREE Expedited $4.97 $6.97 Value Standard Arrives by Wed, Oct Arrives by Thu, Oct 5 Here are examples of how to best fit the delivery descriptor into existing delivery options. Example Today by 3pm Tue, Oct 3 - $.99 Express Today by 3pm - $6.00 $9.00 $7.00 Expedited Arrives by Wed, Oct 4 Arrives by Today, 3pm The delivery option should either read: Standard Delivery $6.00 (4-8 Days) ) by 3pm today ) Today by 3pm via nd Day $4.00 ( Business Days) $8 (Today by 3pm) Example 4 (Note: 3pm is used in the design for example purposes) Always include in the delivery method descriptor. Example 3 Choose a shipping method Standard Shipping est. delivery (Mon 4/0) Premium Shipping est. delivery (Wed 4/5) Express Shipping est. delivery (Tue 4/4) Wed, Oct 4 FREE Tue, Oct 3 $.99 Today by 3pm via $6.00 est. delivery (Today by 3pm)

17 API GUIDELINES HOW TO CALCULATE YOUR DELIVERY TIME Current Time Pick & Pack Quote Endpoint Round up Drop Off ETA :0pm 30 mins 30 mins 3:30pm 5 MIN Shipping Method Estimated Delivery Current Time Standard Shipping Apr 5 Pick & Pack This is determined by your business and Next Day Shipping Apr 4 Today by 3:30pm represents the estimated time you believe it will take to prepare the goods for delivery. 3 Quote Endpoint Drop Off ETA The delivery time from pick up and drop off location. This will be calculated by. 4 Round up to the nearest 5 minute increment

18 API GUIDELINES 8 CONFIRMATION & TRACKING via CTA COMPANY NAME CUSTOMER DELIVERY 3 PAYMENT 4 CONFIRMATION INFORMATION The logo, delivery ETA, and tracking CTA should also be added in the confirmation page. The CTA opens up the tracking browser. On the confirmation page, users can click TRACK YOUR DELIVERY button to take see the real-time tracking view provided by Thank you for your purchase Product Name Qty: Purchase Logo T-shirt $5.00 Medium See page for details. Include the logo wherever possible.. Shipping address: 3 Mission Street San Francisco, CA Delivery $6.00 Total $3.00 Delivery method Today by 3pm via TRACK YOUR DELIVERY

19 API GUIDELINES 9 Delivery status: COMPANY NAME CUSTOMER DELIVERY 3 PAYMENT 4 CONFIRMATION INFORMATION Preparing When a delivery has been submitted and accepted, the status is Preparing until the order has been marked as Ready for Pickup. ADDING Inline Tracking Thank you for your purchase Ready for Pickup After a merchant has marked an order as ready, the If you choose to integrate an inline tracking map, please ensure the courier is accurately rotating and the correct Uber assets are being used maps, car, pick up and drop off pins, couriers, branding, etc. See page 36 Product Name Qty: Shipping address: 3 Mission Street San Francisco, CA Track your delivery Purchase Logo T-shirt $5.00 Medium Delivery $6.00 Total $ status is Ready for Pickup. En Route After an order has been picked up, the status is En Route. Refer to the dropoff ETA as an absolute time (i.e. Dropping off at :36 pm) until the order has been picked up. When the order is picked up, refer to the dropoff ETA in minutes (i.e. 4 min), or NOW (if less than minute). PREPARING READY FOR PICKUP EN ROUTE ARRIVING COMPLETED If you decide to display courier info, please ensure that you re only displaying the following: 4 Arriving When a courier is within minutes of the dropoff address. photo, name, rating, and vehicle type. 5 Completed If using a wizard, please use consistent terminology as provided on the right. Unable to Deliver If the recipient isn t available to accept the delivery and the courier wasn t provided instructions to leave the package, please provide the following text: Your delivery from [Business Name] EN ROUTE Oops, something went wrong with your delivery. We re working on resolving the issue.

20 API GUIDELINES 0 TRACKING via Customers automatically receive an from that allow them to track their delivery in real time. 3 We ll populate your business name into the headline. We ll also provide the ETA of the delivery. This button will allow customers to track their delivery in real time on our map. If you d like to do your own custom , please ensure that the following information is displayed logo, delivery text, estimated delivery time, and tracking CTA. Your delivery from [Business Name] is on the way via The estimated time of delivery is :48 PM Note: Please use the exact text from the example shown on the right. TRACK YOUR DELIVERY 3

21 API GUIDELINES SMS - Delivery Status: TRACKING via SMS Customers will receive SMS notifications through their mobile 6:00 Saturday, December Sketch 9:4 AM % Your courier, (John) is arriving now. Track it now at [short link] Picked Up Your delivery from [Business Name] is on the way via. Track it now at [short link] Arriving Now Your courier (John) is arriving now. phones with up-to-date delivery status. If you would like to setup your Your courier, (John) is arriving now. Track it now at [short link] 3 Delivery Complete Your delivery from [Business Name] was a success. Thanks! own SMS service, please follow similar text as shown here.

22 API GUIDELINES TRACKING Real time If you don t create your own inline tracking, this is the tracker Uber will provide. JONATHAN 4.9 YOUR DELIVERY FROM COLE HAAN EN ROUTE Sketch 9:4 AM 4% 3 Mission Street Customers will receive an and SMS notifications from to track their delivery in real time. 4 MIN MIN JONATHAN 4.9 YOUR DELIVERY FROM COLE HAAN ARRIVING 3 Mission Street

23 Implementing for mobile

24 API GUIDELINES 4 OVERVIEW For the most seamless mobile experience, we recommend providing users with a clear understanding of and a variety of ways to track their delivery once the order is complete.

25 API GUIDELINES 5 PURCHASE USER FLOW Mobile We ve organized implementation considerations by each step of the user flow. PRODUCT PAGE SHOPPING CART CHECKOUT DELIVERY METHOD CONFIRMATION + TRACKING VIA CTA TRACKING VIA TRACKING VIA SMS

26 API GUIDELINES 6 PRODUCT PAGE Displaying Here s an example of how would appear on the product page. Sketch 9:4 AM COMPANY NAME Product Name Product Description 4% Price Store pickup should be a separate category from shipping. should always be categorized under Shipping. If there s space, include the logo. In-Store Pickup Select a store Shipping Standard Shipping - FREE get it by 0//05 Get it Sooner Today by 3pm via ADD TO CART ADD TO CART

27 API GUIDELINES 7 SHOPPING CART Selecting Sketch 9:4 AM 4% Sketch 9:4 AM 4% Sketch 9:4 AM 4% Sketch 9:4 AM 4% CONFIRMATION SHIPPING SHIPPING CONFIRMATION YOUR ITEM Product Name Product Description $30.00 Qty: Standard Shipping Two Day by 3pm today FREE $6.00 $0.00 Standard Shipping Two Day by 3pm today FREE $6.00 $0.00 YOUR ITEM Product Name Product Description $30.00 Qty: SHIPPING SHIPPING 3 Mission Street San Francisco, CA 9405 Shipping Standard Shipping - FREE change shipping To provide you with real-time tracking, we need the following information. Mobile Number * Address * 3 Mission Street San Francisco, CA 9405 by 3pm today $0.00 Leave at the frontdoor change shipping Subtotal Shipping Estimated tax Order Total $30.00 $0.00 $.40 $3.40 Delivery Instructions Leave at the frontdoor / roommate Subtotal Shipping Estimated tax Order Total $30.00 $0.00 $.40 $4.40 PLACE ORDER SAVE PLACE ORDER Shopping Cart Change shipping Shipping Select Dropdown Panel Customer Information Update Shipping To

28 API GUIDELINES 8 should be available as one of the shipping or delivery options. To ensure that the descriptor is accurate DELIVERY METHOD Collecting Supplemental Information Sketch 9:4 AM SHIPPING Standard Shipping 4% FREE Sketch 9:4 AM SHIPPING Standard Shipping 4% FREE 3 and consistent, please see page 30 for details. When users select the delivery option, a modal will appear to allow them to fill out required fields: Mobile phone number We specifically require a To use the service, the following information is required. Since this information may not have been collected previously, we suggest the following method to collect the remaining info. Two Day by 3pm today $6.00 $0.00 Two Day by 3pm today Mobile Number * Address * $6.00 $0.00 To provide you with real-time tracking, we need the following information. mobile number to send SMS notifications to the user. If the user provided their mobile number in the checkout flow, it should appear prepopulated here. If the user didn t provide a phone number or provided one that may or may not be a mobile number, the field should be empty. Delivery Instructions Doorbell broken, please knock address This field should only appear if the user did not previously provide this information in SAVE the checkout flow. Shipping Select Dropdown Panel Customer Information Delivery instructions This field should always appear. While it is optional for users, these instructions can help prevent failed delivery attempts and returns. Include hint text to encourage users to fill it out.

29 API GUIDELINES 9 DELIVERY METHOD More Info Include the information icon wherever is mentioned. Sketch 9:4 AM DELIVERY METHOD Standard Shipping Two Day Express Shipping by 3pm today 4% Free $6.00 $4.00 $0.00 Sketch 9:4 AM 4% DELIVERY METHOD Standard Shipping Free Two Day is an on-demand delivery $6.00 network powered by Uber. Once your order is picked up, you ll Today receive by a 3pm text message with with a link to $8.00 track your delivery in real time on the map. This allows you to always know exactly when it will arrive. More Info Clicking the information icon will show a tool tip explaining the service. Always include this with the option. The message in the tool tip should include everything that is shown in the example and a link to learn more. You should be present to accept the delivery, unless otherwise specified in your Delivery Instructions. Learn more CONTINUE CONTINUE

30 API GUIDELINES 30 NAME BASED by 3pm today TIME BASED Today by 3pm via PRICE BASED $ Today by 3pm Example Example 4 Example 5 DELIVERY METHOD Descriptors Shipping Method Standard Shipping Next Day Shipping Estimated Delivery Apr 5 Apr 4 Get it by: Wed, Oct 4 - FREE Expedited $4.97 $6.97 Value Standard Arrives by Wed, Oct Arrives by Thu, Oct 5 Here are examples of how to best fit the delivery descriptor into existing delivery options. Example Today by 3pm Tue, Oct 3 - $.99 Express Today by 3pm - $6.00 $9.00 $7.00 Expedited Arrives by Wed, Oct 4 Arrives Today by 3pm The delivery option should either read: Standard Delivery $6.00 (4-8 Days) ) by 3pm today ) Today by 3pm via nd Day $4.00 ( Business Days) $8 (Today by 3pm) Example 4 (Note: 3pm is used in the design for example purposes) Always include in the delivery method descriptor. Example 3 Choose a shipping method Standard Shipping est. delivery (Mon 4/0) Premium Shipping est. delivery (Wed 4/5) Express Shipping est. delivery (Tue 4/4) Wed, Oct 4 FREE Tue, Oct 3 $.99 Today by 3pm via $6.00 est. delivery (Today by 3pm)

31 API GUIDELINES Current Time Pick & Pack Quote Endpoint Drop Off ETA Round up :0pm 30 mins 30 mins 3:30pm HOW TO CALCULATE YOUR DELIVERY TIME 5 MIN Current Time Sketch 9:4 AM DELIVERY METHOD 4% Pick & Pack This is determined by your business and Standard Shipping FREE represents the estimated time you believe it Two Day $6.00 will take to prepare the goods for delivery. by 3:30pm today $ Quote Endpoint Drop Off ETA 4 The delivery time from pick up and drop off location. This will be calculated by. 4 Round up to the nearest 5 minute increment

32 API GUIDELINES 3 CONFIRMATION & TRACKING via CTA Sketch 9:4 AM CONFIRMATION 4% Thank you for your purchase Your order # is: ABC3 Product Name Product Description $30.00 Qty: Shipping Address Sketch 9:4 AM DELIVERY ETA 4 MIN MIN 4% The logo, delivery ETA, and tracking CTA should also be added in the confirmation page. The CTA opens up the tracking browser. Include the logo wherever possible. In-line tracking is not available for mobile. James Johnson 3 Mission Street San Francisco, CA Delivery Method by 3pm today TRACK YOUR DELIVERY JONATHAN 4.9 ON ITS WAY! YOUR DELIVERY FROM COLE HAAN DELIVERY FROM COMPANY X ARRIVING 3 Mission Street

33 API GUIDELINES 33 TRACKING via Sketch Inbox 9:4 AM 4% Sketch 9:4 AM 4% We ll populate your business name into the headline. Customers automatically receive Your delivery is on its way minutes ago Details We ll also provide the ETA of the delivery. an from that allow them to track their delivery in real time. MIN 3 This button will allow customers to track their delivery in real time on our map. If you d like to do your own custom , please ensure that the information shown in the example is present. Your delivery from [Business Name] is on the way via The estimated time of delivery is 9:43am TRACK YOUR DELIVERY 3 JONATHAN 4.9 YOUR DELIVERY FROM COLE HAAN ARRIVING 3 Mission Street

34 API GUIDELINES 34 TRACKING via SMS Customers will receive SMS notifications through their mobile phones with up-to-date delivery status. If you would like to setup your own SMS service, please follow similar text as shown here. 6:00 Saturday, December Your courier, (John) is arriving now. Track it now at [short link] Sketch 9:4 AM % Your courier, (John) is arriving now. Track it now at [short link] SMS - Delivery Status: 3 Picked Up Your delivery from [Business Name] is on the way via. Track it now at [short link] Arriving Now Your courier (John) is arriving now. Delivery Complete Your delivery from [Business Name] was a success. Thanks!

35 UI assets

36 API GUIDELINES 36 Bird s Eye Courier Icons (with rotation) Bird s Eye Courier Icons Use these only if you re able to rotate the icons on the map. UI ASSETS 3 4 Car without package (pre pickup) Car with package (post pickup) Bike messenger without package Bike messenger with package Use these UI assets if you re implementing your own tracking. 3 4 Flat Courier Icons (without rotation) Do not mix and match the assets with your company s own assets. Flat Courier Icons Pin Icons If you re unable to rotate the Bird s Eye icons on the map, use these Flat icons instead. 5 Car without package Note: You can find the UI assets here 6 Bike messenger Pin Icons 7 Pickup 8 Dropoff ETA Panel Courier Rating ETA Panel (CSS) 9 Panel that appears over pickup and dropoff pins. This will be in CSS. See page 37 for details. 9 0 Courier Rating 0 Courier Rating box with star (image)

37 API GUIDELINES 37 HTML CSS CSS FILE ETA Panel <div class= popover > <div class= popover header > Pickup.popover { background: #FFFFFF; border: px solid #CDCDD3;.popover header { background-color: #FFF4; border-radius: 3px 3px 0 0; </div> border-radius: 3px; color: #6B6B76; <div class= popover content > box-shadow: 0 px 3px rgba(34, 34, 49, 0.); font-size: px; 5 min font-family: Helvetica Neue, Arial, Helvetica, sans-serif; padding: 0 px; </div> line-height: ; } </div> min-width: 80px; position: absolute;.popover content { text-align: center; color: #0909A; text-transform: uppercase; font-size: 4px; } line-height: 3px; padding: 0 px;.popover:before { white-space: nowrap; border: px solid transparent; } border-top-color: #CDCDD3; content: ;.popover header { left: 50%; background-color: #FFF4; margin-left: -px; border-radius: 3px 3px 0 0; position: absolute; color: #6B6B76; top: 00%; font-size: px; } padding: 0 px; }.popover:after { border: px solid transparent;.popover content { border-top-color: #FFFFFF; color: #0909A; content: ; font-size: 4px; left: 50%; line-height: 3px; margin-left: -px; padding: 0 px; position: absolute; white-space: nowrap; top: 00%; } }

38 API GUIDELINES 38 Logotype You have the option to use either our horizontal or stacked logo in your user flow and promotions. Both can be found here For more information on usage, refer to the Brand Guidelines

39 Thank You