Palmenia koulutus 1.11.2011

1. Viestintä II
1.11.11
Web Site Project
*phases & challenges
Antti Leino
Digital director @ Omnicom Media Group
#anttileino
Author of “Dialogin aika” and “.net (2010),
Verkkoviestinnän käsikirja” (1999), and
“Social Web for Small Biz” (2012)

2. Visualize.me

3. 3
Pukstaavi.fi

4. 4
Pukstaavi: tarjoupyynnössä riskillä ehdotus teknisestä
alustasta, jonka roolin tulkitsin tärkeäksi tekijäksi

5. 5
Pukstaavi: alkuperäinen kustannusarvio pohjautuen
tarjouspyyntöön
tuntia € yhteensä
SUUNNITTELU
Aihealueeseen tutustuminen 4 0 0
Työpajojen valmistelu 40 0 0
Työpajat (2 kpltta) 6 0 0
Työpajojen purku 40 0 0
Toimenpidesuunnitelman luominen 4 0 0
ja toteutus
Yhteys/projektinjohto/tekn valvonta 16 0 0
Avaus yhteensä 0
TEKNINEN TOTEUTUS
Annetun konseptin ja ulkoasun pohjalta
Oletuslaajuus noin 20 sivua
Verkkosivuston työstäminen suunnitelmien mukisesti 0
Verkkosivustoon liittyvä koulutus sisältyy hintaan 0
Uutiskirjepalvelun käyttöönotto 0
Koodiviidakko yhteensä 0
YHTEENSÄ 0
YLLÄPITOKUSTANNUKSET(Koodiviidakko)
Ylläpitomaksu julkaisujärjestelmä ja uutiskirjetyökalu 137 €/kk
Uusien sivujen tuotanto 75 €/h

6. 6

7. 7
Phases of Web Site -project
Phase 1: Definition and requirements: why? To whom?
Phase 2: Development of size, content and structure: what?
Phase 3: Visual design and interface development: how?
Phase 4: Production and quality control
Phase 5: Launch and follow-up
http://www.slideshare.net/anttileino/verkkopalvelun-suunnitteluprosessi-in-brief

8. 8
Phase 1 -
Definition and requirements

9. 9
Phase 1 - Definition
Collection information
Client Survey
• Business requirements
• Common information, products and services
• Business area analysis
• Current web site / previous solutions- analysis
• Reasons for the project / re-design
• Target audience and their desired behavior
• User -studies
• Desired overall feelings
• Content requirements
• Technology requirements
• Marketing and maintenance

10. Collecting user needs and user
understanding
• User segmentation / manageable chunks of user needs
• demographic criteria
• psychographic criteria
• attitudes towards technology
• knowledge of the subject in matter (novice, expert, professional)
• Create different user groups
• Stock-broker system for novice small investors versus system for
professional users must be different even they are using the same web-
based application

11. 11
Pukstaavi.fi requirements

12. 12
After conversations and studies we should have an
understanding about the following topics:
Objectives – Overall goals? Business goals - sell more, save money? What other objectives can
be accomplish? Think: tonality, message, usability, recognition.
Audience – Expected visitors, what do we know about them? What type of user profiles can be
seen? Visitors needs, wishes, expectations, skills?
Create “User Personas” to help focus on most important user groups.
Tone-of-voice – what kind of tonality our client is looking for? Where do we want our visitor to
focus on page? Is this solution sofisticated,funny, safe, cheap, clean, fancy etc? Make clear
analysis about this topic because creative work is based on it!
Size – what are the limitation of the project in all possible views: budget, timetable, creative
solution, technical needs, and overall size of the site (or application). It is impossible to make a
project plan without this information!
Technology – what type of innovative technology (if any) our client expects us to use? Back-end/
front-end? Remember to make a technical survey also
Maintenance – what is our client´s idea about maintenance? How will be responsible and how
often? Is our solution part of something bigger entity? Is ti part of some kind of Content
Management System? Is needed ask client to fill Maintenance Survey.
Contact – Who are involved? Who makes decisions? When?
Material available - Collect all previous related material. To know what has been done before. To
know what is not supposed to do again.

13. 13
Do not proceed without documented and
approved definitions and requirements
1. Business requirements
2. Audience analysis
3. Content requirements
4. Technical requirements
Next a) cretive brief and b) project plan

14. 14
Creative brief
Summary about project (what, to whom, why)
Recognition / tonality / guidance
Communication strategy (client)
Competitive situation (client)
Desired message in one sentence
Creative brief is typically internal document for a design team to start their
work.
Debrief is a summary of the objectives which is typically discussed together
with the client.

15. 15
Project plan
List objectives and goals as well details, assumptions and limitations.
Expected size of the site / or size of the application? Does our client provide all
required material like images? Will our client provide all text material? Will it be edited
to the web?
Budgeting
10-20% extra for extra costs or 3rd part costs
Timetable
Realistic
“Deliverables”
Building the project team
Setting up a test area for the project / extranet
Planning testing early
Kick-off!

16. 16
Box.net

17. 17
Client management is expectation management
If our client signed a paper, put it in safe place.
Print all e-mails which contain approvals
Print all e-mails which includes briefs and changes
All oral approval must be re-approved via e-mail (or paper)
Communicate. Continiously. Tell where we are going. What happens next? One e-mail
a week to tell what has been done and what is going to happen.
If you see challenges in budget, time or creative solutions - call our client!
Multi-vendor –project

18. 18
Phase 2 -
Development of size,
content and structure

19. 19
Phase 2 - Development
Information design organizes content/information
Information design provides guidance, “traffic signs”, which
help visitors to get lost or to give up
Time spend here saves time in later phases

20. 20
Information design will be improved via visual design
Visitors need visual clues, which help them to understand different parts of
the sites and how they are related.
For example colors, s h a p e s or font sizes help to make items
understandable. Typically used in navigation solutions.

21. 21
Good information design
Information design is about outlining structure both on page level
(wireframing) and site level (content mapping)
Successful information design creates common and functional systems for
navigation, use of images, layouts, headlines etc.
It helps visitors to know where to go, what to do, and to accomplish
something etc
Visitors are not able to see efficient information design - things just work well
Information design should be done prior visual design, at least iteratively.

22. 22
Design moves from big to small, from chaos to details
A. Content view (what are we going to publish here)
B. Site view (how to organize content to a logical chunks)
C. Page view (how to show detailed page elements within a page)

23. 23
A. Content view
Planning and development of the content – without good, relevant content
an innovative technology and fancy illustrations are just empty placeholders.

24. 24
Pukstaavi / content plan

25. 25

26. 26
Content plan
Content plan = outlining content
Without this one cannot proceed in a project.
Content plan does not contain ready-made text (though, it must be produced
later), it is a rough outline what kind of material, topics and items will be
placed to the site.
It is also a high-level organization of the content
Bird-view perspective.
Do not waste too much time for details (headlines, sub-headlines etc). They
will be decided in next phase.
Add plan for the content production to our project plan

27. 27
Some details
Specific attention must take when your solution is based on Content
Management System
• Feeding the content to the system must be plan and add to time table.
Mark to your content plan also secondary content like META-, TITLE-, form-
and error messages to be produced and other content elements: photos,
images, illustrations, charts and tables, videos, maps etc.
• Make your list as specific as possible (what, when, who).
• Keep on eye the size of the site at the same time
• Evaluate content plan weekly
Every change afterwards affects overall project (layout, navigation, CMS..)

28. 28

29. 29
B. Site view
Site map is a visual presentation about the structure, content organization,
and in some cases about the user flow.
Why Structure Map?
• The map communicates, defines and explains
• If it is not at the map, it could be out of the project implementation..
• Map can be high-level presentation, or it could be very detailed
Mainpage
Company
Products Services Employees Resources
Product News Service HR Library
Product lines Support Databases
Line1
Line2
Line3

30. 30
Tasks for the designers
Chunking: how to organize different items and how to tie them together
Similar content parts goes together but be careful not create categories
visitors do not understand.
Every category creates a menu page
5±2 rule
LATCH
Prepare to expand: think and evaluate how much this site could grow and
how to make it possible: navigation has extra room for example.
Leave room for any changes
If you already know that site will grow near future, add those section part of
your design already now (IPO example)

31. 31
Site map is one of the most important production tools
Keeping the site map up-to-date is important that designers can rely on it
when producing images, text and especially during the implementation phase
When redesigning existing site it is wise to make a rough outline of the old
site.
• Then decide can you use the same structure or not? Typically not.
• Can you use same labels (nomenclature)?
• Who does navigation changes?
Remember that visitors do not have manual to use your site. And no one
bother to read it anyhow :-)

32. 32
Pukstaavi / site map / structure

33. 33

34. 34
C. Page view
Wireframes (“rautalankamalli”) are visual story-boards of the site
Building wireframes is interface design
Wireframes contain the hierarchy of the information but they do not exactly
tell how certain element should appear on the page.
Wireframes focus everything else than visual presentation.
• Describe navigation, text placement, graphical elements, most important headlines
and other element which should be on screen.
• In other words, raw information appearing on page.
Design wireframes from most used pages (4-8 typically)

35. 35

36. 36
Pukstaavi / wireframes

37. 37
Using wireframes
Rule: wireframes are designed for all main page, all
section main pages, and all templates required for
the site. Plus for all pages that will include
something special
Add details to every page, specify special needs for
functionality (for example next the wireframe
diagram)
Sometimes you need to create all wireframes
Use either a) real, typical text from client´s business
or b) lorem ipsum (www.loremipsum.net)
Add marking text only the amount you think there
will be on a final version
Consult all the time with visual designer!
Wireframe designer must
know standard user interface
elements

38. 38
Phase 3 -
Visual design and interface
development

39. 39
First law of usability

40. 40
What is the most important thing one should do if you
wants to make sure your web site is easy to use?
Nothing important should ever be more than two clicks away?
Speak the user´s language?
Be consistent?
DON´T MAKE ME THINK!
You should be able to “get it” - what it is and how to use it,
without expending any effort thinking about it.

41. 41
Reality check: people do not use web pages like we
design them

42. 42
“Things” that make us think
?
For example:
1 Names
• Cute names, clever names, marketing-induced names, company-specific names,
and unfamiliar technical names
• Jobs - Employment Opportunities - Job-O-Rama
2 Link and buttons
• The ones that are not obviously clickable
3 Search boxes
• If user have to think about how I want to search

43. Customer experience and Web
and iPad and Android phone and interactive kiosk…
Every site is a self-service product.
• No manuals
• No training
• No customer service reps
There is only user, facing the site alone with only her guesses and
experience to guide her.
• It´s vital to understand what people want and need.
The customer experience forms the customers impression of the
company offerings.
• That why it´s vital to provide quality customer experience.

44. 1 Simple
2 Social
3 Alternative

45. 1 Simple
“Don´t Make Me Think!”

47. 2 Social
“I share. You Share. They share.”

48. Arviot & arvostelut
Mitä muut ovat sanoneet
Kommentointi

49. 3 Alternative
“We don’t read pages, we scan them”

50. Suosituimmat
Kartat

51. 51
Pukstaavi / visual design

52. 52
Graphic templates
Graphic template is approved layout proposal
Will be used to optimize rest of the pages and for production
Note that this proposal is always slightly different than final execution - CSS/
TABLE/FLASH - based outcome is not the same than PhotoShop-layout. Tell
that to client.
Now, create the final graphical elements.
> navigation on/off/over -pics
> buttons on/off/over-pics
> placeholder or alternative-images for flash and video

53. 53
Phase 4 -
Production &
quality assurance

54. 54
PHASE 4 - Production & quality assurance
Goals for the production are simple: build a site (or application) that looks the same
and works similar to all visitor. Avoid multiple work, each page view is coded only ones
Evaluate project situation prior production: is it in budget? In time? Is content ready
already? Is the test environment technically ready?
The dynamo of the Internet is XHTML. Make sure your production team has people
who are extremely good in html programming (or flash/action scripting)
Final decisions:
• Content
• Functionalities and features
• Design and layout
• File structure and file naming
• Directory naming
• Domain name

55. 55
Content is always late.
Content is always late. In 99% of the projects.
Make a plan to produce and deliver content with deadlines
Tight deadlines for the clients will help you.
More earlier you receive the content, the better information design (and
visual design) will succeed.
Add some buffer for content delivery
Be very happy if content is in time - more happier if it is in good quality.

56. 56
Size: expectation vs. reality
Is the project size like specified on site map or is it grown bigger? Can we
build the project on time? How much there is totally new content to
produced?
Are the graphical template ready? Can we use our prototype?
Dynamic content?
File structure is surprisingly important detail
• Growth of the size
• Maintenance
• Direct access to sub pages
• Does the file structure follow content structure
• Are all images in one “img” directory?

57. 57
Why prototype?
With prototype design team can develop visual design and interface further,
fine-tune information design, recognize missing content parts (too much, too
little, missing all, wrong type etc) and test again and again…
Requires testing
• Difficult framesets
• Functional mouse-over techniques
• Locations and size specific pop-up windows
• Style sheet and browser specific topics
• All functionalities
• Information architecture and navigation
• Terminology
• Usage logic
Internet Explorer, Safari, Firefox, Opera, Netscape
Building the prototype also connects production team to the project and they
know what is expected to achieve.

58. 58
Style Guide
After the templates design team writes a style guide for production and maintenance
teams.
Each page on site is different but they all contain same elements. Define those
elements. This allows you to build a consistent site where visitors can easier find items
they are looking for.
Content of the typical style guide:
• Column width
• Mouseover states
• Link colors
• Other colors
• Fonts
• Headline and other text sizes
• Image dimensions
• Animation effects
• Usage of logo (safety areas)

59. 59
Production
Optimization of images is extremely important for the good quality results.
Learn who to use PhotoShop!
Slicing is a part of the production where all required image files are
produced from the graphical master template. Slices are joint together during
the building of the site
HTML-templates, are circulated within production team. These “pages”
contain already information pieces like:
• Global navigation
• Basic layout (TABLE, DIV)
• FONT-definitions
• ALT- and META text as an example (who writes them?)
• Document specific comments <!-- comment -->
Test HTML template

60. 60
Production #2
Building is done either with HTML-editor, by hand (or with Flash
development tool)
Add content to pages (or feeding content to CMS)
Light scripting with javascript (or Actionscript / flash)
Even programmable page (.asp, .php etc) require one or more HTML-
template where programming is added
Add other media types
Look at the size of the pagte. Over 100 kbyte is typically too heavy.
Hand coding or editor?
Version control?

61. 61
Quality assurance
Site is ready (almost). Time to quality assurance
Quality Manager / Engineer
Never, never publish a site without quality assurance. Never.
Broken links. Placeholder-text and -images. Functionality bugs. Wrong
content is wrong place.
Testing environment should be similar than final server environment
(dynamic material)
Prioritizing finding and fixing

62. 62
Phase 5 -
Launch & follow-up

63. 63
PHASE 5: Launch & follow-up
Setting up final production environment
File transfer to the www-server (FTP, SCP)
Marketing
Traffic measurement / Google Analytics
• Most visited pages
• Most used functionalities
• Most downloaded files
• etc

64. 64
What ever you do..
Whatever you decide to design…
Don´t make me think!

65. 65
Thanks!