Deloitte App Design Guide Revjuly2012

New ways to interact A guide to designing a Deloitte-branded app
Internal use only July 2012

Click here to return to Contents
Contents
Before you consider designing an app, consider this A note to the reader 1.0 1.1 1.2 1.3 1.4 1.5 1.6 2.0 2.1 2.2 2.3 2.4 Deloitte and apps Who is the user guide for? Aims of this guide Why apps? Apps and mobile devices Why develop an app? Dening the best approach A foundation for design development Understanding user experience Touchscreen gestures Principles of user interface design Understanding the process 3 4 5 5 5 6 7 8 9 10 11 12 13 14 15 16 17 19 22 24 27 28 29 30 31 32 35 37 39 41 42
3.0 App design & visual identity 3.1 On-brand design approach 3.2 Logo 3.3 Colors 3.4 Typography 3.5 Imagery 3.6 Information graphics 3.7 Iconography 3.8 Interface elements 3.9 Tone of voice 4.0 App design in practice 4.1 Editorial and ePublishing 4.2 Tools 4.3 Challenges 4.4 Frameworks 4.5 Smartphones 4.6 Enhancements
Support 43 Denitions 44 Appendix 1 Appendix 2 45 46
Deloitte App Guide July 2012
Before you consider designing an app, consider this

The ten most important things you and your colleagues need to know before, during, and after development of a Deloitte-branded app.
1. Get permission Any Deloitte-branded app needs to be authorized by your local brand, legal, and/or risk manager. 2. Know Deloitte Global and local policies Make sure to familiarize yourself not only with this guide, but also with related guides and any relevant member rm rules and regulations. 3. Be properly resourced A signicant investment of time and energy is needed by dedicated professionals to bring apps to life. Postlaunch maintenance, support and updates can often be overlooked. 4. Dene your purpose Ensure you complete adequate user research. Apps are products that fulll a business function and need to be designed, tested, and maintained to t their purpose. 5. Understand distribution Familiarize yourself with the detail and the timings of required approval and release processes internally within Deloitte and externally with any 3rd party platform owners (eg, Apple)
6. Maintenance is key Ensure you have adequate resource to engage in dialogue with your users, gather feedback, manage further updates and inform them of your future release or app retirement plans, should you choose to discontinue updating.
7. Consider the ecosystem Ensure you devise the functions of your app to take advantage of other platforms and content. Your apps functions can benet from content, data, social media feeds, and relational links from a variety of sources.
8. Continually consider your users understanding Share and test your decisions at each step of the process. Ensuring an appropriate and usable release is your key consideration and testing will aid your development.
9. Remember the Deloitte brand and identity Beyond the look and feel and tone of voice, it is essential that our presence be consistent, helping to further position the organization as a global category of one.
10. Last, but not least Read this guide in its entirety. The information that follows provides the necessary foundation for designing a Deloitte-branded app.
A note to the reader

It is critical that any individual or Deloitte entity wishing to create and launch their own app in the name of Deloitte must receive clearance from their member firm
The technology platforms for apps are ever changing, and there is a risk that sections of this document will become out of date quickly. This user guide will be updated periodically to help counter this; however, where possible, we have included hyperlinks to relevant online help and documentation. Please refer to these resources to ensure you are briefed with the most up-to-date information. In conjunction with this document you should also refer to other relevant User Guides on Brand Space (brandspace.deloitte.com User guides link on the homepage). Furthermore, it is critical that any individual or Deloitte entity wishing to design, create and launch a Deloitte-branded app MUST RECEIVE CLEARANCE FROM THEIR MEMBER FIRM BRAND LEADERSHIP AND LEGAL/ RISK TEAM(S), as they are positioned to ensure alignment with broader brand, marketing, and communications efforts. Should you have any queries or require guidance on any topic that is not covered within this documentation then please contact: Brian Resnick: Associate Director, Global Brand, bresnick@deloitte.com Bill Barrett: Associate Director, Global Communications, wbarrett@deloitte.com
As used herein, Deloitte, we, our and similar terminology are used to refer to Deloitte Touche Tohmatsu Limited (DTTL) and its network of member rms (each of which is a legally separate entity) or, where the context requires, DTTL or a particular DTTL member rm. Please see www.deloitte.com/about for a more detailed description of DTTL and its member rms Click here to return to Contents Deloitte App Guide July 2012 4
Deloitte and apps

This document aims to define organization wide guidance on the creation and development of Deloitte-branded apps
1.1 Who is the user guide for? This document is designed as a guide for those thinking of designing and developing an app, or those already maintaining one on behalf of a member rm or a select business initiative. Please note before creating a Deloitte-branded app, you must obtain prior authorization by your member rm brand legal, and risk managers. For the purpose of this document, any app created for business purposes and bearing the Deloitte name or identity falls within the jurisdiction of this document and guidance therein. Please follow these guidelines so we are consistently presenting the Deloitte brand. 1.2 Aims of this guide This document aims to dene organization-wide guidance for the design of Deloitte-branded apps. The overall aim, however, is to present a more coherent and on-brand message via mobile platforms using apps to intended audiences, rather than limit activity. In summary the aim is to: Present a consistent and on-brand presence in terms of tone and visual identity Create best-practice communication that our audience can understand and benet from Engage that audience in a conversation where appropriate Demonstrate Always One Step Ahead values by embracing the latest platforms and technologies in an appropriate way Improve processes and practices by utilizing the opportunities mobile platforms and apps offer
1.3 Why apps? Weve become accustomed to using applications on our PCs and as technology has evolved the smartphone and tablet have also become an important part of our everyday lives. We now play, read, work and share using a range of devices. These interactions require a framework; applications or apps are the way we contain and control functions to bring these devices to life.
What is an app?
self-contained software application normally has a dened function
Why are they useful?

independent and easy-to-manage easy-to-distribute exible utilize the virtues of the chosen platform; hardware and software
Why are they great?

rich and interactive experience a familiar paradigm ownable and customizable continually updateable easily connected
1.4 Apps and mobile devices Many of the virtues of smartphones and tablets that have made them successful devices for the consumer market can also be very benecial in a corporate environment. Their connectivity, portability, ease-of-use, intuitive interfaces, instant-on capability and long battery life are all qualities that are changing the way we now interact with the world. This guide focuses on the basics of an on-brand design approach for apps. The principles of the approaches covered in this guide relate generally to app 'experience design' best-practice which is universal across platforms or devices. For clarity this guide uses tablet apps as visual examples. A tablet is a mobile computer, larger than a mobile phone or PDA, integrated into a at touch screen, primarily operated by touching the screen rather than using a physical keyboard. They often use an onscreen virtual keyboard or a passive stylus pen. The device shown in the visuals is Apples iPad, the leading tablet currently available; a range of other devices on a variety of platforms are available all with a similar specication.
1.5 Why develop an app? When developing ideas for apps, the question that often arises is which comes rst, the idea or the device? The answer is neither its people. By putting the user rst; their requirements and understanding become the driving force and offer clear objectives for making decisions. Deciding if creating an app fullls your member rms requirements can be easily assessed once youve established through research that you have an audience that will understand and benet from your release. Apps can be created to fulll a number of different functions. They generally t into the following categories displayed on the screen at right.
Editorial Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services.
Tools Mobile platforms and apps offer interactivity, portability and connectivity making them valuable for creating tools to fulll a variety of functions.
Challenges Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle.
Frameworks Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback.
Deloitte App Guide July 2012 8
Further reference
Please refer to Section 4.0 App design in practice for more detail and inspiration as to whats possible. Click here to return to Contents
1.6 Dening the best approach With a range of different technical approaches, platforms and devices its a challenge to choose the most appropriate for your requirements. Who are your audience?
Consider their use of technology and penetration across their market
The following chart gives an overview of the main options.
What is your level of investment?

Consider your development and ongoing maintenance costs
What is the scale of the distribution?

Dene where youll be distributing and whether regular updates are required
What is the primary objective of the app?

Decide the functional reason for your app and the category it ts within
What is your desired user experience?

Decide the functional approach to your audience engagement
Potential approach
The basic denition of available development approaches
Current platforms
A basic list of current platforms each with a range of supported devices
Savvy business users or consumers with fast data speeds in a developed market
High Development and ongoing costs approx. $400,000+
Updateable Contains data and content that requires regular updates
Framework for content linked to a CMS potentially with added data capture
Full experience Enhanced interactive approach with the app utilizing the hardwares full capability
Native app Self-contained app built using the native coding environment and distributed via the suppliers preferred platform
Apple iOS
Main focus with high penetration across markets through iPhone and iPad www.apple.com/ios/
Android Global Variations on the build in multiple languages; only produced once Challenge or game to promote an idea or fit within a campaign Online Richer functional approach with the bulk of the content delivered remotely and added data capture
Main focus with high penetration across markets through numerous devices www.android.com/
Medium Development and ongoing costs approx. $200,000
Novice business users or consumers with slow data speeds in a developing market Low Development and ongoing costs approx. $100,000 or less
Multiple markets Variations on the build in multiple languages
Tool approach with more complex functionality or task based interaction
Rich and interactive Richer functional approach with added video
Mobile internet Browser based website built using web languages, optimsed for mobile and viewable online across any device
Blackberry
Reduced focus with lower penetration across markets for richer apps www.blackberry.com
Windows Mobile Hybrid app Self-contained app built using a combination of technologies (often web languages) and distributed via a bespoke solution
Lower penetration across markets for richer apps http://www.microsoft.com/ windowsphone/
Single market One build in one language
Editorial approach with simple access to content
Offline Simpler functional approach with the bulk of the content contained within the app
Symbian
Lower penetration across markets for richer apps http://symbian.nokia.com/
A foundation for design development

An essential overview into what users understand, how they interact, designing the experience and the practicalities of process
2.1 Understanding user experience A basic overview of the four main areas users are familiar with through interaction with apps on mobile devices. 2.2 Touchscreen gestures Insight into the main methods of input and interaction with touchscreen devices. 2.3 Principles of user interface design Six simple principles inform an approach to improve interface design from a user perspective. 2.4 Understanding the process A design-led process for design apps, accounting for the rigor required to ensure best-practice for each step of the journey.
3. Visualise your idea

Create wireframes as a foundation for prototyping including all functional considerations and content requirements.
4. Design a prototype
Using your wirefra as a foundation, c a working prototy with placeholder v
10
2.1 Understanding user experience Users have become familiar with interactive devices, tv, the internet, and software applications. These experiences are generally designed using simple, intuitive patterns to aid adoption and improve usability. The following is a basic overview of the four main areas users are familiar with through interaction with apps on mobile devices.
Navigation
Users need to locate specic features and content and require navigation to accomplish this.
Connecting users
Allow users to share, associate, communicate, and interact with other people online and save and download content for future reference.
Dealing with content and data

Data can be searched, formatted, overviewed, and browsed in a variety of ways.
Getting input
Getting the user to input decisions and data is a task that should be kept simple and tailored to match context of use.
11
2.2 Touchscreen gestures Using touch gesture to interact is intuitive although different from previous methods we've become accustom to through using the standard PC, mouse or trackpad conguration. The following are the main methods of input and interaction with touchscreen devices.
Swipe
With one nger to move between screens, drag and hold to scroll, pan or move an element and ick to scroll or pan quickly.
Pinch
Open ngers to zoom into content, such as imagery and close ngers to zoom out.
Tap
Selects a control or item (similar to a single mouse click), double-tap to zoom and touch-andhold to select and edit content.
Turn
To initiate an action, open new content or create a different view or shake to undo an action.
12
2.3 Principles of user interface design All interactive products require an interface to make them usable. Whether constructed with physical buttons or switches or a touch screen interface the principles remain the same. The following principles have been devised by Larry Constantine and Lucy Lockwood from their book Software For Use: A Practical Guide to the Models and Methods of Usage-Centered Design (Addison Wesley, 1999)
Structure
The design should organize the interface based on consistent models that are familiar to users. With related content together and similar functions resembling one another.
Feedback
The design should keep users informed of actions, changes of state, and errors that are relevant to the user through clear, concise language familiar to users.
Visibility
The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information.
Reuse
The design should reuse internal and external components and behaviors, maintain consistency with purpose thus reducing the need for users to rethink and remember.
Simplicity
The design should make simple, common tasks easy, communicate clearly in the user's own language, and provide shortcuts that are meaningfully related to longer procedures.
Tolerance
The design should be exible to reduce the cost of mistakes by allowing a user to undo actions while also preventing errors by tolerating varied inputs and by interpreting all reasonable actions.
13
2.4 Understanding the process From discovery to delivery a number of detailed steps are required when embarking on designing an app. The application of experience, the correct principles and knowledge into a dened structure with the required considerations at each step of the journey will help you arrive at the best possible outcome. The following is a simple process accounting for the rigor required to ensure best-practice for each step of the journey.
Discovery 1. Develop your idea

First, dene a need and an audience. Research your user requirements and create sketches to dene your idea, basic functions and overall intent. Research your platform, device and delivery options to suit your requirements.
Design and Development 2. Define your function

Create the exact functional specication of your app taking into consideration your timescale, budget, available resource and user requirements. Please note before creating a Deloitte-branded app, you must obtain prior authorization from your member rm brand and legal / risk manager.
Please refer to Section 1.6 Defining the best approach and Section 4.0 App design in practice for more detail
Delivery 4. Design a prototype

Using your wireframes as a foundation, create a working prototype with placeholder visual direction to test and evaluate typical user journeys.
Dialogue 6. Manage your release

Gather feedback, consider content updates and manage further updates through your chosen distribution platform.
3. Visualize your idea

Create wireframes as a foundation for prototyping including all functional considerations and content requirements.
5. Complete and deliver your app

Create your nal app based upon the original idea, functional specication, taking into consideration testing evaluation with the Deloitte Visual Identity applied.
Please refer to Section 1.6 Defining the best approach for more detail
Further reference Please refer to [Section 4.0 App design in practice] for more detail.
Please refer to Section 3.0 App design & visual identity for more detail.
sign off audience? Consistent UI Gestures?

Theme
Business Society
14
App design & visual identity

Bringing the Deloitte brand to life in apps through the component parts of the visual identity
15
3.1 On-brand design approach Everything about the Deloitte brand, from positioning to visual identity, is designed to help us achieve our long-term vision: to be the Standard of Excellence. This is the key to us being the rst choice of the most sought-after clients and talent. To becoming a category of one. The use of technology now gives us more opportunity to achieve this. We can easily create connections and they are becoming increasingly diverse; from both a content and audience perspective. Apps are an effective way to share our ideas, opinion and expertise between our organization, our clients, talent and wider society. To produce the best possible results from your app it is necessary to have a clear goal and a sense of what is possible with a practical plan for how it will be achieved. During the design process, above all else, continually consider the principle of focus. Always strive for clarity and precision through every functional and visual design decision you make.
3.2 Logo Primary logo We are best recognized around the world by a blue and green Deloitte logo on a white background, so this is now our primary way of showing the logo. This should be the rst preference for any new communication. The highlighting of white as a key part of our identity builds on the clarity and precision of our thought and opinion, and the clarity with which we communicate. Digital white As device screens are ambient, the use of a slight grey gradient can be used to help soften the bright white background or use black as an alternative. Launch screen The Primary logo should be used as an introduction to the app and placed centrally as a Launch screen or as part of a narrative sequence. Primary logo size Consider the proportions of the screen when sizing the logo.
Primary logo Small size logo The shortest length the logo can be is 80 pixels wide for onscreen applications. The Small size logo has been optimized to reproduce well at small sizes: the counter space within the letter e has been opened up to stop the ink lling in, as well as opening up the space between the letters to achieve the right appearance at small sizes.
80 px minimum Using the Primary logo for apps As apps generally require a launch process it can be useful to use the Primary logo in this initial sequence for identication. Narrative sequences explaining the premise of an app can also be used incorporating the logo. The Primary logo can also be used in any legal screens as further identication. Due to the nature of ambient screens, black is often the most appropriate predominant color for background elements.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved artwork, available in the Downloads section. Select Primary logo under the Logo overview section within Elements for more information.
Click here to return to Contents Deloitte App Guide July 2012 17
3.2 Logo Secondary logo The Deloitte logo on white is our primary logo, and should be used on Deloitte communications. There are certain applications, however, where the reversed out logo is more practical, so there is a Secondary logo use for these situations. Blue brand bar Use the Secondary logo in the blue brand bar as useful identication for apps with a number of visual layers. Menu bar Use the blue bar as an additional menu bar for added functionality where necessary.
Secondary logo Using the Secondary logo for apps For Deloitte screen-based applications there is a blue brand bar which can act as an important visual anchor on-screen with a reversed out logo. This serves to separate the logo from the other elements on the screen.
Blue brand bar
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved artwork, available in the Downloads section. Select Secondary logo under the Logo overview section within Elements for more information.
3.3 Colors Primary colors Deloitte has a palette of colors that is already recognized around the world and differentiated from our competitors: dark blue, bright green, and white. It is the combination of blue and green that is so distinctive and valuable to Deloitte. This blue/green combination is at the heart of the Primary palette, and inspires the Secondary palette. Deloitte Blue and Deloitte Green appear in all communications. White represents clarity and focus. It also makes communications consistent across markets.
Deloitte Blue Deloitte Green White
Adding emphasis The Primary colors should also be used to add emphasis wherever required. For example, as predominant colors in imagery.
White backgrounds The use of Deloitte Green should be minimized on white or light backgrounds as ambient screens can reduce contrast.
Core typography Use the primary colors for core typography for headings and through the initial areas of the apps interactive journey.
R0 G39 B118 HEX 002776
R146 G212 B0 HEX 92D400
Using Primary colors for apps The Primary colors should be used for core elements throughout to maintain visual consistency and uphold the identity. The use of White on-screen benets from the addition of either translucency or a grey-gradient adding visual depth to denote different content objects or navigation.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Select Primary color under the Color overview section within Elements for more information.
3.3 Colors Secondary colors The three Primary colors are supported by a set of four Secondary colors. Importantly, these Secondary colors are within a blue/green spectrum. This ensures that every part of the Deloitte visual identity that uses color is instantly recognized as Deloitte. In addition to the blue/green Secondary colors there are three neutral grays. These help give the exibility and clarity we need when presenting more complex information, particularly charts, diagrams and information graphics, without affecting the distinctive blue/green personality of all Deloitte communications. Blue/green Secondary palette
Deloitte Mid Blue Deloitte Light Blue Deloitte Dark Green Deloitte Light Green
Interactive functions The colors are necessary for interaction as they allow different states for navigable elements.
Charts and diagrams They offer exibility and clarity for charts, diagrams and information graphics.
Adding support The colors can be used as support to the Primary colors for more complex graphic elements such as web icons.
R0 G161 B222 HEX 00A1DE
R114 G199 B231 HEX 72C7E7
R60 G138 B46 HEX 3C8A2E
R201 G221 B3 HEX C9DD03
Gray Secondary palette

Deloitte Dark Gray Deloitte Mid Gray Deloitte Light Gray
R140 G140 B140 HEX 8C8C8C
R180 G180 B180 HEX B4B4B4
R220 G220 B220 HEX DCDCDC
Using Secondary colors for apps In addition to their general function, the Secondary colors can be used as interactive support for apps see 3.2 Colors/Interactive colors for more detail. The colors can be used in addition for more complex graphic elements such as web icons to support the enhancements that interactivity requires.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Select Secondary color under the Color overview section within Elements for more information.
3.3 Colors Interactive colors In addition to the Primary and Secondary color palettes, interactive touchscreen applications require further colors to allow for functional differences. Gesture driven interfaces generally use visual objects that are layered or adjacent to other objects with differing or related functions. It is necessary to visually identify these objects with a base color that can effectively hold content. The Secondary palette should be used as highlights for this interactive content to show active, inactive, selected and disabled states as feedback for the user. This is generally why apps use darker color backgrounds to denote interactive objects, increase visual contrast and cope with the ambience of the screen. Interactive base colors
Black Base Dark Gray Base Mid Gray White
Base color translucency Translucency can be used as a useful visual approach to create difference between the objects for layering and status feedback.
Interactive journeys Different steps of an interactive journey can use the base colors to identify different levels.
Interactive feedback Secondary colors should be used as visual feedback identifying active, inactive, and disabled states or navigation.
R000 G000 B000 HEX 000000
R060 G060 B060 HEX 3C3C3C
R100 G100 B100 HEX 646464
Secondary palette as highlight colors

Deloitte Mid Blue Deloitte Light Blue Deloitte Dark Green Deloitte Light Green
Deloitte Dark Gray
Deloitte Mid Gray
Deloitte Light Gray
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Select the Color overview section within Elements for more information.
3.4 Typography Primary typeface Garamond 3 LT Std is our Primary typeface. We use it for insightful headlines and headings, for quotes and opinions pulled out from the main body of the text. Garamond 3 LT Std carries our insight and our personality. It is an immediately recognizable typeface and is used simply and clearly. Core typography Use the Primary typeface for core typography through the initial areas of the apps interactive journey. Add emphasis The Primary typeface should also be used to add emphasis wherever required.
An intelligent and distinctive typeface for headlines: Garamond 3 LT Std

Using the Primary typeface for apps The Primary typeface should be used for core elements throughout to maintain visual consistency and identity. The typeface can be used on a variety of color backgrounds wherever emphasis is required. To ensure legibility and retain contrast when used on a white or translucent white background the use of Deloitte Green should be limited. Where Garamond 3 LT Std is not available, for example in a web app, it is replaced with Times New Roman, the closest universally available typeface. Often we have to rely on universal system typefaces for certain applications, the distinctive combination of serif and sans serif, and our unique palette of colors means that our communications still look characteristically Deloitte.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved typefaces, available in the Downloads section. Select Primary typeface under the Typography overview section within Elements for more information.
3.4 Typography Secondary typeface Frutiger Next Pro is our functional typeface. We use it for all other content in our communications below the level of headings: from subheadings to body text to legends in charts. It is a highly readable and efcient typeface: being slightly condensed it is very economical on page space. Navigation and menus Use different weights for exibility when creating states for navigation items, menus and buttons. Creating buttons Ensure legibility and touch usability by testing button sizes and states on your chosen device. Detailed content As with other communication the Secondary typeface can be used for detailed content, legends and captions.
A modern and functional typeface for everything else: Frutiger Next Pro
Using the Secondary typeface for apps In addition to its general function, the Secondary typeface can be used in an interactive role as navigation menus or buttons. The typeface can be used in Primary or Secondary colors on a variety of color backgrounds wherever content is required below the level of headings. Consider screen contrast when choosing type colors and dening states for navigation items, such as, active, inactive, selected and disabled states as feedback for the user. Different weights can also be used when creating states for navigation items, menus and buttons. Where Frutiger Next Pro is not available, for example in a web app, it is replaced with Arial, the closest universally available typeface. Often we have to rely on universal system typefaces for certain applications, the distinctive combination of serif and sans serif, and our unique palette of colors means that our communications still look characteristically Deloitte. Many mobile platforms use a sans serif typeface as their default, for example Apple iOS uses Helvetica and Andriod uses Droid Sans. Owing to the similarity in appearance it is appropriate to rely on the default for menus, navigation and other functions without replacing them with the Secondary typeface.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved typefaces, available in the Downloads section. Select Secondary typeface under the Typography overview section within Elements for more information.
3.5 Imagery Primary imagery A Primary image style of sharp focus, color images of objects on a white background. This allows us to have our distinctive white covers and title slides. It is also a style that gives maximum design exibility across all apps, and is a style that is easy to understand and use by all practitioners, whether design professionals or not. Every image should be in sharp focus, focusing on a single idea or topic, and be the focal point wherever it appears. Navigation and menus You can use the imagery as thumbnails for content sections in a navigation menu. Illustrating ideas Use wherever a requirement exists for illustrating an idea or topic. Layering content The Primary imagery can be used as background layers to additional content sections.
Using Primary imagery for apps In addition to its general function, the Primary imagery can be used as visual identication for content sections; in a navigation menu for example. For illustrating single ideas or topics consider the visual exibility required of interactive content. The Primary imagery can be used as background layers to additional content sections. When choosing imagery for your app ensure you have secured appropriate usage rights. All images on Brand Space (brandspace. deloitte.com) are available to use Globally for all media.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved images, available in the Downloads section. Select Primary imagery under the Imagery overview section within Elements for more information.
3.5 Imagery Secondary imagery A Secondary image style of reportage (natural, real-life) color images is used when the object style is not appropriate. For example, when we show our people, events, places, and in some circumstances, industries. Every image should be in sharp focus, focusing on a single idea or topic, and be the focal point wherever it appears. Navigation and menus You can use the imagery as thumbnails for content sections in a navigation menu. Layering content The Secondary imagery can be used as background layers to additional content sections. Illustrating ideas Use wherever a requirement exists for illustrating an idea or topic.
Using Secondary imagery for apps In addition to its general function, the Secondary imagery can be used as visual identication for content sections; in a navigation menu for example. For illustrating a single idea or topic consider the visual exibility required of interactive content. The Secondary imagery can be used as background layers to additional content sections. When choosing imagery for your app ensure you have secured appropriate usage rights. All images on Brand Space (brandspace. deloitte.com) are available to use Globally for all media.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved images, available in the Downloads section. Select Secondary imagery under the Imagery overview section within Elements for more information.
3.5 Imagery Video We use video regularly as a versatile method for delivering messages online and through social media on platforms such as YouTube and Facebook across a number of subject areas including our services, industries, insights and careers. Video is a familiar medium for users, which makes it simpler for them to consume and understand messaging and ideas. Using video for apps Consider context when deciding whether video is useful as support to other content in your app or as an alternative method to deliver a concise narrative around your subject. Remember the user, the way in which they will use the app, how much time they have, and their level of understanding with respect to your content and purpose. Ensure you use appropriate video content for delivery in the context of an app; considering focus and simplicity of visual approach and message. If your app is using a network connection to access video content, consider how your app looks and feels when the content is unavailable; for example, when a network connection is down. Also, video may come from different sources and can be challenging to t into a universal template. Consider visual approaches that are looser and celebrate the dynamic nature of the source material. When choosing video for your app ensure you have secured appropriate usage rights. All video on Brand Space (brandspace. deloitte.com) is available to use Globally for all media. Defining purpose Consider context when deciding whether video is useful as support to other content or as an alternative method to deliver a concise narrative. Applying simplicity Ensure you use appropriate video content for delivery in the context of an app; considering focus and simplicity of visual approach and message. Content led approach If your app is using a network connection to access video content, consider how your app looks and feels when the content is unavailable.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Video examples are available in the Downloads section under Multimedia. Select Flash video/audio player option under Electronic applications within Application for further information. Please note Flash will not work on some devices.
Chart 5 (Column)
2000
1500
3.6 Information graphics

1000 Charts and diagrams
1264 1188 Information graphics should feel as simple and uncomplicated as 500 908 possible. They are a great opportunity to use the bright, fresh color 0 palette to reect the brand at all levels of the communication. Since 2004 2005 2006 2007 2008 the informationData graphics occur on a white background, they should 1 feel light and elegant. Large areas of heavy solid color should be Chart 6 (Pie) avoided where possible to keep the presence of white space strong. 5% Always use a clear legend and labelling system to make sure the 6% graphs are meaningful. 25% 7%
1355
1559
Applying interactivity Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection.
Utilizing multitouch Use simple touch buttons to reveal annotation.
Applying simplicity Charts and diagrams can be simplied and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels.
Gr at i
de tu
8%
Expe cta tio
n
Arrival
9%
18%
10%
ht Insig
Select a suitable venue/good event stand location Make the most of the location Use visuals to create impact
12% Other Real estate Manufacturing Energy, infrastructure & utilities Consumer business Tourism, hospitality & leisure Public sector
Ho
spi
t a lit
We
lco
e
m
Ensure the stand is well laid out, tidy and welcoming Make eye contact and smile Engage visitors with questions
Telecoms, media & technology Using charts and diagrams for apps
In addition to their general use, interactivity requires consideration when using information graphics, charts and diagrams for apps. They can be simplied and areas of focus can be enhanced by allowing detail to be revealed through touch and overlaid content panels. Consider creating interactive charts and diagrams based on similar formats but holding different data which can be controlled through user selection.
Financial services
Further reference Please visit Brand Space (brandspace.deloitte.com) for more detailed guidance and downloads. Templated chart and table styles exist in the Downloads section to make it easier to create on-brand information graphics. Select Timesaver option under the Information graphics category for this le. These Illustrator and InDesign les are for creative professionals only.
3.7 Iconography Web icons A set of icons have been developed to aid navigation on the Deloitte website and Brand Space. The icons have a purely functional role and may only be used in circumstances where they are an active link or navigational aid. They may also be used as hyperlinks in interactive PDFs or ash animations. Stylistically, the icons are designed to be as simple as possible, purely functional graphics. The icons should be created with at color, using the Deloitte palette. Bevels and drop shadows should not be used. Icons as navigation When used solely for navigation, ensure clear space around the icon to make it easier to touch and aid usability. Icons as feedback Consider the icon colors as they are interactive content that will require a number of color variations to show various states as feedback for the user. Consider context Consider the size of the icons in relation to the visual elements around them and their function.
Using Web icons for apps Icons can be used for apps to provide two key functions; as navigation or feedback. When used solely for navigation, ensure clear space around the icon to make it easier to touch and aid usability. For navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active, inactive, selected and disabled states as feedback for the user. Consider the size of the icons in relation to the visual elements around them and their function.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Please use only approved icon artwork, available in the Downloads section. Select Web icons option under the Electronic applications within Applications for this le. These Illustrator les are for creative professionals only. If a new icon is required, its design must be approved by the Global Brand Team before it is used in an application.
3.8 Interface elements Enhancing the identity Designing for apps requires a number of simple enhancements to the identity to cater for interactivity, navigation, feedback, and exibility of content. Creating objects Gesture driven interfaces generally use visual objects that are layered or adjacent to other objects with differing or related functions. In order to visually identify these objects and cope with levels of interactivity, slight enhancements are necessary to the general visual identity approach. For example: Using color For navigation and feedback consider the base colors and the icon colors as they are interactive content that will require a number of color variations to show active, inactive, selected and disabled states as feedback for the user. Due to the nature of ambient screens, darker colors are often the most appropriate predominant color for background elements. Adding visual depth As a technique to create visual differentiation between objects with different functions, visual depth is useful; either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object. Adding and implying movement to objects and layering over other objects also aids touch usability and is more dynamic. Using translucency and adding gradients The use of the Interactive base colors (Please see page 21) on-screen can benet from the addition of either translucency or a gradient to add visual depth. Using translucency The use of the Base colors on-screen can benet from the addition of either translucency or a gradient to add visual depth. Adding visual depth Visual differentiation between objects either subtly with an added pixel line between menu items or an added shadow beneath a larger interface object. Creating objects Gesture driven interfaces use visual objects that are layered or adjacent to other objects with differing or related functions.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads.
3.9 Tone of voice Focus Like all the identity elements, our verbal and written communications are built on the principle of focus. What do we mean by focus? Always striving for clarity and precision Making one point at a time, powerfully and unambiguously Thinking ahead to the response we're aiming to provoke A conversation It's helpful to see our writing as a conversation. The content, vocabulary, and style of our writing will change depending on the audience and why we're talking to them. Our tone which reects our personality will not. Remember these rules apply equally to internal audiences as well as external audiences. Considering Tone of voice for apps Writing for apps requires two key types of written content; communication and interactive content. Communication content works with the same principle of focus as with other media. Interactive content requires the added consideration of context to ensure delivering the correct message in an intuitive way. When writing for navigation menus and buttons, ensure clarity, consistency and the correct terminology by considering your users understanding of the subject matter and the apps functions. Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message. Writing for navigation When writing for navigation menus and buttons, ensure clarity, consistency and use the correct terminology. Writing for alerts Extra consideration is required when writing alerts and supporting content to ensure users immediately understand the reasoning behind the message. General content Communication content works with the same principle of focus as with other media.
Further reference Please visit Brand Space (brandspace.deloitte.com) for detailed guidance and downloads. Select Tone of voice within Elements for more information.
App design in practice

Examples and related best practice advice for creating innovative app experiences across four main categories
4.1 Editorial and ePublishing Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services. Apps can be designed for contained formats such as articles, white papers and insight documents. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates. 4.2 Tools Mobile platforms and apps offer interactivity, portability and connectivity making them valuable for creating tools to fulll a variety of functions. Apps as tools can be useful for a number of tasks, including productivity, meetings, data capture, and content creation. 4.3 Challenges Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. They can be designed as a component function or as independent apps depending on your marketing requirements. 4.4 Frameworks Apps rely on data and content as a foundation for interaction and users expectations have become increasingly sophisticated. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback.
31
4.1 Editorial and ePublishing Sharing editorial content is one of the predominant uses for mobile platforms; either through bespoke apps or ePublishing services. Apps can be designed for contained formats such as articles, white papers and insight documents. Using an app to share your content offers options for enhanced interactivity and they can be re-released for regular updates. The following examples offer advice on making the most of what the platforms offer.
Visual example An app designed to house articles such as briengs with options to view them organized by different categories
Considering tablet orientation Tablets offer the user the opportunity to switch between two views landscape and portrait. Having to consider every aspect of your app design in these two different layouts can be challenging. The best approach is to keep the experience consistent in each view, allowing for a seamless user experience. Successful apps also often use the different views when switching orientation to use the opportunity to allow alternate data display and functionality. Design advice Create paper prototypes of your screens in both modes, creating layers to test your ideas and make decisions as to how the two orientations can be used in a valuable way.
Using a modular approach to simplify orientation shifts
32
Using the master/detail principle Master/detail is an interactive concept whereby you can view the navigation and chosen content in the same interface view. Tablet screen size allows for this whereas most smartphones require layered or sliding navigation to make the most valuable use of the screen. Editorial apps can use this principle to good effect, allowing the user quick access to the available content. Multiple pane interfaces can also be developed to allow ultimate exibility. Design advice When developing your visual design approach, consider content objects rather than screens or pages for ultimate exibility. Visual example An app designed for insight house articles with a visible menu for quick access to the contents
Carefully considering the user interface When developing the detail of your interface consider the functions of your app and your intended audience, then think of how you can create a design that optimizes ease-of-use. Above all; keep it simple and consider the Visibility principle when designing your interactive journeys. The visual clarity of text and other graphic elements all depend upon their size, contrast, arrangement and spacing. Design advice Rigorously test your visuals on the intended device to ensure legibility.
Test size and contrast of the smaller elements of your design
33
The virtues of ePublishing A variety of software solutions are available to simplify the process of publishing and distributing content across mobile platforms for tablets. They work similarly in taking your editorial layout via your page make-up software, such as Adobe InDesign and offer content editing to maximize interactivity and leverage the tablet experience. Each solution employs a slightly different approach to preparing and adding the content into the system with different functional options and related costing plans. These solutions have quickly become the industry standard for most business and consumer magazines and journals. They attempt to provide the best possible user experience by utilizing techniques such as interactive overlays, adding audio and video, scrollable frames and pop-up content viewers. They also act as distribution platforms and for commercial apps offer enhancements such as ecommerce and user tracking through analytics. Design advice When developing your visual design approach and content, consider how the user experience can be enhanced through adding extra text, audio or video. Visual example An example of Adobe's Digital Publishing system, the On Technology app uses a variety of interactive functions to enhance the editorial
The platform menu showing issues that can be updated and regularly released
Further reference For more detail on the following platforms please visit the links listed below: Adobe Digital Publishing Suite (www.adobe.com/products/ digital-publishing-suite-family.html) PressRun (www.pressrun.com) Mag+ (www.magplus.com)
The editorial can be enhanced with interactive detail and video content
4.2 Tools Mobile platforms and apps offer interactivity, portability and connectivity making them valuable for creating tools to fulll a variety of functions. Apps as tools can be useful for a number of tasks, including productivity, meetings, data capture, and content creation. The following examples offer advice on developing appropriate, functional and usable apps. Visual example An app designed as a conversation tool with a data capture function to aid business development relationships Defining your apps features Our relationship with interactivity through using the internet has led us to believe that the more features, the more useful the site will be. Users generally need only a small set of features in any interactive application and software works much better when its focused. If you consider your relationship with software applications there are often plenty of features you will never use. Feature focused software works well because the interface is easier to design and therefore understand. The key is to decide which small set of features are actually important, and implement only those. Your assessment should be based upon a value judgement. By considering your apps purpose, if the features youre adding honestly provide more value to your end user, then nding a way to incorporate them into your existing user experience is important and worth the challenge. Be careful to not add features for the sake of adding. Design advice Devise user journeys to focus on exact benets for the audience when using your app. This will help you dene the scope and the features required.
Make the key feature clearly visible to aid usability
35
Allow users to apply their knowledge Is your application consistent with the platforms standards? Does it incorporate the device features in a valuable way? Is your application consistent within itself? Do the same icons always mean the same thing? Can people predict the outcome when they perform the same action in different places? By considering consistency of approach it will allow users to transfer their knowledge and skills from using other applications to yours. Successful applications take advantage of the standards and paradigms that users are comfortable with. Design advice Undertake adequate research into your chosen platforms approach and standards, and regularly test your ideas and prototypes with typical users.
Visual example An app designed as a presentation creator with templates for devising and sharing tablet-based content
Utilize familiar functions such as search
Utilizing the native user interface A number of interactive tasks related to the user requirements for your app will be general for your chosen platform. For example, receiving an alert, viewing terms and conditions or using a keyboard for data entry. Depending upon your approach to creating your app, these tasks can be managed by simply adding a layer of features or functions that already exist for the platform and can be adapted to suit your requirements with minimal customization. Design advice Undertake adequate research into your chosen platform to cross-reference any existing features it provides that can be used in your app.
Use of the native OS keyboard for inputting data
36
4.3 Challenges Games, activations, challenges and puzzles can be an effective way to deliver messages through engagement and apps are often the ideal vehicle. They can be designed as a component function or as independent apps depending on how they're required to meet your marketing requirements. The following examples offer advice for some techniques to employ to bring your ideas to life.
Visual example An app designed as a puzzle challenge showing how a modal interface can be simplied to improve ease-of-use and retain the integrity of the visual identity
Utilizing multitouch Using touch gestures to interact is intuitive although different from previous methods weve learnt through using the standard PC, mouse or trackpad conguration. When people directly manipulate objects on-screen they become more engaged with the task and they more readily understand the results of their actions. Through gestures, users have a greater afnity for the objects and an increased sense of control. This approach to interaction is ideal for designing challenges and games where dexterity and response time are key factors in measuring success during play. Intuitive gestures can greatly improve experiences; for example, using pinch gestures to directly control the size of content instead of tapping zoom controls, and dragging and dropping on-screen objects.
Design advice Consider the available gestures when devising challenge functions or game play to make the interaction appropriate and intuitive.
Dragging and dropping elements
37
User control and feedback Users feel more in control when app behaviors are familiar and predictable. They expect to have the opportunity to cancel an operation or conrm their intention to perform an action. By using feedback you can assure them that a process has been initiated. Feedback should be immediate and can also be repeat during lengthy operations. It should always be subtle, whether in the form of simple highlights, animation or even using sound although not as the primary feedback mechanism as users often turn sound off or down especially in public places. Design advice During your design phase consider feedback and develop consistent options where required across all features.
Visual example An app designed as a brain training game visualizing a metaphorical approach to using the identity for games and challenges
The value of visual metaphors Users can quickly learn how to use an app when virtual objects and actions are metaphors for objects and actions in the real world. Current devices can support rich imagery and video allowing greater scope for detailed visual approaches such as layering, depth and texture; all adding an element of realism into the interface. Generally, visual metaphors work well when kept simple and allowed to complement the overall visual appeal of your app. Design advice Assess your functions in the context of overall usability of your app to consider whether applying visual metaphors would aid user interaction.
The time bar lls showing simple feedback during a task
The visual display of input as handwriting is familiar to users
38
4.4 Frameworks Apps rely on data and content as a foundation for interaction and users expectations have become increasingly sophisticated. Designing apps to act as frameworks for diverse and dynamic content provides opportunities for brands; whether for sharing thoughts or capturing feedback. The following examples offer advice for some of the design and content challenges you can face.
Visual example An app designed as a framework for accessing content from a blog, with a number of options to organize the posts and added functionality for commenting and sharing
Considering dynamic content The virtues of smartphones and tablets; their connectivity, portability, ease-of-use, intuitive interfaces, instant-on capability and long battery life are now providing new opportunities and challenges for viewing, sharing, recording and manipulating content. With connected mobile devices we can access the internet and databases for text, imagery and video. We regularly rely on social media content to enhance our message and the devices also allow capturing data through email, forms and even imagery and video. This added functionality poses a fundamental challenge to deciding the scope of your app and the interactive approach you take to cope with the variation and scale of dynamic content. Design advice Consider how your app looks and feels when the content is unavailable; for example, when a network connection is down. When designing containers for dynamic text content carefully consider the structure of the raw content and how it can be styled appropriately to create the right experience. Visual techniques for loading content Often, imagery and video may come from different sources and can be challenging to t into a universal template. Consider visual approaches that are looser and celebrate the dynamic nature of the source material.
39
Controlling visual structure Even after dening the exact features of your app you may nd aspects of the design require different approaches to interaction and interface design. In this instance, modes can be useful. Modal interfaces are designed for the user to undertake one particular task at a time, seeing only the relevant controls and information. The general challenge when designing apps is to keep your user-interface clear, uncluttered and usable as a touch interface. Modes can help achieve this by applying focus to each specic task. Design advice Consider opportunities to simplify aspects of your design into modes by mapping typical user journeys and simplifying shared tasks. Visual example An app designed as a framework to access social media feeds (in this example video content) as one of its features
Giving users a helping hand Through effective design, one of your main aims will be to make your interface intuitive without relying on help or a guide to how your app works. However, there are times when a design is most efcient to use once some initial behaviors have been learnt. This is where a quick introduction on how to use your app makes the user feel more comfortable and is not a reection of a poor design. Design advice Consider a number of options to aid rst-time use. From demos, tutorials and walkthroughs to much simpler singlescreen overlays, summaries or interface tips.
Interface tips as simple overlays
40
4.5 Smartphones All aspects of this guide from understanding user experience, touchscreen gestures, the principles of user interface design and appropriate process are equally applicable to designing apps for smartphones. Some added design challenges exist when creating ideas for a smaller screen and through following the correct process and adequate testing they can be solved easily. When designing for smartphones there are a larger number of platforms and devices to consider, creating greater differences between device functionality and screen real-estate. Ensure adequate time and resource is applied to dening your idea, mapping the user experience and designing the interface appropriately for the range of platforms and devices on which you choose to develop. In conjunction with this document you should also refer to other relevant User Guides on Brand Space, such as the Deloitte Mobile user guidelines (brandspace.deloitte.com User guides link on the homepage).
41
4.6 Enhancements As you read this, the technologies listed in this section are already part of how were using our smartphones and tablets in everyday life. When researching platform, device and delivery options to suit your requirements its important to have an clear understanding of the added hardware technology that can be utilized to enhance the functionality of your app. Many smartphones and tablets now have built-in cameras for taking photos, recording video, utilizing augmented reality, mobile image recognition and scanning QR codes; accelerometers to measure acceleration which is useful in games and bumping devices to transfer data; gyroscopes for measuring or maintaining orientation; Global positioning systems (GPS) for navigation and nding your location in order to leverage location-based services; and of course multi-touch screens for allowing a variety of gesture based interactions. In conjunction with this document you should also refer to other relevant User Guides on Brand Space, such as the Deloitte Mobile user guidelines (brandspace.deloitte.com User guides link on the homepage).
42
Support
5.1 Internal resources Name Deloitte Brand Space Deloitte Mobile user guidelines Deloitte Keynote guide Description The denitive guide to our Brand identity A user guide to leveraging mobile technologies A user guide to the alternative presentation app for use with iPad and Multi-touch mobile devices URL https://brandspace.deloitte.com/ https://brandspace.deloitte.com/ (User guides link on homepage) https://brandspace.deloitte.com/ (User guides link on homepage) 5.3 Contacts Name Brian Resnick Bill Barrett Role Associate Director, Global Brand Associate Director, Online Communications Email bresnick@deloitte.com wbarrett@deloitte.com
Agency contacts In addition to providing clarication and/or support, the listed contacts can also refer you to agencies specializing in the custom build and implementation of apps. You may also, of course, reach out to local internal or external specialists of your choosing.
5.2 External resources Name Apple iOS Description iOS Dev Center Human Interface Guidelines URL http://developer.apple.com/devcenter/ios http://developer.apple.com/library/ ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/ Introduction.html http://developer.android.com/index.html http://developer.android.com/guide/practices/ ui_guidelines/index.html http://developer.android.com/design/index. html http://www.smashingmagazine.com/ guidelines-for-mobile-web-development/ http://www.mobilexweb.com/blog/ ui-guidelines-mobile-tablet-design http://mobilehtml5.org/
Android
Developers User Interface Guidelines Android Design
General resource Smashing Magazine General resource Mobile X Web General resource Mobile HTML 5
Guidelines for Mobile Web Development UI Guidelines Compatibility
43
Definitions
This glossary includes definitions of terms that are referenced within this document
App Short for application; a type of end-user software that is developed to serve a specic function. ePublishing Third party platforms designed to allow easy editing and publishing of content into self-contained modules for browsing primarily on tablets. Feedback Visual changes to screen objects denoting an action has occurred; for example, the color change of an icon. Sometimes sound is also used as feedback during interaction. Gestures Intuitive nger movements for using a multitouch screen to select and interact with apps. Icons Visual representations of themes or ideas as a shorthand for feedback or navigation. Menu Interactive objects or text organized into a horizontal or vertical layout as grouped menu items. Multitouch Smartphone and tablet screen technology used as a physical interface capable of receiving feedback from multiple touches simultaneously. Navigation Interactive objects or text added to screen layouts to reveal or allow access to further content or features. Objects General term used to describe a visual module of an interface or self-contained pattern of interaction.. Prototype An in-progress software version of an app created to test structure and functionality. Platform General term used to describe an open or closed software delivery option. Smartphone Mobile handsets with the functionality for calling, or SMS/MMS and accessing mobile internet. Hardware often has a variety of functions including GPS utilized through downloadable apps. Tablet A tablet is a mobile computer, larger than a mobile phone or PDA, integrated into a at touch screen, primarily operated by touching the screen rather than using a physical keyboard. They often use an onscreen virtual keyboard or a passive stylus pen. Hardware often has a variety of functions including GPS utilized through downloadable apps. Wireframes Diagrams or blueprints including all functional considerations and content requirements created as a foundation for prototyping.
44
Appendix 1
Best practice examples of apps aimed at a business focused audience. A number of other good examples can also be found on Apples App Store and Googles Android Marketplace.
Editorial Shell Inside Energy Apple iOS available via the app store An app exploring the role innovation plays in producing energy to power and sustain our lives. Discover new ways of nding energy, learn about advances in technology, and meet the people involved in making it happen.
Challenges GE Patient Shuffle Apple iOS available via the app store Do you have what it takes to run a hospital? Place the non-stop ow of patients in rooms, then match them with doctors. It's harder than it sounds, so you better plan ahead. The more happy patients you discharge, the higher you score.
Frameworks Unilever Investor Centre Apple iOS available via the app store Provides Unilever investors with instant access to important nancial and business information. Has a customizable dashboard that pushes live information to investors and analysts and interactive share price charts showing the latest prices for Unilever shares on four exchanges.
Tools Deloitte Business:Society app Not currently available for general release A tool based conversation app designed to aid discussions around businesses and their purpose in society. Includes a concise manifesto, case examples and a number of interactive tools to present the idea of dening business purpose.
45
Appendix 2
Best practice examples of apps aimed at a general audience. A number of other good examples can also be found on Apples App Store and Googles Android Marketplace.
Editorial The Guardian Apple iOS available via the app store and Android via Marketplace An app which showcases international reporting, commentary, sports journalism and unique modular approach to coverage of culture, science and technology.
Tools Keynote Apple iOS available via the app store A presentation app with editing features to make creative presentations complete with animated charts and transitions simply by touching and tapping.
Tools Discovr Music Apple iOS available via the app store An app with access to more than 15 million songs and 3 million artists in the world. It makes it easy to nd and explore new music. You can enter an artist you like and browse the connections.
Challenges Angry Birds Apple iOS available via the app store and Android via Marketplace A game app featuring challenging physics-based gameplay with hours of replay value. Each level requires logic and skill to progress to the next level.
Frameworks BBC iPlayer Apple iOS available via the app store and Android via Marketplace An app designed to allow you to watch, listen live and catch up on the last 7 days of BBC TV and Radio. Offers easy browsing through the schedules to nd the content you want.
Frameworks Flipboard Apple iOS available via the app store An app that aggregates different sources of published content into a beautiful, engaging layout and a magazine-style reading experience. Also offers simple share functionality across your social media networks.
Deloitte refers to one or more of Deloitte Touche Tohmatsu Limited, a UK private company limited by guarantee, and its network of member rms, each of which is a legally separate and independent entity. Please see www.deloitte.com/about for a detailed description of the legal structure of Deloitte Touche Tohmatsu Limited and its member rms. Deloitte provides audit, tax, consulting, and nancial advisory services to public and private clients spanning multiple industries. With a globally connected network of member rms in more than 150 countries, Deloitte brings world-class capabilities and deep local expertise to help clients succeed wherever they operate. Deloitte's approximately 195,000 professionals are committed to becoming the standard of excellence. This publication is for internal distribution and use only among personnel of Deloitte Touche Tohmatsu Limited, its member rms, and their related entities (collectively, the Deloitte Network). None of the Deloitte Network shall be responsible for any loss whatsoever sustained by any person who relies on this publication. 2012 Deloitte Global Services Limited

Deloitte App Design Guide Revjuly2012

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Deloitte App Design Guide Revjuly2012

Hochgeladen von

Copyright:

Verfügbare Formate

New ways to interact A guide to designing a Deloitte-branded app

Internal use only July 2012

Support 43 Denitions 44 Appendix 1 Appendix 2 45 46

Click here to return to Contents

Deloitte App Guide July 2012

Before you consider designing an app, consider this

Click here to return to Contents

Deloitte App Guide July 2012

A note to the reader

Deloitte and apps

Click here to return to Contents

Deloitte App Guide July 2012

Why are they useful?

Why are they great?

Click here to return to Contents

Deloitte App Guide July 2012

Click here to return to Contents

Deloitte App Guide July 2012

The following chart gives an overview of the main options.

What is your level of investment?

What is the scale of the distribution?

What is the primary objective of the app?

What is your desired user experience?

High Development and ongoing costs approx. $400,000+

Updateable Contains data and content that requires regular updates

Medium Development and ongoing costs approx. $200,000

Multiple markets Variations on the build in multiple languages

Tool approach with more complex functionality or task based interaction

Rich and interactive Richer functional approach with added video

Single market One build in one language

Editorial approach with simple access to content

Click here to return to Contents

Deloitte App Guide July 2012

A foundation for design development

3. Visualise your idea

Using your wirefra as a foundation, c a working prototy with placeholder v

Click here to return to Contents

Deloitte App Guide July 2012

Dealing with content and data

Click here to return to Contents

Deloitte App Guide July 2012

Click here to return to Contents

Deloitte App Guide July 2012

Click here to return to Contents

Deloitte App Guide July 2012

Discovery 1. Develop your idea

Design and Development 2. Define your function

Delivery 4. Design a prototype

Dialogue 6. Manage your release

3. Visualize your idea

5. Complete and deliver your app

sign off audience? Consistent UI Gestures?

Deloitte App Guide July 2012

App design & visual identity

Click here to return to Contents

Deloitte App Guide July 2012

Click here to return to Contents

Blue brand bar

R0 G39 B118 HEX 002776

R146 G212 B0 HEX 92D400

R0 G161 B222 HEX 00A1DE

R114 G199 B231 HEX 72C7E7

R60 G138 B46 HEX 3C8A2E