Download pdf - Design Doc Template

1

EXAMPLE DOCUMENT

Design documentation example for working with distributed teamsStephen Rea

2

EXAMPLE DOCUMENT

Contents

Page 23 - Updates

Page 29 - (screen title)

Page 39 - (screen title) Page 48 - (screen title) Page 55 - (screen title)


Page 42 - (screen title) Page 51 - (screen title) Page 58 - (screen title)






Page 3 - Change requestsPage 4 - NotesPage 5 - Interaction keyPage 7 - Google patterns used within this documentPage 12 - ButtonsPage 15 - Orange branded patterns used within this documentPage 17 - App logic diagramPage 20 - User journeysPage 22 - Keyscreens

3

EXAMPLE DOCUMENT

Change requestsPage 23 - Text updates. (22.07.15)

Page 24 - Text string additions (22.07.15)

Page 27 - Navigation bar colour change (22.07.15)

Page30 - User stories updated (20.07.15)

Page 31 - Text string additions (22.07.15)

4

EXAMPLE DOCUMENT

NotesThe guideline is based on Android XHDPI (based on Nexus 4 Android L)All assets are supplied in MDPI, HDPI and XHDPI All measurements use dp with font sizes in sp unless otherwise specified. Where applicable / shown - Orange brand overrides Google. All variants are shown within detailed screens. All pattern are in native Android unless otherwise specified with links to references.

5

EXAMPLE DOCUMENT

Interaction key

Note:Every company - sometimes even on a team level will have it’s own way of comunicating interactions. Here we ensure there can be no confusion by reitterating them at the start for reference if required.

6

EXAMPLE DOCUMENT

Interaction Key

a

a

a

a

1

1

a

a

b

a

oremLooo

psumIppp

olorDoo

t ametSiti

User interactions

New indicators

NEW

NEW

Text strings

Colours

Pattern id’s

Page animations/transisitons

Miscellaneous Fonts

Assets

tap

page/menu slides on from the left

Icon Naming:

ic_name_of_asset

ic_name_of_assett

Description (title/subtitle) Multiple line/single lineRoboto Regular 14sp #ffffff

pointer to text

#FFD200

name of pattern if relevant

pointer to coloured area

pointer to pattern

pointer to asset

pointer to asset

Aseet naming:

shows which screen the element clicked or tapped goes to

Pointer to other native elements

XML_id_here

pointer to text on screen

long touch

double tap

flick/swipe left

flick/swipe right

flick/swipe up

flick/swipe down

drag/slide left

drag/slide right

drag/slide up / drag/slide down

Pinch out with 2 fingers

Pinch in with 2 fingers

a

b

7

EXAMPLE DOCUMENT

Google patterns usedwithin this document

Note:In order to avoid confusion it sometimes helps to make sure everyone knows which standard patterns they should be using.

These are generally copied & pasted but even the simple act of doing that can save a lot of time in specification making later on.

8

EXAMPLE DOCUMENT

Typography

Roboto is to be used throughout unless otherwise specified.

All used sizes and wights are listed below and referenced in visual spec keyscreens where used.

GOOGLE GUIDELINE LINK:

http://www.google.com/design/spec/style/typography.html#

PrimaryLight theme default type color

Default light bg: #FFFFFF

Secondary

Disabled

Primary

Secondary

Disabled

#000000

#000000

#000000

#FFFFFF

#FFFFFF

#FFFFFF

100%

54%

38%

100%

70%

30%

Dark theme default type color

Default dark bg: #000000

RobotoSubheader

Title

Body 1

Body 2 / Men u

Caption

BUTTON

Regular 16pt

Medium 20pt

Regular 14pt

Medium 14pt

Regular 12pt

MEDIUM 14PT

Headline Regular 24sp1.1a

1.2b

1.2c

1.2d1.2a

1.2f

1.2g

1.2h1.2e

1.1b

1.1c

1.1d

1.1e

1.1f

1.1g

9

EXAMPLE DOCUMENT

Lists

GOOGLE GUIDELINE LINK: http://www.google.com/design/spec/components/lists-controls.html

Line item selected

Line item unselected

Line item selected

2440

40 241

2

3

4

Line item selected

Line item unselected16 16

8

Line item selected

Line item selected 56

88

72

Font Colour Spacing sizing key

1 Subheader: Roboto Regular 16pt Colour: Primary #000000 100 %

2 Radio Button Off Colour: Primary #000000 100%

3 Radio Button On Colour: #FF6600

4 Background Colour: Primary #FFFFFF 100%

Vertical keylines determine placement of

type and icons from edges of elements.

Vertical sizing determines the height of

content blocks.

Horizontal margins determine spacing .

24

56dp

8dp

16dp

2.1 2.2

10

EXAMPLE DOCUMENT

Branded elements

Note:There are of course times when a companies brand will take precedence over a standard pattern. This next section deals with exactly that.

11

EXAMPLE DOCUMENT

Branded elements

Font C olour

1 Button: Roboto Medium 14pt Colour: #FF6600 100 %

2 Button: Roboto Medium 14pt: Primary #FFFFFF 100%

Spacing sizing key

8dpVertical keylines determine placement of



content blocks.


24

Flat Raised

NORMAL

PRESSEDPRESSED

NORMAL

88

36

1

Flat Raised

NORMAL

PRESSEDPRESSED

NORMAL

88

36

88

36

2

10.1

10.1a

10.1c

10.1b

10.1d

10.2a

10.2c

10.2b

10.2d

10.2

12

EXAMPLE DOCUMENT

Cards

The below cards are a derivative of the standard Google Android cards.

Card margins: Padding from edge of screen to card: 8dp Space between cards: 8dp Cards have rounded corners. Rounded corners: 2dp GOOGLE GUIDELINE LINK: http://www.google.com/design/spec/components/cards.html

Le Cloud d'OrangeStockez vos fichiers et consultez-les où que vous...

INSTALL

80

80

24

24

1

2

3

Le Cloud d'Orange

ACTION

8

88 8

88

8

8

88

8

12

8

Stockez vos fichiers et consultez-les où que vous...

8

8

8 8

8

8

8

7.1 7.2

Spacing sizing key

12dp

Touch area

8dpVertical keylines determine placement of



content blocks.


24

1

2

Subheader: Roboto Bold 16pt: Primary #FFFFFF 100 %

3

Body 1: Roboto Regular 14pt: Primary #FFFFFF 100 %

Button: Roboto Meduim 14pt: Brand Colour #FF6600 100 %

13

EXAMPLE DOCUMENT

App logic diagram

Note:When mapping out an application it is always important to make sure it can be seen as a whole. In the early stages of design it can be difficult to match this against screens. So instead of struggling I create a simple logic diagram. This helps see the app as a real thing and allows for analysis of the happy paths through the app allowing for edges cas-es and fail states as well as pain points in developments to be identified early.

14

EXAMPLE DOCUMENT

Overarching App logic diagram

15

EXAMPLE DOCUMENT

Clean screen layout - wireframe

updates

OPL/ORO consent HS

settings historyh aboutinfo

MenuOrange selection

highlight

16

EXAMPLE DOCUMENT

User journeys

Note:Once the logic for the app is agreed and screen maps have been created it’s time to start thinking about interaction and specific micro user journeys that define the user experience and that the user will follow when interacting with the app.

17

EXAMPLE DOCUMENT

UJ01 - User journey for xxxxx

installedOrange app update


installedOrange app open

openinstalledOrange app

App updates

14:59




cancelinstalling...Orange app

App updates

14:59

I choose to do this and the game opens,leaving Apps Orange open in mymultitask area ready for when I wantto use it next.

Edge case

I start updating the app and decide I don’t want to anymore

I press the soft ‘back’ key.

A pop up dialog box will appear asking me if I still wish to leave the app whilst I am downloading and that my download will continue in the background.

I am given an option to leave the app or to stay in the app.

I choose to stay in the app and the dialog box disappears and I am able to cancel the download in progress by pressing cancel.

on install and I can see the progress ofthe installation within that screen.

Once the install has completed I amI tap Updates and am takento the App updates screen

I am on Orange selection screen, and decide to update an app.

03 040201




continuepaused...Orange app

App updates

14:59





App updates

14:59





App updates

CloseC ontinue

Warning





App updates

14:59

a b c

I swipe right to reveal the Navigation Drawerref to drawer : http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html

18

EXAMPLE DOCUMENT

Keyscreens

Note:Screen animations and interactions also need specifications, not to mention all copy used in any app needs to be provided in .xml format so that multiple lunges can be supported. Along with colours, patterns and amendments to patterns.

19

EXAMPLE DOCUMENT

Keyscreen - Updates : Screen interactions

NOT NOW BROWSE APPS

Welcome to >Operator Name>We’ll shortly be personalising your device. This may include installing or updatingyour apps.

Tapping anywhere on the notification with redirect the user to the Apps Orange catalog .

Tapping ‘browse apps’ will delete this notification and take the user to the Orange Selection screen.

OT

Interactions

Pinch in with 2 fingers will contractthe notifcation.

Swipe up anywhere on notifications will scroll notifications (if there are toomany to display within screen). note - a scrollbar will not appear.

Swiping left or right will removethe notification from the list.

Swipe up from below notifications willclose the notification drop down overlay.

Tapping ‘not now’ temporarily removes the notifcation, to be re-sent 24hrs later.

Specifications

Purpose:To welcome the user to Apps Orange and give themto option to fnd out more about the app.

Default Footprint:notification

States:Each notification has 2 states: expanded viewshort (reduced) view

Usage

On the Homescreen I receive a notification and am able to swipe down from this notification bar to reveal them.

I may tap ‘more info’ to find out more - this will open Apps Orange T&C’s.

I may swipe the notifcation away to the left or right to remove it.

I may press ‘browse apps’ and this will delete this notification and take the user to the Orange Selection screen.

I may also click the notification itself (not button links) and then I will be redirected to Apps Orange > Orange Selection.

If I do nothing the notification will stay in the notification drawer until I remove it.

ab

cd

welcome_to_orange_oem_dialog_textacheck_account_oem_dialog_textbmore_info_textcbrowse_apps_buttond

Text strings

20

EXAMPLE DOCUMENT

Keyscreen - Updates : Text strings and pattern notes

Text strings

NEW

NEW

selection_menu_item

install_button

install_button

Background bar colour #50BE87

Overflow menu

Card

do not include search/overflow icons

b

c

a

5.1

7.1

bc

a

5.1

a.1

7.1

Patterns notes/screen changes

a.1

21

EXAMPLE DOCUMENT

Additional information

Updated:June 15, 2015 Size:13M Current Version:2.7.1 Requires: Android 2.3 and up Developer:Orange SA

What's New

Cette mise à jour vous apporte :- l'ouverture de l'appli pour les clients DOM- la correction de bugs et l'amélioration de la performanceN’hésitez pas à nous signaler tout dysfonctionnement en remplissant le formulaire "signaler un problème" (dans le dernier onglet du menu).Merci !

INSTAL L

Le téléphone et le répondeur de la maison toujours à portée de main

Livebox Phone (anciennement nommée Livephone) est une application gratuite qui vous permet d’utiliser votre ligne de téléphone par internet Orange (fibre ou ADSL / VDSL, grand public ou pro de France Métropolitaine et des DOM) depuis votre smartphone ou tablette.

Vous pouvez émettre et recevoir des appels en qualité HD quand vous êtes connectés à votre Livebox à la


INSTAL L

Livebox Phone

What's New

Cette mise à jour vous apporte :- l'ouverture de l'appli pour les clients DOM- la correction de bugs et l'amélioration de la performanceN’hésitez pas à nous signaler tout dysfonctionnement en remplissant le formulaire "signaler un problème" (dans le dernier onglet du menu).Merci !

• l’option 2eme ligne des offres LiveboxPour tout dysfonctionnement, contactez-nous via le formulaire "signaler un problème" disponible dans l’application (dans "" °°° "" dernier onglet du menu).A très vite !L’équipe Livebox Phone

Additional information

Updated:June 15, 2015 Size:13M Current Version:2.7.1 Requires: Android 2.3 and up Developer:Orange SA

text area continued...


INSTAL L

q

11:01

Livebox Phone

Fonts | Colours

1App titleSingle lineRoboto Bold 20sp #000000

2App descroptionSingle lineRoboto Bold 16sp #000000

3

4

Description heading textMultiple lineRoboto Bold 14sp #000000

Body textMultiple lineRoboto Regular 14sp #000000

1

2 4

Image area = 16:9 aspect ratio (incl.

status bar)

NOTE: Image are is black with logo

as per this spec when no image is

provided for app

View: Product image not available = use fallback of black with Orange logo

Scrolled view: screenshots available View: no screenshots and no main description text = basic info displayed

NEW

16dp

56dp

56dp

24dp 16dp

8dp

8dp

Image area for screenshots

= 16:9 aspect ratiio(including status bar)

NOTE: Screenshots start a6dp in from

the left edge and are 8dp apart, they

scroll from the right to left

Screenshots may only be portrait

24dp

24dp

16dp

24dp

24dp

24dp

Keyscreen - More Info - screen specifications

22

EXAMPLE DOCUMENT

Thank you