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