DPD App manual Guideline for DPD Apps version 1.0, May 2011
Table of content 1. Background 2. About this document 3. Global DPD App standards 4. Developing and designing ios Apps 5. Contact 6. Appendix 1. Developer Resources 2. App Store Registration 3. Apple Developer Account Page: 2
Background Strategic approach in web development 1. 2. 3. As agreed with the strategic marketing group (SMG) in May the following order has to be followed when developing mobile applications: 1. Website (application needs to be online ) 2. Mobile portal 3. App Website Contents and functionalities of a mobile portal should easily be transferrable onto Apps with regard to layout and technology. Mobile portal App It is the responsibility of the BUs to determine which functionalities and/or contents are included in their mobile portal or App. Page: 3
Background Apps + User experience Hardware integration Image/added value Visibility Mobile portal + Low cost Low maintenance Reach (any platform) Reliable standard (HTML) PRO and CON PRO and CON Reach Development cost Slightly less user experience Maintenance cost Adaptation _ cost Insecure future _ Page: 4
About this document Initial situation Mobile communication has developed dramatically in the last two years. Increasing numbers of smart phones Decreasing costs of using the mobile web We have since been focusing on developing a mobile (web) portal, adaptable for all BUs, covering the most important online-services for convenient mobile usage. We have also been facing an increasing demand from the BUs to set up mobile App(lication)s DPD Lithuania being the first. Page: 5
About this document Initial situation Our analysis showed that there could not be one single App which fits all needs for all BUs in our heterogeneous network. Therefore BUs are basically free to develop Apps (i.e. Apples ios) for their local markets. We encourage and support each BU in its effort to come up with an App according to its local requirements, but we insist on acknowledging some basic rules. Therefore we have agreed to provide a manual as a binding guideline for BUs, that would like to develop an App. This App manual defines rules regarding layout, mandatory elements and other important aspects and serves as a obligatory guideline for each BU. Page: 6
Approach Global and platform-specific standards The document is basically divided in two sections: Global standards: design rules and guidelines addressing Apps in general Platform-specific standards: specific rules, depending on each mobile platform Global App standards Platform-specific App standards ios Apps (focus in this document) Android Apps (info on demand!) symbian Apps (info on demand!) BlackBerry Apps (info on demand!) Page: 7
Global DPD App standards DPD Apps must comply with the following rules - regardless of the operating system Page: 8
Global DPD App standards Apps with focus on functionality Tracking Depot/DPD Parcel-Shop search New delivery etc. Apps with focus on image Games etc. According to a decision by the Strategic Marketing Group (SMG) it was agreed NOT to develop image enhancing apps until further notice. Thus the following rules relate to Apps with a focus on functionality only! If you plan to develop an App please always approach. Page: 9
Global DPD App standards General rules for App developement Any plans on developing an App must be shared with at concept stage. We must act smart and should develop Apps with the network and other BUs in mind. Apps, which have been developed locally, should only be available in the local App Store releasing Apps internationally would ultimately lead to confusion among App users. Local agencies and / or App developer must always take into account developer resources and design rules of the specific mobile platforms (ios, Android, BlackBerry, Symbian, etc.) examples are given during this presentation. In addition to the rules layed down in this document local agencies and / or App developer should take into consideration the rules of DPDs Web Styleguide. The current version is available on DENNIS. Page: 10
Global DPD App standards Use of DPD icon and wording 1 According to DPDs overall corporate design the wording DPD is part of the logo; however, due to the special quadratic format of App icons, we concede to drop the wording and show only the parcel symbol the perception is much more prominent this way. We create an exceptional DPD icon that is based on the requirements of this specific medium and generates a recognition effect to the original logo. 1 2 Please use DPD or DPD Country as the wording for your App. 2 Apps with focus on a very specific function (New Delivery, etc.) must use a different wording and app icon, but should stick to the DPD color range. In case of any uncertainty please contact Network Marketing Page: 11
Global DPD App standards Dimensions of the DPD icon (example: iphone) 1 Dimensions of the button is 57 x 57 px* 1 2 Dimension of the parcel symbol is 41 x 42 px* 2 (We refer to a standard resolution of 320 x 480 px) The parcel symbol is centered. The space between the button border and the parcel symbol should not fall below 8 px*. * DPD App icons for other mobile platforms may vary Page: 12
Global DPD App standards Screen design The name of the App or the DPD logo does not need to be visible continuously. The downside is that it can draw attention away from the application. The decision is up to the specific layout approach Page: 13
Global DPD App standards Reduced content Purposeful reduction is a key factor when developing an App. Each screen must not comprise more than what is absolutely necessary always ask yourself, whether element x or text y is really mandatory or could be left out. Do not overcrowd a screen with double or less important information. Page: 14
Global DPD App standards Colors and typography 1 1 Colors and typographies as defined in the Web Styleguide (details on following charts) are to be used. 2 3 2 Isolated (masked) images with a neutral background are to be used instead of largescale pictures. This holds true only for screens that do have sufficient space (start screen, for example). Do not use images which prevent functionality from being displayed. 3 Use either typographies Franklin Gothic DPD and/or platform-specific standard typos (for example Helvetica /ios). Page: 15
Global DPD App standards Colors The bar at the top is an ios specific element. The color gradient of the red bar is automatically generated by ios. Enter CI-red in RGB, which is 227/0/42, when programming the app. Grey line:153/153/153 (RGB) Copy inactive:153/153/153 (RGB) Red Arrow: 227/0/42 (RGB) Copy active: 0/0/0 (RGB) Page: 16
Global DPD App standards Colors 1 The background color is grey, 235/235/235. 1
Global DPD App standards Use of DPD icons 1 App icons comprise of red and white color. 1 Once a finger tips over the area, the color inverts to white and red. Page: 18
Global DPD App standards Use of DPD icons Home HUB/HUBfinder Depotfinder Search/Tracking Parcel/Parcel Shop Please note that we have developed this set of App-specific DPD icons especially for this specific application area. These icons are binding and part of the Corporate Design Manual. Shipping Delivered Check list Payment/C.O.D. Pencil/Signature An overall concept for DPD icons for different purposes will be provided soon and will be available on DENNIS. Contact 1 Contact 2 Pick-up order April, 2011 individual icons for local requirements can be requested at. Page: 19
Designing ios Apps Designing DPD iphone Apps Page: 20
Designing ios Apps Apple has shaped a very specific approach regarding design elements and usability within their ios devices such as iphones and ipads. In this case one could speak of conditioning users to a new and unique standard, meaning that apps for ios applications must pay tribute to those standards in order to be accepted. The more we adapt to these standards, the more likely our App will be percepted in the App community as practical and well worth using. Page: 21
Designing ios Apps iphone App design must always follow the iphone HIG (Human Interface Guidelines). Obeying to the rules of the HIG guarantees that the user will quickly get used to working with the App. DPD sticks to that rule, so all iphone Apps must always reflect the HIG! http://developer.apple.com/library/mac/#documentation/userexper ience/conceptual/applehiguidelines/xhigintro/xhigintro.html Page: 22
Designing ios Apps Single elements within the App may vary in color and interface. However the interface design must not depart too far from the iphone GUI (Graphical User Interface). Make use of native user interface elements as much as possible! Examples for native user interface elements Page: 23
DPD App Manual 31.05.2011 Page: 24
Designing ios Apps Screen design and navigation 1 1 Back button, placed left, is very important for navigation purposes: the user normally navigates from right to left into the App structure. The back-button always leads to the previous level (but not to the starting page). 2 2 The order of buttons on the screen indicates the importance of its contents. Most valuable features must always be placed top, less valuable below. 3 3 Comprehensive navigation buttons or specific view buttons are placed within the black tab bar at the bottom. Redundant doublings of buttons on the stage and in the tab bar are not allowed. Page: 25
DPD App Manual Interface design Buttons and text get a highlight on touch. Screen example
DPD App Manual Interface design Buttons and text get a highlight on touch. Screen example
DPD App Manual Interface design Buttons and text get a highlight on touch. Screen example
DPD App Manual Interface design Buttons and text get a highlight on touch. Screen example
Designing ios Apps Naming of pages and Add button 1 2 1 The title describes the screen the user is currently looking at. 2 The Add button (+) is placed top right. The button is only on offer if needed in combination with the screen content. It is only to be used if the user would like to add something to the screen content (list entries, addresses, etc.) Page: 30
Designing ios Apps Use of grouped table view / list view 1 Grouped table view and list view are typical elements from Apples GUI. 1 Use Grouped table view for navigational tasks, settings or for fact sheets with or without user input. 2 2 Use list view to show contents, such as search results (Parcel-Shops, etc.) Page: 31
Designing ios Apps Map view Contact Further screen examples Page: 32
Designing ios Apps Typography ios Apps 1 1 Use Franklin Gothic DPD for headline text to keep the branding alive. ios standard typo Helvetica can be used alternatively. 2 2 All standard ios text elements, such as buttons or copies, are displayed with the standard ios typo, which is Helvetica or Helvetica Neue. Detailed specifications see Web Styleguide Page: 33
We look forward to supporting you! Contact: Anika Winke Tel: +49 6021 843-123 E-Mail: anika.winke@dpd.com Page: 34
Appendix. Appendix Page: 35
Appendix. Developer resources Developer resources for different mobile platforms* * Status April 2011. This area is undergoing permanent change. Page: 36
Appendix. Developer resources Android Apps Videos (i.e. YouTube) Google I/O 2010 Android Design Patterns Dev Guide: Best practices UI Guidelines http://developer.android.com/index.html Page: 37
Appendix. Developer resources Blackberry Apps http://docs.blackberry.com/en/developers/?usertype=21 Videos (i.e. YouTube) Introduction to BlackBerry application development BlackBerry Tablet OS SDK Overview Introduction to BlackBerry Development Options Developer Videos by BlackBerry Documentation BlackBerry - Manuals and Guides for Developers BlackBerry Resources BlackBerry Developer Zone Page: 38
Appendix. Developer resources iphone Apps Videos (i.e. ios Developer Center) WWDC 2010 Session Videos: Session 103 - ipad and iphone User Interface Design iphone Development Videos: 1-05 Ingredients of Great iphone Apps 1-06 iphone User Interface Design Documentations Mobile HIG App Store Review Guidelines http://developer.apple.com/devcenter/ios/index.action Page: 39
Appendix. App Store Registration App Store registration* * Status April 2011. This area is undergoing permanent change. Page: 40
Appendix. App Store Registration We like to assist you to becoming a member of Apples Developer Program by showing you the registration process in detail. However, the complete process cannot be shown, because some steps include giving away security data, such as credit card numbers. After registering successfully you should be able to hand over the login data to your agency, which will execute the app. Using this account the agency will be able to independently develop and test the app as well as upload it to the App Store. If third party agencies are also involved in your app project, you will be able to register them as developers, too. Following those steps will make sure that apps of your BU will consistently be available on your local App Store. Start with the registration process here: http://developer.apple.com/programs/start/standard Page: 41
Appendix. App Store Registration Press Continue button to start enrolling in the Apple Developer Program. Page: 42
Appendix. App Store Registration Are you a New Apple Developer without an existing Apple ID? If yes, select the appropriate checkbox and click the Continue button. Page: 43
Appendix. App Store Registration DPD Apps must be registered as a company app as opposed to apps developed by an individual. Thus the Company button must be clicked here. Page: 44
Appendix. App Store Registration 1 Create an Apple ID by entering a valid DPD E- Mail address. 1 2 The generated Apple ID will be your log-in from now on. Proceed by filling in a password, personal data such as birthday and a security question including the answer, which everybody in your team will be able to answer. 2 Form describtion to be continued on the next chart. Page: 45
Appendix. App Store Registration Continue to enter personal data, such as postal address as well as telephone number of the company, The owner of the mail address, which has been entered previously, will receive a mail for double-opt-in registration. Confirm your registration by clicking the link inside the mail. Page: 46
Appendix. App Store Registration 1 2 1 2 Choose ios as platform ios is the operating system of iphone, ipad and itouch. Primary market refers to the thematic area, your app will later be released. Only one option/checkbox can be selected here Form describtion to be continued on the next chart. Page: 47
Appendix. App Store Registration 1 1 What is the thematic direction of your app? Enter fitting topics here 2 2 Select Free Applications under primary category (if that is the case). 3 3 Since we are rather unexperienced with developing apps, please select New to Apple platforms here. 4 4 Select the appropriate question to this answer. Page: 48
Appendix. App Store Registration Activate the checkbox to accept the Apple Developer Agreement and click the submit button to the right. Page: 49
Appendix. App Store Registration The next steps of the registration process cannot be shown, because the doubleopt-in confirmation by mail is entirely subject to the local BU. Following the confirmation a question regarding the number of developers will be asked. Select "Company" here. You will be charged 99$ per year, using this account. During the registration process you will be advised to enter a valid credit card number. Furthermore you will be asked to enter your commercial register number as well as the name of a board member. An authentification process will be started in parallel, meaning that Apple contacts the board member in order to confirm the company account. Page: 50
Appendix. Becoming an Apple Developer Becoming an Apple Developer* * Status April 2011. This area is undergoing permanent change. Page: 51
Appendix. Becoming an Apple Developer Make use of the Apple ID and the previously chosen password to log on to the Apple Developer account. Page: 52
Appendix. Becoming an Apple Developer 1 This is the interface of your company account in logged-in mode. Look here for useful libraries and developer assistance. 1 Add apps, register iphones for testing purposes or use certificates on the ios Provisioning portal. itunes Connect is the place to migrate your apps to the App Store. Performance checks can be done from there, too. Enter personal data from participating developers in the Member Center. Page: 53
Appendix. Becoming an Apple Developer 1 1 Apple Provisioning Portal. 2 2 Enter certificates here. Page: 54
Appendix. Becoming an Apple Developer Apple Provisioning Portal. 3 Enter iphones for testing purposes under Devices. 3 Page: 55
Appendix. Becoming an Apple Developer Apple Provisioning Portal. 4 4 Enter iphones for testing purposes under Devices. You will only use the UDID no. to enter a test iphone. Device name can be selected individually. 5 5 This is how you get hold of the UDID no.: connect the iphone to your computer and start the itunes program. Clicking the identification no. will generate the UDID-no. Page: 56
Appendix. Becoming an Apple Developer 6 6 Apple Provisioning Portal. Under Apple IDs apps can be placed. Page: 57
Appendix. Becoming an Apple Developer Member Center. Page: 58
Appendix. Becoming an Apple Developer Member Center. 1 1 Click invitations to register individual persons as developer. Page: 59
Appendix. Becoming an Apple Developer Member Center. 2 Click invitations to register individual persons as developer. 2 Personal data, such as name and mail address needs to be entered here. The level of access can be selected, too. Page: 60
Appendix. Becoming an Apple Developer itunes Connect. 1 2 3 1 2 Check the performance of your app under Sales and Trends Go to Manage Your Applications and change app descriptions displayed in the App Store 3 Manage your contracts, tax and banking information here. Page: 61
Appendix. Becoming an Apple Developer 1 itunes Connect. 1 This is the place, where your app can be uploaded to the App Store. Page: 62
Appendix. Becoming an Apple Developer 2 2 itunes Connect. This is the place, where your app can be uploaded to the App Store. Metadata, descriptional text and screenshots can be edited from here (ipad example in the screenshot) Metadata on the App Store Page: 63
Appendix. Becoming an Apple Developer 3 3 Describe the added value of the app in two to three sentences. Key features should be summarized in bullet points. 4 4 Select Primary Category carefully according to app nature 5 5 Enter contact form URL of your local DPD website under Support URL. If there is no specific App URL enter the URL of your local DPD website, such as www.dpd.de Metadata on the App Store Page: 64
Appendix. Becoming an Apple Developer 1 1 Upload a large app icon here. 2 2 Upload at least four significant screenshots. Upload of icons and screenshots Page: 65
Appendix. Becoming an Apple Developer 1 1 itunes Connect. Sales and Trends will show you, how the app downloads performed in your local market(s). Page: 66