This document outlines Matt Carlisle's presentation on a user-centered approach to web design. It discusses conducting research through stakeholder interviews and user interviews to understand needs. It then covers analyzing technical requirements, creating a site strategy with personas and wireframes, designing visuals, and building the site. The goal is to design websites focused on user needs through a process of discovery, analysis, strategy, design, and build.

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

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

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

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

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

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

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

8. •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

9. 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

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

11. 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

12. 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

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

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

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

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

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

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

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

20. 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

21. 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

22. 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

23. 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

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

25. 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

26. 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

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

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

29. 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

30. 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

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

32. 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

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