What's Involved in building an

INCREDIBLE DIRECTORY

@JoshPalmeri, Front End Developer

  Stony Brook University

http://slides.com/palmerijosh/outc16

joshua.palmeri@stonybrook.edu

discussing strategy, design and implementation

</>

strategy

design

implementation

data

content

users

cms

TO SERVE OTHERS

GIVE

challenges

threats

strengths

weaknesses

RISKS

COMMUNICATION

New

LIFE

Perspective

inspire

PROJECTS

effectiveness

efficiency

usability

quality

Challenge

HONESTy

user experience





    var x = dog.didTrick();

    if (x) {
        dog.giveDogTreat();
    }




    var k = kid.obeyedMom();

    if (k) {
        kid.giveReward();
    }




    var k = kid.obeyedMom();

    if (k) {
        kid.giveReward();
    } else {
        kid.obeyMom();
    }




    var x = $('.my-element').length;

    if (x==0) {
        do('this');
    } else {
        do('that');
    }



    

    if (you.user) {
        
    }



    you.user = true;

    if (you.user) {
        
    }



    you.user = true;

    if (you.user) {
        think('bad_customer_experience');
    }

Perspective

THE DETAILS

What are they coming for?

The user

What's their goal?

What do they need?

What do they want?

What’s the target audience?

The user

Who are they like?

What demographic?

What characteristics?

user Groups

The end-user

viewer of website, receiver of information

content entry staff

website admin, content specialist

management

how do senior staff interact with the site?

1

2

3

The end-user

USER GROUPS

The end-user

system user

USER GROUPS

The end-user

system user

Office staff

USER GROUPS

The end-user

system user

Office staff

OTHERS

designer, developer, manager

USER GROUPS

PROFILE PAGES

LIST PAGES

search

data

DIRECTORY

THE CONTENT
THE DATA
THE DESIGN

The Content

What’s the hierarchy of information?

The Content

What’s the hierarchy of information?

How much information will be available?

The Content

What’s the hierarchy of information?

How much information will be available?

What does the fullest profile look like?

The Content

What’s the hierarchy of information?

How much information will be available?

What does the fullest profile look like?

What does the most sparsely-populated profile look like?

The Content

What’s the hierarchy of information?

How much information will be available?

What does the fullest profile look like?

What does the most sparsely-populated profile look like?

What’s the longest potential name?

The Content

What’s the hierarchy of information?

How much information will be available?

What does the fullest profile look like?

What does the most sparsely-populated profile look like?

What’s the longest potential name?

What if a field is left blank?

The Content

What’s the hierarchy of information?

How much information will be available?

What does the fullest profile look like?

What does the most sparsely-populated profile look like?

What’s the longest potential name?

What if a field is left blank?

How does the content sit in the mobile layout?

Proportion

THREE

p's

Placement

POSITIONING

The Content

The DATA

Where is the data coming from?

How much data is available?

How much needs to be entered by hand?

What is the flow of data?

Integration? One-Way? Read-only? Read/write?

Who is responsible for maintaining data?

How accurate is the data?

DATA

system

output

Database

Query / Transform

Webpage

The DATA

The ideal scenario

The DATA

The real world

INCOMPLETE DATA

Duplicate DATA

conflicting DATA

Dirty DATA

wait a minute, We have that data?

Where's the data?

What data?

that DATA IS 7
years old?

WHAT DO YOU MEAN IT"S ALL WRONG?

JUST FIX IT

database got corrupted

the data is missing

GET IT DONE YESTERDAY

the db admin retired a year ago

The Design

Considering design goes hand-in-hand with considering content

How will it all fit?

Get a vision for what’s going down

Eliminate extraneous labels and use of old or bad practices

Plug in real sample data to get a realistic visual

40 under forty

Showcase alumni

BIO

Archive

Encourage nominations

Encourage social +

Flickr, Twitter

Alumni

Advancement

Staff

Colleagues, Friends,
Campus community, Media

40 under forty

FACULTY DIRECOTRY + EXPERTS

media relations

internal tool

master Faculty Directory

FACULTY DIRECOTRY + EXPERTS

media relations

internal tool

""If we build it they will come""

master Faculty Directory

Experts instance

Output as appropriate

Faculty

M.R. Staff

Students

OTHER Staff

Faculty Directory

Goals

Easy to use

Easy to manage

Fast and responsive

Scalable and DRY

It has to be AWESOME

xml / xslt

OU Campus

HTML / PHP

Database

CMS

Output

the solution

Developing the system

Behind the scenes

40 under forty

Faculty Directory

THANK YOU!

Now, go make something great.

@JoshPalmeri, Front End Developer

  Stony Brook University

joshua.palmeri@stonybrook.edu

http://slides.com/palmerijosh/heweb15-dir

Made with Slides.com