1. Louisa Lambregts, lambrel@algonquincollege.com Class Four

2. 1.Concept 2.Design 3.Implement 4.Evaluate What happens during these stages?

3. 1.Concept a) meet with client b) determine purpose,goals and audience c) do competitive analysis d) create a wireframe layout 2.Design a) create visual mock up/logo b) determine site structure and navigation

4. 3.Implement a) build website b) usability testing c) add analytics 4.Evaluate a) review analytics and feedback over time b) make appropriate changes

5. Instructions: 1)Decide who will be the client, who will be the web designer. 2)Give client a time to complete Client Business Worksheet 3)Have a “first client meeting”, following the question list. 4)Together, complete the Competitive Analysis Worksheet. Find 2 Ottawa-based catering site websites 5)Create a wireframe of a front page concept for a new web site. (by hand) 6)Submit Competitive Analysis Worksheet and wireframe document. In partners:

6. First Meeting with a Client What questions should you ask? Keep in mind: you need to understand: 1)Purpose of the Website 2)Goals

7. Understanding Your Client Things You Need to Know 1. Purpose of the business/organization. Why it exists and what it aims to be. {Mission and Vision] 2. Products & services of the business. What does it have to offer its customers? 3. Demographics of Target Audience Age, gender, sex, socio-economic status. Also, why they would be interested in the service/products offered.

8. Understanding Your Client Things You Need to Know 4. Identity/personality of the organization/individual. What makes it unique and special? 5. Why they want to re-design or build new site. What do they expect to gain through this new design? 6. Determine their indicators of success of failure. Clarifying what their expectations of success are will determine how your effectiveness will be measured. 7. Maintenance Plans Can they maintain their own content? If so, how often? Are they tech savvy? Do they need a CMS?

9. First Meeting with a Client For a business/organizational site:  What does the organization do?  What is your role in the organization?  Does the company have an existing logo or brand?  What other advertising does the company do?

10. First Meeting with a Client For a business site:  Does it have a domain name already?  What kind of content do you wish to provide?  Who will maintain the content and how often?  Do you have a budget in mind for this project?

11. 1.Gather Information a) client meeting b) competitor analysis c) audience analysis/personnas d) brainstorming e) project details including timeline of deliverables f) assets inventory -do you have logo, images, content Product: Client Summary and/or Creative Brief with sign-off (to prevent “scope creep”)

12. 2.Design ▪ wireframe ▪ navigational flowchart ▪ storyboards of key tasks ▪ visual mock up of look and feel ▪ logo design ▪ Dreamweaver/Contribute? Or CMS?

13. 5.Maintenance ▪ will you be involved? ▪ If so, what is your role? ▪ Alternately, ensure that a maintenance plan is established.

14. First Meeting with a Client For a business/organization site:  Do you have logo files, images, content ready or does this require development?  What’s your timeline for development?  What do you hope to gain from designing or redesigning your website?  Will you be the main point of contact?  Do you have examples of sites that you like?

15. Post-meeting homework See what the competitors are doing on their website  What features are on their website (layout, functionality, look and feel…)  What works well and what doesn’t work well according to the purpose of the site?  How does this website seem to tie in with their overall marketing strategy?

16. Understanding the Target Audience Personas Description of one or a few typical users of the website – their interests, demographics, lifestyle Jill, aged 32, is a busy working mom. She has 2 girls aged 7 and 9. She drops off the kids at daycare before going to work and picks them up again. She’s also the one who drives them to their figure skating and girl scouts. So, she’s in her car a lot. Her husband travels a lot with her job so she is on her own a lot. Finding the time to cook meals is a real challenge…..

17. What information to put online Brainstorm with Post-it Notes  create some initial categories  rearrange topics into categories  add new categories as you go along  see if you can consolidate topics

18. Maps out user experience  Chart out tasks required of the user (e.g. filling out a form, purchasing tickets)  How does this website seem to tie in with their overall marketing strategy?

19. Purchasing a Ticket 1) Set up an account 2) Search for event tickets 1.Type in First and Last Name 2.(mandatory field) 3.Type in Address 4.Type in Visa Card Number …..etc 3) Select Seating 1.Click on “Events” 1.Click on “Diagram” to see map of seating sections 2.Click “close” to get back to main screen 3.Select seating section 4) Purchase Tickets 1.Click on “number of tickets “ and select the number. 2.Click on “buy these tickets” 3.Receive confirmation that will receive email

20. Programs 1. MS PowerPoint 2. MS Visio 3. Concept Mapping a) Inspiration b) Mindmap (free)

21. Banner with Logo HOME About Us Products Contact Us Site Map Search Body Content Clickable specials Read testimonials Footer – copyright information and email Wireframe of Content Layout

22. Building and Launching the Site  Build a test site in Dreamweaver  Work with programmer, if necessary, for special functionality  Insert content and do a final on-screen edit Test all links!  Usability Testing -test with sample group – collect information through form

23. Interface Design Mock-Up

24. Usability Testing: Sample Form Questions  The look and feel appeals to me.  Navigation was intuitive and easy to follow  Content was easy to read  Language of text content was easy to understand  The web pages loaded quickly  Observe users interacting with your site and record their observations Have them do a specific task.

25. Usability Testing: Observation  Observe individuals navigating your site  Watch their reactions and behaviour  Record their comments

26. Feedback  Email links on page  Send out a survey periodically  Will likely tweak content and layout over time  Feedback or other events may require a re-design

27. In partners: 1) Each partner will play either web designer or client 2) Client will complete “Client Business Worksheet” 3) Web designer will ask Client Questions 4) Partners will work together to complete: a) competitive analysis b) wireframe