UX Design Portfolio

ALFONS HUDESCU Associate Creative Director, Experience Design

Interactive Design Process Concept Development & Strategy Information Architecture User | Functional Flows Design Specifications Web Applications | Architecture & Interface Design Mobile Applications | Interface Design Usability Guidelines

USER EXPERIENCE The lasting impression formed while interacting with a system's various attributes: functional features | content | information layout | navigation | visual design | interface behavior are shaped by all the emotional responses to the brand message, content, visual impact and usability of the system. also implies the user's active participation with the system through the services offered. They are not limited to the "visible" layer and include interaction with other systems and requirements related to security, performance, reliability.

Translate business concepts or vision into: concrete requirements visual/interaction designs designs specifications Analyze user needs and define a corresponding digital experience by applying a mix of strategic, creative and technical skills

INTERACTIVE PROCESS

INTERACTIVE DEVELOPMENT PROCESS

+

Analysis [ Problem Seeking ] Exposure

Approach

Holistic Structured Humancentric

Deliverables

REVIEW / ANALYSIS: - Business Requirements - Communication Strategy - Client Wish-list - Market / User Research Identify Mission/business Objectives Usability Evaluation Consumer Requirements Definition Human Factors Requirements Definition CS

+ Synthesis [ Problem Solving +

IDEATION - Conceptual Design Sessions - Scenario Exploration/ development

PLANNING - Content Structure Modeling - Navigational Planning - Content Management Planning

IA Concept Development User Modeling User Task Analysis Use Case Modeling Functional Requirements Definition

Site Architecture Development

+

I mpleme nt

+

Solution

UI Analysis

Review Site Build

Information Design

Validate

Interaction Design

Issue Resolution

Navigation System Design Contextual User Flows Modeling

C

C CS

AUDITS [ FUNCTIONAL/COMPETITIVE ] HEURISTIC EVALUATION REQUIREMENTS ANALYSIS BASELINE REQUIREMENTS DOCUMENT

Design

]

Statement

T

C [ Establish Project ContextT& Focus ]

Execute

Architect

+

Activities

IA

Specify

Defin e

Explore

CONCEPTUAL IA [INCLUDING RATIONALE] TASK ANALYSIS DOCUMENT USE CASES & REQUIREMENTS DOCUMENT

+

T

C

CS

IA RATIONALE DOCUMENT FINAL INFORMATION ARCHITECTURE USER/PROCESS FLOW DOCUMENT

+

T

T

C CS

CS

UI DESIGN SPECIFICATIONS [FUNCTION / RELATIONSHIP / BEHAVIOR] - OVERVIEW DOCUMENTS [high-level] - REFERENCE DOCUMENTS STYLE GUIDE [UID]

+

+

+

Dependencies Diagram IDENTIFY BUSINESS OBJECTIVES DEFINE USER REQUIREMENTS INITIAL TECHNICAL ASSESSMENT

USER TASK ANALYSIS

SITE ARCHITECTURE DEVELOPMENT

INFORMATION DESIGN

SITE BUILD REVIEW

USE FLOWS

INTERACTION DESIGN

ISSUE RESOLUTION

NAVIGATION SYSTEM DESIGN

IA CONCEPT DEVELOPMENT USE CASE MODELING

SYSTEM & APPLICATION ARCH.

APPLICATION DESIGN SPECIFICATIONS

PAGE BUILD CYCLE APPLICATION BUILD CYCLE

DEFINE TECHNICAL SCOPE

REQUIREMENTS SPECIFICATION

WEB PUBLISHING ARCHITECTURE

DATA MODELING INTEGRATION CYCLE WEB PUBLISHING SPECIFICATIONS XML SCHEMA

Validate

HIGH-LEVEL UX PROCESS

UNDERSTAND CONTEXT

Digital Strategy Review Brainstorming Client Consultation Profile Target Users

ESTABLISH SCOPE

Content Analysis Define Personas Define System-Wide Attributes Define Requirements

DEVELOP IA

DESIGN

CREATIVE CONCEPT

UX Map Content Architecture Contextual User Flows User Tasks Analysis Use Cases

FINALIZE CONCEPT

User Interface Design Navigation Design Interaction Design Functional Specifications Prototype Testing

SPECIFICATIONS

SUPERCOMPS+COPY

+

STYLE GUIDE

CONCEPT & STRATEGY

CONCEPT VISUALIZATION

USER ENGAGEMENT MAP

USER ENGAGEMENT MAP

USER JOURNEY

AUTOMOTIVE SHOPPER: DECISION-MAKING PROCESS

PERSONA

INFORMATION ARCHITECTURE

IDEATION

CONCEPT ARCHITECTURE

Member Account

mypedigree.ca Content Pillars

HOMEPAGE 1

Pups+Dogs

2

3 Adoption

4 Community

PUPPIES

BY CATEGORY

EARLY STAGES

PEDIGREE® CLUB

ADULT DOGS

BY LIFE STAGE

CHOOSING YOUR DOG

PUPPY MILESTONES

SENIOR DOGS

NUTRITION FACTS

AFTER ADOPTION

POSTCARDS/VIDEOS

BREED GALLERY

NUTRITION RESOURCES

SHARE YOUR STORY

FORUMS

FAQ

Tools

Dog Food

FAQ

OFFERS

STORIES

SEARCH Filters + Keyword SELECT-A-DOG Fetch A Name

Adopt-O-Dex

Glossary

Find A Shelter

Age Calculator

A Dog’s Life

Communication

Campaigns | News | Events | Ask An Expert | E-mail Alerts | Contact Us

Online Extensions RSS Feeds

Google Mash-ups

Podcasts

Wiki-Pedigree

Widgets

Facebook | Dogbook | iGoogle |

CONTENT RELATIONSHIP DIAGRAM

downstream flow

contextual flow

1 2

Search

MEAL IDEAS RECIPES

PRODUCTS Health& Nutrition

Eating Well

Products 3

Learning

downstream flow

contextual flow

1 Search

2

RECIPE Save Rate Submit Recipe

PRODUCT Health& Nutrition

Products 3

Meal Ideas Learning Content Hierarchy Primary Secondary Tertiary

SITE ARCHITECTURE HOMEPAGE

0.0

GLOBAL FUNCTIONS

programs

d

articles

d

<Episode> [3]

P1

Wet Food Whiskas Cuts

P2.1

Whiskas Pate

P2.2

Whiskas Bites

P2.3

Cat Milk

P3

New Treats

P4

Kitten Food

P5

Food Guide

T1

SLOW-MO CATS

<Episode> [4]

by Ingredient T1.1

Search Search Results

Latest Episodes C0.n

Understanding Your Cat

3

<Episode> [3]

C1.1

Choosing A Name

C1.2

Home is where the scent is

C1.3

On the hunt

C1.4

Sleep

C1.5

Good habits for owners

C1.6

Cat Lovers Live Longer

C1.7

8

M1.1 > M1.n

r Photo Album CANDID CAT VIDEOS

J

M2.1

T3

> M2.n

M3.1

C1

> M3.n

In Detail

NOTES

Cat's Well Being Grooming Your Cat House Training Your Cat Clean Cats, Happy Cats

C2.1

..your cat's teeth clean

C2.4

C2.2

MEDIA UPLOAD Video

C2.3

1

Manufacturing Process Whiskas Quality The Whiskas Team

2

What Should My Cat Be Eating?

Is My Cat Overweight?

Is My Cat Allergic?

What Are Healthy Treats?

3

Tail talk Playtime The hunt Night Sight

4

Welcoming a New Kitten Feeding Time Caring for Your Kitten Kitten Proofreading

5

Introduction to Adalbert and his cat, Tricks Dr. Adalbert’s analysis series

6

TYPICAL CONTENT Description Varieties r i i Daily Feeding Guide AAFCO Statement i r i TOTAL HEALTH

7

whiskas.com/about_cats/article.aspx?aid=19 whiskas.com/about_cats/article.aspx?aid=83 whiskas.com/about_cats/article.aspx?aid=87 whiskas.com/about_cats/article.aspx?aid=31 /whiskas.com/about_cats/article.aspx?aid=53

MV FORM

Photos

MP FORM

Playing Games

C3.1

Rewards| Reprimands

C3.2

Hidden Dangers

C3.3

If Your Cat Could Talk

C3.4

CAT QUIZ CORNER

Detalis

T6

Interactive Tool WALTHAM® S.H.A.P.E™

Stories

MS FORM

LEGAL

i

ML In Detail

ASK A CAT

T6

Interactive Tool T7

PDF File

CAT MAIL Register

CAT MAIL

11

Register

11

Contact Us

Product List

TOTAL HEALTH SYSTEM

MEMBER SIGN IN REGISTER

Videos

CANDID CAT STORIES

i

S1.n

Results [list]

5

M0.n

CANDID CAT PHOTOS

Choosing your Cat

10

+ Share This

M0

CAT WHISPERER

Lifestyle

Product Selector

by Preference

News story

COMMUNITY

PROGRAMS

Latest Episodes P0.n

Dry Food

tools

C0

d

V

Latest Episodes

r i

CAT CARE

PROGRAMS

INSIDE THE PLANT

i

V

P0

V

PRODUCT

PROGRAMS

CAT MAIL

11

Register

11

i

USER | FUNCTIONAL FLOWS

USER FLOW

REGISTERED / NOT LOGGED-IN

C

SIGN OUT

Logged-in

SIGN IN

x

x

SIGN IN Email

Password SIGN IN

Remember Me O Forgot Password?

update profile

+

Not Registered? Click here O

connected?

N x

CONNECT TO FACEBOOK

Logged-in

C

Connected

f

Campbells

You'll be able to post your activity in your Facebook feed.

No, thanks!

C Logged-in

POST COMMENT

x

x

SIGN IN Email

Password

Remember Me O Forgot Password?

SIGN IN

Logged-in

C

Connected

f

Not Registered? Click here O

+ Add Comment

CLOSE

x

Campbells

Comment:

Login with Facebook Connect to post the comment on your Facebook profile.

POST

Logged-in

C

Connected

f

SIGN OUT

USER FLOW Login

ConnectID Sign-In

ConnectID REGISTRATION

Email Confirm Email Password Confirm Password Security Question Security Answer Postal Code Age [must be over 13] Terms & Conditions Checkbox & link to popup Display Captcha / Type Captcha

1

Prefix First Name Last Name Apt/Suite Street Number Street Address City Province Postal Code [pre-filled] Daytime Phone Evening Phone Mobile Phone

2

What is your favorite gaming device to play on? select one How long have you been playing video games for? enter number value Have you ever competed at a video game tournament such as Major League Gaming, WCG and/or Halophax? select one Do you have an Xbox Live Gamer Tag? select one What is your highest level achieved in Halo 3 (overall levels)? select one What is your rank on Halo 3 MLG Playlist? select one If accepted, are you willing to commit yourself to the team and play video games as a full time job? select one

R1

Account Contact Form Us Next

A

Y

display errors

over 13

N

Denied Close

R2 Form

Next Errors ?

Y

display errors

Gaming Experience Next

Forgot Password

Enter Password Login

R1.1

Errors ?

Y

Y

Mange Profile

R3

Account Info

L3

Password

Save

Security Question

Save

Contact Details

Save

back L1

display errors

3 Errors ?

display errors

R4

Verify Info

Opt-in Select back L1

Account Info

Confirmation

L2

Opt-in Options

Opt窶進n Options

Edit

display errors

ConnectID Hub

confirmation Errors ?

c

Delete Profile

3

3

Form

Register

Enter Email

Errors ?

Details

B

L1

Login

1

Message + TC

CAS Global Opt-in Select the Event You Want To Register For select one city Check here if you prefer to play online -------------------------------------------------------------------------------------------

A

User Account

SUBMIT

R5

Thank You Message CLOSE

confirmation

L4 Save

Y

INTERFACE DESIGN

INTERFACE DESIGN : CONCEPT

Page ID: 0.0

studies 2 SEARCH

SHAW.CA

TELEVISION : Cable

Digital

On Demand

Products Television 4 Digital Phone 4 Internet 4 Customer Care 4 Investor Relations 4 Contact Us 4 ---------------------------BUSINESS SOLUTIONS

MY SHAW.CA

TV Support

TELEVISION r

r

Contextual Support Tools

Canadian TV New Channels Survivor Two Great and Youfrom CBC Micronesia

r Two Great New Channels from CBC

CHANNEL LINEUP

PROGRAM GUIDE

r SUPPORT [TV]

Enjoy Free Preview THE SOPRANOS MENU

CABLE TV

ID

Shaw Cable TV is your connection to classic entertainment.

Basic

Classic

DIGITAL TV

ID

More choice, more control, more entertainment.

HDTV ID The future of television

Š 2008 Shaw Communications. All Rights Reserved.

+

PLAY TRAILER

SHAW ON DEMAND

Bundles & Pricing

ID

Video on Demand VOD

Subscription VOD

Pay Per View

Take control over the way you watch TV ID

Watch movies and shows from premium channels

Enjoy private telecasts of exclusive events ID

+

Specialty Channels

ID Terms Of Use Privacy Policy

Set My Locale Contact Us

INTERFACE DESIGN STUDIES

Page ID: 0.0

LOGGED-IN

Shaw Rewards Travel Kids Corner Teen Scene Shopping Gaming Corner

Welcome, Ray! Video On Demand

VIDEO ON DEMAND

News

Lifestyle

National Local World Sports Entertainment

r

NOW PLAYING

Tech Stuff

+

SHAW.CA

SEARCH

Personalize Home Page ?

Shaw News X VIDEO ON DEMAND NEWS FEEDS s p e c i a l s Local Coen Bros. Double Bill ID LIFESTYLE A double dose of the Coen National TECH STUFF brothers with No Country For Old Men and The ManInternationa Who UTILITIES Wasn't There in this special

r

bill on Shaw Video On + Add Feed double Demand.

+

PLAY TRAILER

X

WORLD NEWS

ID

i August 9: Service Canada warns of currently circulating phishing e-mails.....MORE

Russia's parliament has approved former President Vladimir Putin as the new prime minister......MORE

August 9: Announcing Television Channel Line-Up Changes.....MORE

Nepal reopens Mount Everest to climbers on its side after a Chinese team carries the flame to the summit......MORE

August 8: CRTC Heading in the Wrong Direction....

MORE

r

r

SPORTS ID

ID

Enjoy Free Preview of Speed Channel

Tuesday

ID

+ <MODULE>

ID

Wednesday

Max:15º Min:11º

V

X

V

X

Friday

Max:15º Min:11º Detailed Forecast

X

V

i

TV LISTINGS

+ <MODULES>

Assessing the global food crisis: A silent tsunami which knows no borders.... MORE Move

SHAW Auction Corner

Two Great New Channels from CBC

X

Sports Tuesday, August 18 Entertainment 2008 Financial CALENDAR Technology

Order Online V

ID

Online Support

Max:15º Min:11º

+ Top 10 VOD Movies SHAW NEWS

My Account

WEATHER

Dumb & Dumber Double Bill ID Dumb & Dumber and Dumb & Dumberer for one special price on Shaw Video On Demand.

Minimize

SHAW PHOTO SHARE SHAW MUSIC

l

Financial Technology

+

SHAW WEBMAIL SHAW VIDEO MAIL

V

X

V

X

WIREFRAMES LOGIN HOME | PRODUCTS | MEN'S GROOMING | EXPERIENCE |

PROMOTIONS |

SHOP NOW i

REGISTER

ESPANYOL

SEARCH....

PRODUCTS> SHAVING> PRODUCT NAME B

HTML

<LOGO> <FUSION MVP>

r

1

ADD REVIEW

ASK A QUESTION

x

Have your say. Login and review now MVP IN ACTION Email Address*

2

DETAILS

1

LOGIN EXPERIENCE MVP

RATINGS & REVIEWS

n.n BUY NOW FORGOT PASSWORD

Q & A

4

RATE IT

+

Best Razor I've Ever Owned The best razor I’ve encountered. It has three blades and works better than any razor I’ve ever used. I see no reason to switch to another razor as long as I live. Gillette has perfected the razor with the Mach 3 Turbo. Yes it is better than the regular Mach 3.

R. Federer | <month><DD>,<YYYY> AGREE [2]

DISAGREE [1]

n. n ASK A QUESTION

ADD REVIEW

Write Review*

DISAGREE [1]

r

ADD REVIEW

The best razor I’ve encountered. It has three blades and works better than any razor I’ve ever used. I see no <Have your reason to switch to another razor as long as I live. Gillette has perfected the razor with the Mach 3 Turbo. Yes it is better than the regular Mach 3.

Title R. Federer | <month><DD>,<YYYY> AGREE [2]

| NOT REGISTERED? SIGN-UP NOW

R

<Gillette Fusion MVP><H1> <Rating & Reviews><H2>

3

2

Password*

FUSION MVP POWER MANUAL C

r

say>

max. 1000 chars. TBD Lorem ipsum doloret si amet quod erad demonstrandum lorem ipsum doloret si amet quod erad n.

LEARN MORE n Cancel SUBMIT

1 2 3

F <PRODUCTS>

f Become A Fan

> GILLETTE SCIENCE > PRODUCT LINEUP > PRODUCT COACH

GILLETTE.COM : PRODUCT PAGE

<MEN'S GROOMING> > STYLING VIDEOS > FIND YOUR STYLE > GROOMING GLOSSARY

<ABOUT GILLETTE> > IN THE NEWS > RESOURCE CENTER > CONTACT US

<SHOP GILLETTE> SHOP NOW ART OF SHAVING GILLETTE VENUS

SELECT COUNTRY

x

WIREFRAMES ID: 1.0 M

Home | Francais | RBC.com search

H

RBC Advice Centre HOME

Q&A

PORTRAITS

C

<Your online resource for insightful advice from RBC's top financial thinkers> ADVISORS

EVENTS

RESOURCES QUICK LINKS OTHER FINANCIAL PORTRAITS...

<FINANCIAL PORTRAITS>

r

r

JOHN SMITH Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit....

r

Comments by <Patricia Croft>, <John Doe> Read More

r

<Share Your Story>

Lorem ipsum dolor sit amet elit, consectetur adipisicing elit.

Lorem ipsum dolor sit amet elit, consectetur adipisicing elit. Send profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More View All

P1.1

1 N

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

DAY-TO-DAY FINANCES

SAVINGS & INVESTMENTS

MANAGING & REDUCING DEBT

MY BUSINESS

Filter by...

Your Saving & Investments Questions. Our Answers.

LATEST ARTICLES

Patricia Croft | December 31, 2008 If I have a little extra money what should I do with it?

POPULAR TOPICS LATEST COMMENTS

P1

2

View All S1

Latest Videos

B1.1

Patricia Croft | December 31, 2008 Welcoming in 2009towith a review of funds?

2008 Should I continue invest in mutual

Patricia Croft | December 31, 2008 What investment advice would you give to someone who plans to retire in 5/10/15+ years?

Patricia Croft | December 31, 2008 Now rates are so low should I switch from a variable to a fixed mortgage?

Watch All Savings&Investment Videos

Get To Know Our Advisors r

r

r

r

r

r

r

r

AB1[8] A1[8]

<NAME><NAME> <TITLE> my expertise my latest advice

RBC.COM : ADVICE CENTER

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

<NAME><NAME> <TITLE> my expertise my latest advice

UI DESIGN

MULTI-BRAND DESIGN SYSTEM

DESIGN SPECIFICATIONS

UI DESIGN SPECIFICATIONS Template TM24-1 Phase

Cadence

Intro

Introduction

T0

Welcome

T1

Invite

Intender FTN, COM, DEF

T4

Motivate /Relationship

1

+3

TM0

+2

TM0

+1

TM0

0

TM3 / TM3-1

4

TM7 TM7

[Toolkit ] 6

TT6

7

TM7

Required

ID:

B

Sidebar

<TITLE>

If exists

<copy> …..... >

TM12

12

TM12

C

ID: <Image> [max] 100 X 30 px If applicable ID: <Image> [max] 100 X 30 px If applicable

TM15-1 4

OT

ID:

OT1 [or OT1<copy> 2]

<TITLE>

<TITLE>

Required

<link>

<copy> …..... >

15

TM15

TM15-1

<link>

16

TM-A

TM-A

GW1-2, GMV4, GMA3, MI1

17

TM-A

TM-A

23

TM-A

TM-A

F21

24

TM24

TM24-1

F22

<Top of page>

< UNSUBSCRIBE >

< Legal>

<copy>

<copy> …..... >

TM15-1

TEMPLATE SPECIFICATIONS

Required

<TITLE>

Privacy Policy

B

<graphic> C1 or C2 or C3 or C4 or C5

TM15

F1

Required

P ID:

<copy> …..... > <link>

14

F

OT1

GW offer <graphic>

1

<link>

3

Ci <Content index> 1. <title> Lorem Ipsum 2. <title> Lorem Ipsum 3. <title> Lorem Fixed size: 200 px Ipsum n. <title> <Message>

A

ID: <Image> [max] 100 X 30 px

8

TM15

OT6 or OT4

<copy> [Update]/[create] profile in MyGM…..some copy > 2

TAF

Tell A Friend

ID: G5

UP

TT3

5

[Header image]

<copy> Welcome |name first,last| ……….some copy >

TM3

13

G

Required

Fixed size: 590Fixed X 100size: px 590 px

Branding

[Toolkit] 3

Browse

[Header picture]

H

inactivate

Buy 1

Shop

From:< > Subject: < > To: < > Date: < >

0

Past EPD +4

Motivate

Intender/ Owner LES, PUR, LBO. GMU

Required

<copy> <copy>

F31

< Contact GMCanada>

Variable

Program Opt-in

F32

< Visit GMCanada.com>

CONTENT MODULES SPECIFICATION

PO [Program Overview]

B [Brand]

After Purchase

Own

Opt-in

Opt-in Request

GM Relationship

Y Y Inten t

PO3

Own

Intent

PO1

Y GM

PO4

R1

i1

GMV1

B2

Bi2

R2

i2

GMV2

B1

BCS

R1 R2

B1

R1

B2

R2

GW [Goodwrench]

Vehicle Intent [Survey/Inferred] Own

Bi1

GMV3 CSI

GW1

Intent

GW4

GMA [GMAC] Own

GMA4

Intent

GMA1

GW2

GMA2

GW3

GMA3

GW5 VD1

Bi1

i1

Bi2

i2

BCS

GMV4

GMV1

GMA3

GW4

GMA1

GMV2

GMA2

CSI

GMV3

GMA3

VD2

GMV4

GMA3

PO5

ADAPTIVE TEMPLATES COMPONENT ASSIGNMENT LOGIC

GMV [GM Card]

B1

B2

Y

Inten t

Intent

GM

PO2

Y

V [Vehicle Information]

FUNCTIONAL SPECIFICATIONS 1. 1

Template: TM12 – Motivate: Browsing phase (8-12 months) R E GI O N ID: B Brand M es sa ge

COMPONENTS ID :

B1 o r B2 o r BO

Priority 2 Specifications

R E GI O N

1. Priority rules: A. Message selection based on assigned priority flags, driven by start/end date B. Component BO has the highest priority, if exists 2. Same component will not be selected in consecutive months, unless: A. Component is start/end date driven (event, promo, etc) and selection is required for consecutive months (apply rules described in Corporate Messages/Events section- page Error!

Bookmark not defined.)

3. If brand messages do not exist, REGION B not displayed

ID: V

COMPONENTS ID :

V ehi c le Inf o rm atio n i1 o r i2 o r C SI o r V D1

Priority 3 Status

Required (follow selection cadence)

Specifications

1. Selection cadence rules: A. Select i1-1 at 12 and 8 months prior to EPD B. Select i1-2 at 11 months prior to EPD C. If paragraph i1-2 does not exist, replace with paragraph i1-1 D. Select i2 if only intended <make> declared, at 12,11 and 8 months prior to EPD E. Select CSI if intended <segment> declared, at 12, 11 and 8 months prior to EPD

Reference See page Error! Bookmark not defined.: “Component Matrix: vehicle Information” for component specifications R E GI O N

ID: ST

COMPONENTS ID :

Sho ppi ng T oo ls ST 2 or ST 1 o r ST 6 o r ST 5

Priority 4 Status Specifications

Required (follow selection cadence) 1. Select one paragraph/cadence.  ST2 -12and 8 months (prior to EPD)  ST1- 11 months  ST6 – 10 months

Reference See page Error! Bookmark not defined.: “Component Matrix: Purchase tools” for component specifications

APPLICATION DEVELOPMENT

CONCEPT VISUALIZATION

INTERFACE DESIGN

DESKTOP DASHBOARD

WEB INTERFACE DESIGN

COLLABORATIVE PUBLISHING

WEB INTERFACE DESIGN

MUSIC SHARE

PHOTO SHARE

WEB INTERFACE DESIGN

PROJECT DASHBOARD ENTERPRISE VERSION

WEB INTERFACE DESIGN

ASSET MANAGEMENT DETAIL

APPLICATION DESIGN

SYNCAPSE PLATFORM PERFORMANCE REPORTING

APPLICATION DESIGN

SYNCAPSE PLATFORM INTERFACE DETAILS

APPLICATION DESIGN

SYNCAPSE PLATFORM TWITTER STREAM MANAGEMENT

APPLICATION DESIGN

SYNCAPSE PLATFORM REPORTS DASHBOARD

APPLICATION DESIGN

TOUCH SCREEN INTERFACE (WEB)

APPLICATION DESIGN

TOUCH SCREEN INTERFACE (WEB)

MOBILE INTERFACE DESIGN

MOBILE DESIGN

PERSONAL BANKING CREDIT CARD APPLICATION

IPHONE APP : CONCEPT DESIGN

GILLETTE MOBILE SHOPPING

USABILITY GUIDELINES

ACCESSIBILITY FOR PEOPLE WI T H C O L O R - D E F I C I E N T V I S I O N

In accessibility terms, it is of no interest that a colourblind person might see a solitary block of colour on a web page as something other than its intended red, green, or other confusable colour. Hues perceived in isolation, with no meaning attached to them, are not of critical importance.

Photographs can be exempt from accessibility considerations for colourblind visitors.

The fact that a colour-deficient person doesn't see a photograph the way a colournormal person does is largely irrelevant, unless the whole purpose of the photograph is to differentiate one part from another, and those parts appear in confusable colours.

Designers must acknowledge the fact that emotional or esthetic impact are not the same as meaning in this particular context.

Meaningful [critical] Objects on the page need to be unambiguous.

Text | Links | Navigation [HTML text and/or graphics] | Graphical Interface Elements [buttons] DESIGN CONSIDERATIONS Color must not be the only means of conveying information.

Don't use confusable colours for meaningful UI objects.

Ensure that all information that is conveyed with Color is also conveyed by another means.

Avoid labels/instructions such as : "all required fields are marked in red" Avoid using icons that differ only in their colour Foreground and background colour pairs must have sufficient contrast so as to be clearly distinct.

The W3C suggests that two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range: color brightness : >12 | color difference : >500

Online Colour Evaluation tool: http://soap.stanford.edu/show.php?contentid=54

ADDRESSING THE ISSUE OF THE PAGE FOLD EVIDENCE FROM USER TESTING The fold is not a single location, but a broadly dispersed distribution with three peaks located at roughly 430, 600 and 860 pixels. These peaks correspond to the three most popular screen resolutions used today: 800×600, 1024×768 (90% of users) and 1280×1024. Depending on the screen size, users will typically see at least 430 and up to 860 vertical pixels worth of information on their screens when they open their site, without having to scroll.

Visitors are equally likely to scan the entire page no matter the page size.

Scrolling has become a natural practice in surfing the web. Scrolling is also associated with [and influenced by] web 2.0 design because big, clear text and “spacious”, “clean” content implies longer web pages.

Scrollbars size and position are clear cues to page length: they are used to assess the amount of content on a page, and how much of that content is located below the fold. One of the most common things seen on a heatmap is a strong hotspot over the scrollbar. Users expect to have to scroll.

Less content above the fold encourages more exploration below the fold.

The screens show two different design treatments for the hero slot (the large, prominent image area) on the homepage. The heatmap indicates that actually having less clutter above the fold (one large content block as opposed to 2 smaller ones) encouraged exploration below the fold

CONTACT

2alfons@gmail.com

https://www.linkedin.com/in/ahudescu https://issuu.com/alfonshudescu/docs/portfolio/