louisa lambregts, [email protected] class four
TRANSCRIPT
Review: Website Design Process
1. Concept2. Design3. Implement4. Evaluate
What happens during these stages?
Website Design Process
1. Concepta) meet with clientb) determine purpose,goals and audiencec) do competitive analysisd) create a wireframe layout
2. Designa) create visual mock up/logob) determine site structure and navigation
Website Design Process
3. Implementa) build website b) usability testingc) add analytics
4. Evaluatea) review analytics and feedback over timeb) make appropriate changes
Activity: Delectable Edibles Catering Service
Instructions:
1) Decide who will be the client, who will be the web designer.2) Give client a time to complete Client Business Worksheet3) Have a “first client meeting”, following the question list.4) Together, complete the Competitive Analysis Worksheet.
Find 2 Ottawa-based catering site websites5) 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:
Stage 1: Concept
First Meeting with a Client
What questions should you ask?
Keep in mind: you need to understand:
1) Purpose of the Website2) Goals
Stage 1: Concept
Understanding Your ClientThings 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 AudienceAge, gender, sex, socio-economic status. Also, why they would be interested in the service/products offered.
Stage 1: Concept
Understanding Your ClientThings 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 PlansCan they maintain their own content? If so, how often? Are they tech savvy? Do they need a CMS?
Stage 1: Concept
First Meeting with a ClientFor 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?
Stage 1: Concept
First Meeting with a ClientFor 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?
Stages of Web Design Process
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”)
Stages of Web Design Process
2. Design
▪ wireframe▪ navigational flowchart▪ storyboards of key tasks▪ visual mock up of look and feel ▪ logo design▪ Dreamweaver/Contribute? Or CMS?
Stages of Web Design Process
5. Maintenance
▪ will you be involved? ▪ If so, what is your role?▪ Alternately, ensure that a
maintenance plan is established.
Stage 1: Concept
First Meeting with a ClientFor 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?
Stage 1: Concept
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?
Stage 1: Concept
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…..
Stage 1: Concept
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
Storyboarding
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?
Storyboarding
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 seatingsection
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
Storyboard Tools
Programs
1. MS PowerPoint
2. MS Visio
3. Concept Mappinga) Inspirationb) Mindmap (free)
Stage 2: Design
Banner with Logo
HOME About Us Products Contact Us Site Map Search
Body ContentClickable specials
Read testimonials
Footer – copyright information and email
Wireframe of Content Layout
Stage 3: Implementation
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 editTest all links!
Usability Testing-test with sample group – collect information through form
Stage 2: Design
Interface Design Mock-Up
Stage 3: Implementation
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.
Stage 3: Implementation
Usability Testing: Observation
Observe individuals navigating your site Watch their reactions and behaviour Record their comments
Stage 4: On-going EvaluationFeedback
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
Group Assignment: Delectable Edibles Catering
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