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

...
User-Centered Design
    A design process in which the needs, wants
       and limitations of the Web user and
   organiza...
So … Why all the work?
           Can’t we just start building?


A User-Centered Approach to Web Design | Matt Carlisle  ...
The Benefits
        •Based upon and informed by research
•A focus on user needs leads to more effective websites
  •Helps...
Learn More
            “Don’t Make Me Think” – Steve Krug
       “Web Ministry: A Step by Step Guide for Creating
Church W...
User-centered design process



               Discovery: conversations with staff,
                       members & visit...
User-centered design process




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




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




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




            Build: program and implement design
A User-Centered Approach to Web Design | ...
Discovery
       Gather the research needed to establish a
          solid foundation for your website.



A User-Centered...
Steps of Discovery
                             Stakeholder interviews

                          User interviews (roll pl...
Learn More
    “The Elements of User Experience” – Jesse James Garrett
                User interview script (handout)
   ...
Analysis
        Now that you understand the needs of your
     stakeholders and users, determine which support
          ...
Steps of Analysis
              Gather technical requirements
               Review what you can afford!
    Research soft...
Learn More
                     Vendor questionnaire (see handout)

     Common Knowledge: Selecting a Content Management
...
Strategy
              The architecture and design principles of
                   your new website are created.




A Us...
Steps of Strategy
           Develop personas and scenarios of users
               Content needs analysis (card sort)
   ...
Learn More
                   Attend Stephen’s workshop today!

        How to conduct a card sort (see handout)
         ...
Design
                The visual branding and design of
                  your new website are created



A User-Centered...
Steps of Design
        Conduct visual design workshop
Create page comprehensives or “comp” (example)



A User-Centered A...
Learn More
   Article: The Principles of Design (see handout)
Book: “Transcending CSS: The fine art of web design”
Website...
Build
   Visual page comps are coded (example)
Templates are implemented with your platform
  Content , media and images a...
Web Build Demo
                              ChristUM.net Example
                                    E-Zekiel.com
       ...
Learn More
           Free photo editing at Snipshot.com
Free video streaming at E-zekiel.tv (YouTube for churches)
     S...
Questions?




A User-Centered Approach to Web Design | Matt Carlisle   33
Upcoming SlideShare
Loading in …5
×

Ministry 2.0: User Centered Website Design | Matt Carlisle

2,230
-1

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,230
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Ministry 2.0: User Centered Website Design | Matt Carlisle

  1. 1. Welcome! A User-Centered Approach to Web Design | Matt Carlisle 1
  2. 2. What’s wrong? A User-Centered Approach to Web Design | Matt Carlisle 2
  3. 3. What’s wrong? A User-Centered Approach to Web Design | Matt Carlisle 3
  4. 4. What’s wrong? A User-Centered Approach to Web Design | Matt Carlisle 4
  5. 5. What’s wrong? A User-Centered Approach to Web Design | Matt Carlisle 5
  6. 6. What’s wrong? A User-Centered Approach to Web Design | Matt Carlisle 6
  7. 7. Do you have any examples? A User-Centered Approach to Web Design | Matt Carlisle 7
  8. 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. 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. 10. So … Why all the work? Can’t we just start building? A User-Centered Approach to Web Design | Matt Carlisle 10
  11. 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. 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. 13. User-centered design process Discovery: conversations with staff, members & visitors A User-Centered Approach to Web Design | Matt Carlisle 13
  14. 14. User-centered design process Analysis: choose best technology based on need A User-Centered Approach to Web Design | Matt Carlisle 14
  15. 15. User-centered design process Strategy: create framework based on research A User-Centered Approach to Web Design | Matt Carlisle 15
  16. 16. User-centered design process Design: create visual design of website A User-Centered Approach to Web Design | Matt Carlisle 16
  17. 17. User-centered design process Build: program and implement design A User-Centered Approach to Web Design | Matt Carlisle 17
  18. 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. 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. 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. 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. 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. 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. 24. Strategy The architecture and design principles of your new website are created. A User-Centered Approach to Web Design | Matt Carlisle 24
  25. 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. 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. 27. Design The visual branding and design of your new website are created A User-Centered Approach to Web Design | Matt Carlisle 27
  28. 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. 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. 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. 31. Web Build Demo ChristUM.net Example E-Zekiel.com SermonsOnline.com A User-Centered Approach to Web Design | Matt Carlisle 31
  32. 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. 33. Questions? A User-Centered Approach to Web Design | Matt Carlisle 33

×