Welcome!
A User-Centered Approach to Web Design | Matt Carlisle 1

What’s wrong?
A User-Centered Approach to Web Design | Matt Carlisle 2

What’s wrong?
A User-Centered Approach to Web Design | Matt Carlisle 3

What’s wrong?
A User-Centered Approach to Web Design | Matt Carlisle 4

What’s wrong?
A User-Centered Approach to Web Design | Matt Carlisle 5

What’s wrong?
A User-Centered Approach to Web Design | Matt Carlisle 6

Do you have any examples?
A User-Centered Approach to Web Design | Matt Carlisle 7

•What is Big Heart Design?
•Don’t take notes! It’s all at www.ministry2.org/wiki
•What we’ll be covering today
A User-Centered Approach to Web Design | Matt Carlisle 8

User-Centered Design
A design process in which the needs, wants
and limitations of the Web user and
organization are given extensive attention at
each stage of development.
A User-Centered Approach to Web Design | Matt Carlisle 9

So … Why all the work?
Can’t we just start building?
A User-Centered Approach to Web Design | Matt Carlisle 10

The Benefits
•Based upon and informed by research
•A focus on user needs leads to more effective websites
•Helps unify decision-makers with diverse opinions
•It’s cost-effective: minimize the risk
of having to fix poor design decisions
A User-Centered Approach to Web Design | Matt Carlisle 11

Learn More
“Don’t Make Me Think” – Steve Krug
“Web Ministry: A Step by Step Guide for Creating
Church Websites” – Matt Carlisle (Release date Summer 2009)
www.USEIT.com (Jakob Nielsen’s website)
A User-Centered Approach to Web Design | Matt Carlisle 12

User-centered design process
Discovery: conversations with staff,
members & visitors
A User-Centered Approach to Web Design | Matt Carlisle 13

User-centered design process
Analysis: choose best technology based on need
A User-Centered Approach to Web Design | Matt Carlisle 14

User-centered design process
Strategy: create framework based on research
A User-Centered Approach to Web Design | Matt Carlisle 15

User-centered design process
Design: create visual design of website
A User-Centered Approach to Web Design | Matt Carlisle 16

User-centered design process
Build: program and implement design
A User-Centered Approach to Web Design | Matt Carlisle 17

Discovery
Gather the research needed to establish a
solid foundation for your website.
A User-Centered Approach to Web Design | Matt Carlisle 18

Steps of Discovery
Stakeholder interviews
User interviews (roll play)
Identify user groups (generic groups)
A User-Centered Approach to Web Design | Matt Carlisle 19

Learn More
“The Elements of User Experience” – Jesse James Garrett
User interview script (handout)
www.USABILITY.gov (U.S. usability resource)
Action Research: How churches can impact
their communities – by Art of Mission
A User-Centered Approach to Web Design | Matt Carlisle 20

Analysis
Now that you understand the needs of your
stakeholders and users, determine which support
system will support the outlined needs.
A User-Centered Approach to Web Design | Matt Carlisle 21

Steps of Analysis
Gather technical requirements
Review what you can afford!
Research software solutions and interview vendors
Determine optimal Web platform
A User-Centered Approach to Web Design | Matt Carlisle 22

Learn More
Vendor questionnaire (see handout)
Common Knowledge: Selecting a Content Management
System (handout, M 2.0 file share)
Web Hosting Tutorials (see handout)
A User-Centered Approach to Web Design | Matt Carlisle 23

Strategy
The architecture and design principles of
your new website are created.
A User-Centered Approach to Web Design | Matt Carlisle 24

Steps of Strategy
Develop personas and scenarios of users
Content needs analysis (card sort)
Create site map (example)
Create page wireframes (example)
A User-Centered Approach to Web Design | Matt Carlisle 25

Learn More
Attend Stephen’s workshop today!
How to conduct a card sort (see handout)
Free “CardSort” software (see handout)
Article: An Introduction to Personas (see handout)
A User-Centered Approach to Web Design | Matt Carlisle 26

Design
The visual branding and design of
your new website are created
A User-Centered Approach to Web Design | Matt Carlisle 27

Steps of Design
Conduct visual design workshop
Create page comprehensives or “comp” (example)
A User-Centered Approach to Web Design | Matt Carlisle 28

Learn More
Article: The Principles of Design (see handout)
Book: “Transcending CSS: The fine art of web design”
Website: Godbit.com Featured church website designs
A User-Centered Approach to Web Design | Matt Carlisle 29

Build
Visual page comps are coded (example)
Templates are implemented with your platform
Content , media and images are populated
A User-Centered Approach to Web Design | Matt Carlisle 30

Web Build Demo
ChristUM.net Example
E-Zekiel.com
SermonsOnline.com
A User-Centered Approach to Web Design | Matt Carlisle 31

Learn More
Free photo editing at Snipshot.com
Free video streaming at E-zekiel.tv (YouTube for churches)
Sermon audio streaming at SermonsOnline.com
A User-Centered Approach to Web Design | Matt Carlisle 32

Questions?
A User-Centered Approach to Web Design | Matt Carlisle 33