Aanpak van een (web)project

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

digitale strategieTom Van MierloMathias Vissers

75

• 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

Van idee tot website executie

“Wat kost een website?”-- de klant

“25.000 euro”-- Intracto

“Aub”-- de klant

1 week later…

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

Passionate about digitalwww.intracto.com

Bedankt!

Mathias Vissers@mvissers | mathias.vissers@intracto.com

Tom Van Mierlo@tomvm | tom.vanmierlo@intracto.com

Fases in eenwebproject

Discovery

Briefing

Implementation

Fases

DiscoveryBriefing Implementation

Briefing

• 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

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

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

Discovery

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

product marketinglogistiek technisch

Verwachtingen / verantwoordelijkheden

Metadata

Logistiek

ERP-integratie

Verzendbaarheid

Online payments

Facturatie / administratie / legal

Customer service

Retours

…en hoe dan nog marge overhouden

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

Architectuur

CRM

CMS

Mandrill

FormsProfiles

E-mail

Automation platform Booking engine

JS-based FE

ESBDAM? …

ImplementationDiscoveryBriefing

Automation platform

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

Budget

• 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

DiscoveryBriefing Implementation

DiscoveryBriefing Implementation

Implementatie

ImplementationDiscoveryBriefing

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

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

ImplementationDiscoveryBriefing

Jira

ImplementationDiscovery

Jira

Briefing

Digitalemarketing

Discovery

Briefing

Implementation

Fases

Marketing

Marketing

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

we data

49

Doelen bepalen

Meten of ze bereikt worden

Drempels detecteren en wegnemen

Op basis van feiten, niet buikgevoel

Alles is meetbaarelke stap, elke aankoop, elke hindernis

Het meeste heb je zelf in handenThe good news?

DigitaleConversion marketing

Wat is conversie?

56

Een verkoopEen formulier-inzendingEen downloadEen aanvraag…

57

Waarom is conversie belangrijk?

59

60

Conversion marketing• Usability• Persuasion design• Brand experience

61

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

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

63

Technische fouten

Te lange formulierenTe veel (persoonlijke) informatie vragen

Onduidelijke vragen

The devil is in the details

There’s no excuse

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

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

76

Mobiel internet gebruik in BE

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

Bruxx.be mobiel verkeer

2015 – 40%

SecretSanta Organizer

Openings-uren.com

82

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

84

E-mail & responsive

85

86

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

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

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

Persuasive design (in real life)

+66%

- Schaarste- Sociaal bewijs- Authoriteit

- Context (framing)- Timing en focus

Persuasion Design

Bron: http://darkpatterns.org/

Bron: @agconsult

101

Conversion marketing• Usability• Persuasion design• Brand experience

Online verkopenIs meer dan een goede verbinding tussen je

kassasysteem en het internet.

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

Verkoop je producten zoals je klanten ze willen kopen

Niet zoals jij ze wil verkopen

HoeWillen mijn klanten

mijn producten kopen?

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

+20%

Last, but not least…

open source

php, html, css, …

Technologiekeuze is belangrijk!

Ook ivm eigendomsrechten en continuïteit

Think big, start small.

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

“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

Hard skills vs. soft skills

User groups & events

Start building

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

130

Passionate about digitalwww.intracto.com

Questions?