Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

132
Aanpak van een (web)project

Transcript of Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Page 1: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Aanpak van een (web)project

Page 2: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

75+ experts in strategy, branding, marketing, content, customer experience and development.

Page 3: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

digitale strategieTom Van MierloMathias Vissers

Page 4: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

75

Page 5: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 6: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 7: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

• Strategy, marketing and development

• Intracto Group

• Intracto (digital), Mosquito (360), King Foo (back-end)

• Group revenue 2014: 11.5 million EUR

• International network / experience

• Herentals, since 2005

• Open culture, sharing knowledge, active contributor to Drupal & Symfony

About Intracto

Page 8: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Van idee tot website executie

Page 9: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

“Wat kost een website?”-- de klant

Page 10: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

“25.000 euro”-- Intracto

Page 11: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

“Aub”-- de klant

Page 12: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

1 week later…

Page 13: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

“Klaar! Bedankt, en tot ziens”-- Intracto

Page 14: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Passionate about digitalwww.intracto.com

Bedankt!

Mathias Vissers@mvissers | [email protected]

Tom Van Mierlo@tomvm | [email protected]

Page 15: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Fases in eenwebproject

Page 16: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Discovery

Briefing

Implementation

Fases

DiscoveryBriefing Implementation

Page 17: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Briefing

Page 18: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

• Wat probeert de klant te bereiken?

• Wie stelt de vraag?

• Welke informatie hebben we nodig om een voorstel te maken?

• Een eerste afbakening van de scope van het project

• Eerste creatieve aanzet

Briefing

Discovery ImplementationBriefing

Page 19: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Determine the project scopeWhat does the customer want to achieve with its new platform?

Create a high-level backlogAn open discussion about possible features & functions

Determine MVP in function of timing & budgetThe minimum that needs to be developed. How, in what tech, etc.?

Analyse and developAdjust along the way, work agile

19

Launch and optimiseOptimize through measuring

Discovery ImplementationBriefing

Page 20: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Determine the project scopeWhat does the customer want to achieve with its new platform?

Create a high-level backlogAn open discussion about possible features & functions

Determine MVP in function of timing & budgetThe minimum that needs to be developed. How, in what tech, etc.?

Analyse and developAdjust along the way, work agile

20

Launch and optimiseOptimize through measuring

Discovery ImplementationBriefing

Where the magic happens

Page 21: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Discovery

Page 22: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Discovery

Strategy & concept

Stakeholder analysis

Business Model Canvas

Personas

Architecture & content

Paper Sorting

Functional designUser

stories

Technical design

Deliverables

Customer journey

Touch point mapping

Online marketing

plan

Mind mapping Content plan

Functional description

WireframingMock-ups &

design

Input / output-analysis

Migration-planSystem

architectureMeasurement

plan

Content-strategy

DiscoveryBriefing Implementation

Page 23: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

product marketinglogistiek technisch

Verwachtingen / verantwoordelijkheden

Page 24: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Metadata

Page 25: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Logistiek

Page 26: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

ERP-integratie

Page 27: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Verzendbaarheid

Page 28: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Online payments

Page 29: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Facturatie / administratie / legal

Page 30: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Customer service

Page 31: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Retours

Page 32: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

…en hoe dan nog marge overhouden

Page 33: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Multiple entry

points via

industries,

products,

business units

and product

search

Canonical

(defining URL

structure)

via product

navigation

Entry points

may provide

additional

content, but

all link to the

product

navigation

Mindmap / wireframes

DiscoveryBriefing Implementation

Page 34: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Architectuur

CRM

CMS

Mandrill

FormsProfiles

E-mail

Automation platform Booking engine

JS-based FE

ESBDAM? …

ImplementationDiscoveryBriefing

Automation platform

Page 35: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Timing

Jan -FebDiscovery

definition and analysis

Discovery

Final design

Implementation

Content review

Content input

GO LIVE

Feb -MayDesign &

Start implementation in parallel

May -JuneContent & GO-LIVE

Briefing Discovery phase 2

Design phase 2

Implement

Page 36: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Budget

Page 37: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

• Mindmaps, wireframes,

• Bepalen van actoren (b.v. integraties met ERP-systeem),

• Technologie-keuze

• Oplijsting risico’s / mogelijke valkuilen,

• Een eerste lange termijn strategie,

• Een voorbereide klant op wat komen zal,

• Een sluitend budget,

• Vastgelegd in een functioneel analysedocument.

Output van de discovery-fase?

DiscoveryBriefing Implementation

Page 38: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

DiscoveryBriefing Implementation

Page 39: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

DiscoveryBriefing Implementation

Page 40: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Implementatie

Page 41: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

ImplementationDiscoveryBriefing

Page 42: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Dedicated, multi-skilled team

• Project management

• Strategy / marketing

• Development

• Testing & QA

• Deployment and hosting

• Agile & self-organising

Wie doet de implementatie?

ImplementationDiscoveryBriefing

Discovery

Implement

Support

Page 43: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Project Manager

Project Manager

Project manager(SPOC)

UX/UI designer

Front-end dev.

Drupal dev.

Drupal dev.

Drupal dev.P

roje

ct t

eam

Drupal dev.

Performanced-based marketing team

Service & Maintenance

Jira

Ein

dk

lan

t

ImplementationDiscoveryBriefing

Page 44: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

ImplementationDiscoveryBriefing

Jira

Page 45: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

ImplementationDiscovery

Jira

Briefing

Page 46: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Digitalemarketing

Page 47: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Discovery

Briefing

Implementation

Fases

Marketing

Marketing

Page 48: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Project Manager

Project Manager

Project manager(SPOC)

UX/UI designer

Front-end dev.

Drupal dev.

Drupal dev.

Drupal dev.P

roje

ct t

ea

m

Drupal dev.

Performanced-based marketing team

Service & Maintenance

Jira

Ein

dk

lan

t

Page 49: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

we data

49

Page 50: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 51: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Doelen bepalen

Meten of ze bereikt worden

Drempels detecteren en wegnemen

Op basis van feiten, niet buikgevoel

Page 52: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Alles is meetbaarelke stap, elke aankoop, elke hindernis

Page 53: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Het meeste heb je zelf in handenThe good news?

Page 54: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

DigitaleConversion marketing

Page 55: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Wat is conversie?

Page 56: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

56

Een verkoopEen formulier-inzendingEen downloadEen aanvraag…

Page 57: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

57

Page 58: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Waarom is conversie belangrijk?

Page 59: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

59

Page 60: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

60

Conversion marketing• Usability• Persuasion design• Brand experience

Page 61: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

61

Conversion marketing• Usability (gebruiksvriendelijkheid)• Persuasion design• Brand experience

Page 62: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

http://slideshare.net/dings/persuasive-web-design-how-to-separate-users-from-their-bad-behaviours

Page 63: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

63

Technische fouten

Te lange formulierenTe veel (persoonlijke) informatie vragen

Onduidelijke vragen

Page 64: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 65: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 66: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 67: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

The devil is in the details

Page 68: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 69: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 70: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

There’s no excuse

Page 71: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 72: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 73: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

20-30% 30-40% 40-50% 50-60%

Page 74: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

20-30% 30-40% 40-50% 50-60%

Page 75: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 76: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

76

Mobiel internet gebruik in BE

Page 77: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

2011 – 3,5% 2012 – 13% 2013 – 17% 2014 – 20%

Bruxx.be mobiel verkeer

2015 – 40%

Page 78: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 79: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

SecretSanta Organizer

Page 80: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Openings-uren.com

Page 81: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 82: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

82

Page 83: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

www.google.com/webmasters/tools/mobile-friendly/

Page 84: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

84

Page 85: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

E-mail & responsive

85

Page 86: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

86

Conversion marketing• Usability (gebruiksvriendelijkheid)• Persuasion design• Brand experience

Page 87: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

http://www.slideshare.net/dings/persuasive-web-design-how-to-separate-users-from-their-bad-behaviours

Page 88: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

http://www.slideshare.net/dings/persuasive-web-design-how-to-separate-users-from-their-bad-behaviours

Page 89: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 90: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Persuasive design (in real life)

+66%

Page 91: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

- Schaarste- Sociaal bewijs- Authoriteit

- Context (framing)- Timing en focus

Persuasion Design

Page 92: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 93: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 94: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 95: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 96: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Bron: http://darkpatterns.org/

Page 97: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Bron: @agconsult

Page 98: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 99: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 100: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 101: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

101

Conversion marketing• Usability• Persuasion design• Brand experience

Page 102: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Online verkopenIs meer dan een goede verbinding tussen je

kassasysteem en het internet.

Page 103: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

http://www.baekdal.com/insights/rethink-your-ecommerce-strategy

Page 104: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 105: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 106: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Verkoop je producten zoals je klanten ze willen kopen

Niet zoals jij ze wil verkopen

Page 107: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 108: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 109: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 110: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 111: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 112: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

HoeWillen mijn klanten

mijn producten kopen?

Page 113: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Bron: http://www.usability-blog.be/

Page 114: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 115: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

+20%

Page 116: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 117: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 118: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 119: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 120: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 121: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 122: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Last, but not least…

Page 123: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

open source

php, html, css, …

Technologiekeuze is belangrijk!

Ook ivm eigendomsrechten en continuïteit

Page 124: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Think big, start small.

Page 125: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

OK, I’m convinced.How do I get in?

Page 126: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

“Teken een database-diagram voor een webshop van een speelgoedwinkel waarbij de webshop verschillende

producten en verschillende categorieën bevat.”

FAIL

Die ochtend op je sollicitatie

Page 127: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Hard skills vs. soft skills

Page 128: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

User groups & events

Page 129: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 130: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Start building

Van je hobby je werk maken? Werk maken van je hobby.

130

Page 131: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)
Page 132: Aanpak van een webproject. Intracto op bezoek bij Thomas More Geel (Toegepaste Informatica)

Passionate about digitalwww.intracto.com

Questions?