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