Page 1

Avi Soudack

Work Samples

www.brightroom.ca

Maps and models Content definitions Wireframe diagrams Specification documents

1


Vision

Concept map Convey relationships among users, content and features


Concept map

3


Trajectory

Journey Mapping a person's experience with an organization across all channels


Journey map Course Flow Work on Unit 1 Package 1 PIN and St Num

Access DCCs online

Register online My courses

Key Questions Unit 1

Start course

Journal

Journal

Reflect/Eval Call or email re admin issues

Choose Quickstart Submit Unit by e-Journal

Call / email tech probs

Course material on backorder

Read teacher comments

Check for marks/pack 2

Required Possible

Submit Unit 1

Transfer to another course

Repeat unit / Transfer

Check marks on e-Journal

Call / email from guidance

Work on Unit 2-4

Package 2

Unit 2-4

Access DCCs online

Key Questions

Submit Unit 2 ...4

Journal

Progress Report

Get Test date letter

Check Records / Credits

Read teacher comments Take final test

Check for marks/pack 2

Required Reflect/Eval Possible Submit Units by e-Journal

Check marks on e-Journal

Download Practice Complete Practice tests Practice tests

ILC Message

Credit

Check test date on eJournal Re-schedule test

Re-take final test if fail (2x)

Inquire about credits / OSSD

Get Credit

5


Listening

Personas & user research Qualitative and quantitative methods to describe and understand people: visitors, customers, clients, browsers, readers...


Personas and user research

7


Understanding

Task, user & domain models Representations of what people do, who they are, what they need and want, and how they think


Task, user, and domain models

9


Relative place

Sitemap Maps identify key entry points, groups, relationships, and naming conventions


Sitemap

11


Sequence and elements

Navigation map Simplified drawings to convey key steps and easily identify contents


Navigation map

13


Relationships among parts

Content model Defining content elements and how they inter-relate


Content model Wiki information page: navigation and functions

Information page

Section

can be child/ parent of

is part of a

Categories

can be in

Related pages

can have

Information page can be printed

can be edited

Edit view of topic

Can have attached documents

files

Can have comments

Page comments

has version history

has change notifications by email and RSS

can be bookmarked

can be emailed

Print version

History of topic

RSS email

Bookmark Information page

Email to: Information page

15


Parts and whole

Wireframe diagram Describing the parts of a product and how they fit together


Wireframe diagram search search [Microsite] [Microsite]

Publication items - generic pages

Microsite Name

LOGO

Publication title goes here

Microsite tag line

Home L1 page L1 page L2 page L2 page L2 page L1 page L1 page

Microsite generic page at L1

m2

Praesent vitae dolor sit amet lectus interdum laoreet. Nullam tristique aliquet justo. endrerit sed, arcu.

Print page Email

Image Intro body copy.

104 KB pdf file

CTA

Download pdf

Components Title Image Description Download file Order/more info URL

Order

m5 m3

List Go to BPA main site

Download files - generic pages m2

Document title Description usto. endrerit sed arcu interdum laoreet (104 KB pdf file )

Site sponsor Publication

Components Document title Description File size/type File type icon

Document title m2

Description usto. endrerit sed arcu interdum laoreet (104 KB pdf file ) Publication

m4 m3

Audio files - generic pages Download files

Audio file title Description usto. endrerit sed arcu interdum laoreet (104 KB type file ) Microsite global nav

Components Document title Description File size/type File type icon

Main Site Global Nav

m5

Table of contents list - links to anchors in page Table of contents list Link to element title

Components Title Links

Link to element title Link to element title

17


Small multiples

Mini-wireframes Page sketches to convey shape and purpose


Mini-wireframes Content page

Home page

home

services nav

do it online

people

The home page and navigation pages are intended to help users answer these questions: • What is on the site? • Will I find what I want? • What are my options?

news

find

content breadcrumb > bread

Section or page title

local nav

do it online

popular links

map

contac t

content

what's on

related sites

map

contextual navigation

Navigation pages

category page Category title

services nav category navigation

do it links

Content page variations

promotions

call out

local nav

Page title topic links services nav

topic links topic links

map

do it links

topic links call out topic links

promotion /callout

Category pages, used for categories such as 'Roads and transport' and 'Your council' will include: • Links to the Service category pages, as on home page, in the left hand column • Links to sections within the category in the main content area

map

portal page

document s

Portal pages, used to gather links that are relevant to types of people (e.g. Children and families) or on a specific theme, will have the same structure as category pages, except: • The main content areas will features groups of links on related topics

Elements: • Breadcrumb navigation • Page title • Local navigation, including the page’s category and section, and any sibling pages or any child pages • Main content area for text, image, link lists, multimedia content, etc. • Contextual navigation links to related topics and/or child/sibling pages • Right column for related content of specific relevance to page

index

breadcrumb > bread

breadcrumb > bread

Section or page title

Section or page title

teaser

teaser

do it

local nav

do it List of links to subordinate pages

map

content

call out

call out

Promotional or teaser elements (text + graphics) could be inserted at the top of the main content area.

map

call out

call out

A dynamic list of links to child pages in the main content area would allow a page to serve as an index or sub-section "top" page. 19


Explanation

Annotated diagram Helping designers and developers by describing functions and content


Annotated diagram Forum | Contact Us | Sign Out

Site Branding

Top of Page Information Row CoolNicheSite.com (1234)

Control Panel 1

Ad Selection

Welcome

CoolNichesite.com 12345 June 23, 2006

4

Reports

3

Today

Revenue eCPM Paid views Fill rate

Yesterday

Average

$75.63 $5.67 753 55%

$95.34 $4.12 802 65%

$37.65 $2.36 456 57% Hourly

<15> New campaigns for your review Choose Ads >

4

Daily Weekly Performance

Adcode

Ad Type

All Ad Types

Personalized message here, e.g. about demo survey. Update now. or Contact Publishers Services.

All Adcodes

GO

5

Please Update Your Contact info

Above the Scroll Banner

Burst announces new initiative PR headline here. Update now.

Below the Scroll Banner

Three popular reports - each available on this page. See next pages for details.

nn% nn%

6

$ xx.xx $ xx.xx nn%

Leaderboard

$ xx.xx nn%

Pop-up

$ xx.xx nn%

Campaign ABCD Popup $0.47 CPM June 1 to June 30 2006

Skyscraper

$ xx.xx

Wide Skyscraper

nn% $ xx.xx

7

Earnings

Reports

Revenue History

Earnings Summary, Monthly

www.Sitepoint.com [x]

Set Up Default Campaigns

Year to Date Earnings

www.Geekreview.com [x]

Get Started GUide

www.Clickz.com [x]

Publisher Forums

Your Account [x]

1,000 publishers share their knowledge and opinions.

(c) 2006 Media All rights reserved

7

Quick links

8

Reports

Fill rate

8

Quick Links

Your Links Area where user can save favourite links. List seeded with several useful external links. - Click "Add a link" opens in-page text field for user to insert link address and "save" button. - Click save button closes field and adds link to i

nn%

Box

Campaign XYZ Banner $0.47 CPM June 1 to June 30 2006

Add a Link

Tabbed reports area

$ xx.xx

Featured Campaigns

Your Links

Message Centre

Show Table

nn% $ xx.xx

Average

- Publisher's name and today's date - Revenue, ecpm, views and fill rate data for today, yesterday and average (period tbd). - Review and Select Ad campaigns: live indication of <current number of new campaigns> and button link to Ad Selection>Review and Choose Ads page 1.1.

- Network-wide and publisher-specific messages. - Links to pages in Support>Documentation - Featured campaigns with link to Ad Selection>Review and Choose Ads page 1.1.

ViewsWeekly and Clicks

Daily Summary by Ad Type for Yesterday - June 12 2003

Your Survey Count is Low

6

3

Review and Select Ad Campaigns

5

Burst announces new initiative PR headline here. Learn more.

Campaign ABCD Popup $0.47 CPM June 1 to June 30 2006

2

Support

2 Today on <Network>

Message Center New Source Code Released

Your Account

June 23, 2006

1

9 7-Day Performance by Ad Code Your Reports Reports you have recently viewed or saved.

Control Panel | Publisher Forum | Contact Us | Sign Out

Links to most popular reports on Reports> Earnings and Performance page 2.1 9

Your Reports - Displays links to reports user has most recently viewed on Reports> Earnings and Performance page 2.1 or saved in "Report Builder". 21


Detail

Functional specification Structured and thorough definition of interaction behaviour and technical requirements


2

Note side of panel

User can type or clear note text this field

3

Email reminder side of

User can specify Email reminder date

Functional specification

panel

4.4.2.4

Layout detail

Detail of annotation/email reminder panel open (Site map c1)

4.4.2.5

Features

#

Name

Description

1

Date item available for

User has clicked on either the note/edit icon or the email icon in this row,

note and/or email

opening the panel

reminder 2

Note text field

User can type note into this field Field pre-populated with "Type note here" text Maximum 500 characters

3

Clear note link

"Clear note" link clears contents of note text field

4

Send reminder checkbox

Clicking the checkbox enables email reminder date selection controls

5

Date selection drop

User chooses from drop down menus to indicate date or clicks Date picker

down menus and date

icon to open interactive calendar to select date

picker 6

Save / Cancel buttons

Clicking on Save button, saves any text and/or email reminder choices made and closes panel Clicking on Cancel button, closes panel returning list to previous view

23

76 - 80 Southwark Street, Bankside Studios, London SE1 0PN Proprietary & Confidential

Prepared by MRM Partners

07/03/2011


Who, what and when

Flow diagram Conveying movement through an interactive product, including workflow among several parties


Swimlane flow diagram HR administrator

Job holder

Countersigning manager

Manager

Status Open

Login

Login

Home / progress0.0

Home / progress0.0

Statement / Objectives2.0 APR2.0 – 2.1 – 2.1

Objectives/ Statement2.1APR2.0 – 2.1 2.2

A

Home / progress0.0

A Draft

Job holder sent

Send

A Sign

Manager signed

A

Required

Statement 2.3

Sign

A

A

CS Manager signed

Required

Statement / submit2.4

Job holder signed

Sign / Send

Signed Required

A 25


Keeping track

Content & feature inventory Structured list of contents, features and functions, cross-referenced to sitemap and specification documents


Content & feature inventory ID

Page/Section

Description

0

Home

Two versions Release s1 and 2

A.1 A.1.1 A.1.2 A.1.3 A.1.4 A.1.5 A.1.1.x

Analysts Corner Equity Analyts Economics Analysts Fixed Income Analysts Foreign Exchange Analysts Emerging Markets Analyst pages

Eq.0 Eq.1 Eq.2 Eq.2.x Eq.S Eq.C Eq.3

EQUITIES Strategy Coverage [Focus Page] Sector pages Company pages Publications

Eq.3.x Eq.4 Eq.4.1

Tools

[Promotional Pages] Edge Live

Eq.4.2 Eq.4.3 Eq.4.4 Eq.4.5

Market Statistics Key Assumptions Up and Down the Street Traders' Edge

Eq.4.6

Universe of Coverage

Eq.4.7 Eq.4.8

SC Income Trust Index SC Quebec Equity Index

Eq.5

Eq.7 FI.0 FI.1 Ec.0 Ec.1

Disclosures Analyst Standards Definition of Scotia Capital Equity Research Ratings & Risk Rankings Disclaimer Edge Web Edition Fixed Income Publications Economics Publications

SitemapSample.xls

Rel 1+2 1 1 1 1 1 1 1

See next tab Possible page for special topics Dynamic pages created from Edge data Dynamic pages created from Edge data Links to saved qureries of publications and other features grouped as follows: Possible pages for special topics List of links - to pages/tools below Edge application in CMS web page, generates reports in popup window. Help content incorporated into the page. Application opens in new window Commodity and economic forecast SC estimates and IBES estimates Companies by sector and analyst showing comprables, market mix, etc. Release 1 List of analysts byPage sector; InColumn Rel 2 move ID functions into page at Eq.2 Eq.0 Being retired Equities Being retired Eq.0 Left PL3 Equities Eq.0 web page; MiddleRel 2T1B Rel 1 Link to external Equities place form interface in site context

Word Document PDF document PDF document -

Eq.0 Equities

Middle

Eq.0

Middle

See next tab Equities Replaces 'library" Eq.0 Sidebar See next tab Equities top Was 'library' Eq.0 Sidebar

T1B T2c T3 L1

Template

Fixed Income

Content / Design Requirements

Home

Write/approve blurbs and welcome

Analyst Corner

Analyst info checked

Analyst

Analyst bios and photos, subjects

1 1 tbd 1+2 1 1+2

Research Main Focus Generic Focus Sector Company Generic

tbd 1 1

Focus Special [external]

Application

Rebranding: Colours and logo

1 1 1 1

[external] [external] [external] [external]

Application PDF from Edge Excel from Edge PDF from Edge

Rebranding: Colours and logo Rebranding? Rebranding? Rebranding?

1 [external] Description Excel from Edge Component

Rebranding?Content Required

Static

Opportunity to add text, teasers

EDGE Feeds EDGE Feeds Dynamic All publications, Tabbed

Release 2

n/a List Product

All equity research products

R1

Column Eq.0 Equities Left

Release

Teaser, 1+2 BlurbSpecial

Query Portfolio Strategy documents. + text Text required Application from Compliance review

R1

Middle

R1

Middle

R1

Middle

n/a

1 1

Teaser, Blurb

EDGE PDF PDF

Compliance review Compliance review

Link to EDGE Live page Eq4.1 + text

Text required

1 PDF Compliance review 3 Special Teaser, cross section Link to Equity Analyst page in Analyst corner Text required 1+2 Research A1.1 Main+ text 1 Publications Featured Report System generated content n/a 1+2 Research Main Publications Tools1 Static list: links to pages Eq4.1, Eq 4.2, Eq4.3, Title and Link text

Equities Eq.0 Sidebar L1 Disclosures Equities Eq.0 Fixed Sidebar IncomeL1v sectionRecently viewed Equities Eq.0 Equities

FI.0

Type

R1/R2

Eq 4.4 and Eq 4.0 Static list link to: Eq.5

Title and Link text

R1/R2

Sidebar top Sidebar

Standard title and dynamic list

n/a

R1/R2

Sidebar

03/07/11

R1/R2

Sidebar

See next tab

27


Guidance

Style guide Ensuring consistency of content, brand, tone of voice, and experience


Style guide

Content Pages

Hyperlinks

Content pages contain the core information on the site. These pages need to be written as if they answer a user’s questions.

Good links have one essential characteristic: a link’s text must match the title of the target page. Ideally, the link text and the target page title are identical; sometimes similar is good enough.

Structure the page Use: • pyramid style • important point first • logical order • answer users’ questions Chunk the content Use: • hierarchy of headings • short paragraphs • bullets

Right

Wrong

Link: How to Enrol Page: How to Enrol

Link: Learn More Page: How to Enrol

Link: Grade 9 course list Target: High School Courses: Grade 9

Link: Our courses Target: High School Courses: Grade 9

Place the link text at the end of a sentence or phrase.

“If, then” In sentences: • begin with clues to relevance, followed by key point

Related Links Content pages can offer users a list of alternative destinations on the site. When providing related links: • Group these related links together at the bottom of the page. • Use the standard title “Related Information”.

Right

Wrong

Learn about facilitated community programs.

Facilitated community program information

Download and complete the ILC Course Registration Form.

The ILC Course Registration Form is available for downloading.

To give ILC permission to release information, complete the Release of information form.

Complete the Release of Information form to give ILC permission to release information ...

External Links

A list of related pages at the bottom of a content page

Links to external sites should open in a new window (or tab, depending on the user’s settings). The link text should make it clear that the visitor will leave the ILC site: “Access a real-time, online personal assistance reference centre at the Ask Ontario website”.

ILCOrg_Style_Guide_v1.4.doc

11 of 35

ILCOrg_Style_Guide_v1.4.doc

14 of 35

29


Avi Soudack www.brightroom.ca

30

Work Samples  

Information and experience design deliverables by Avi Soudack.

Read more
Read more
Similar to
Popular now
Just for you