Uitdaging

Onze klant had een ontwerpoplossing nodig om meerdere verschillende websites te creëren met ongeveer dezelfde lay-out en opzet voor hun nieuwe 'Hecht'-branding. Ze wilden een gebruiksvriendelijke basisstructuur met meerdere vooraf gedefinieerde paginatemplates die konden worden gebruikt om alle vier de sites te ondersteunen. De uitdaging was om templates te maken die geschikt waren voor de verschillende contentbehoeften van alle drie de sites, met verschillende ontwerpen en kleuren per site, terwijl de herkenbare 'Hecht'-branding behouden bleef.

Binnen dit project was ik de verbindende factor en project manager tussen klant en programmeur / frontend team. Tevens de budgetbewaker. Ik heb de intake en workshops gedaan, was aanspreekpunt voor de klant. Heb alles in Stories in Microsoft DEVops gezet voor de ontwikkelaars en constant Agile geitereerd om te kijken of nieuwe inzichten ook nieuwe beslissingen m.b.t. de interface tot gevolg zouden hebben.

Oplossing

We begonnen met het analyseren van overlappende functionaliteiten voor de vier sites, die elk verschillende content, stakeholders, product owners en editors zouden hebben.

Workshops

Voor elke site organiseerde ik een workshop en strategische sessie om te begrijpen wat elke site wilde bereiken, zowel vanuit het perspectief van de stakeholders als van de eindgebruikers.

Dit was dus met alle mensen die mogelijk met de site wilden gaan werken of iets op de site wilden publiceren of bereiken. Meestal bestaat zo'n creatieve workshop uit 8 a 10 mensen. En probeer ik 1 of 2 dagdelen zoveel mogelijk informatie op te halen volgens de methode van Jesse James Garret. De 5 principes van UX

Nadat ik alle kaartjes (post-its) had verzameld heb ik functionaliteiten gedefinieerd en die daarna op basis van belangrijkste gesorteeerd en overlappende functionaliteiten uniform gemaakt. Daarna de structuur voor elke site voorzichtig bepaald.

Wireframes

Daarna maakte ik wireframes voor de eerste site en creëerde ik thema’s met landingspagina’s, projectpagina’s, universele call-to-actions, knoppen en linkblok-elementen. Dit leverde ons alle bouwstenen op die we konden gebruiken voor alle vier de sites.

Uiteraard wel helemaal mobile first ontworpen maar hier alleen de desktop versie uitgewerkt

Herbruikbare templates binnen 1 omgeving met verschillende stijlopties per site

Om dit probleem op te lossen, hebben we een multisite WordPress-omgeving opgezet en een herbruikbaar thema ontwikkeld met behulp van custom blocks, gebaseerd op onze wireframes. We plaatsten deze blocks in de nieuwe WordPress-patterns, zodat templates eenvoudig konden worden gemaakt. We voerden ook strategische sessies uit voor alle vier de sites om alle noodzakelijke blocks te definiëren die in het basisthema moesten worden opgenomen. Zo beschikten alle vier de sites over dezelfde elementen voor hun content.

We ontwierpen een 'style tile'-achtige visuele gids om de bouwstenen te voorzien van verschillende kleurvariaties, maar binnen dezelfde stijl, zodat de 'Hecht'-branding direct herkenbaar bleef. Daarna bouwden we de eerste site, testten deze met product owners en editors, en gingen vervolgens verder met de volgende site.

Standaardpagina opmaak met Hero element in de header een sidebar rechts en verschillende elementen te kiezen als blockstyle in de WP editor

Uitdieping van een THEMA pagina met sidebar, nieuwsmodule in verschillende weergaves

wp blockeditor optie voor sectie met links en plaatje
Volledig WYSIWYG in wordpress

wp blockeditor optie met alternatieve achtergrond kleur en rechts een blokje met links

wp blockeditor optie met externe links en rechts een linkblokje. Door de generieke styling van elementen is het beheer super gemakkelijk en 'fool proof'

Kwaliteitscontrole

De uiteindelijke homepage gecontroleerd en getest door mij om te controleren of opgeleverde werkzaamheden door programmeer en frontend team ook echt zoals in design afgetikt overeen komen.

Politiek

Uiteindelijk zijn er door allemaal politieke beslissingen toch andere keuzes gemaakt en hebben de GGD en RAV helaas besloten om zelf (dubbel) te investeren en zelf een website elders te laten vervaardigen. Jammer, want het idee en de opzet was heel erg mooi en verbindend. Hecht en ZVH maken wel gebruik van de multisite.

Bekijk hier de sites https://wijzijnhecht.nl/ en https://zvhhm.nl/

Recentelijk is ook de Veilig Thuis site met dit thema gemaakt. Hier heb ik geen design voor gemaakt dus daarom ook geen plaatje. https://veiligthuishollandsmidden.nl/

Impact

De vooraf gestijlde en ingestelde custom gemaakte blocks hebben echt het verschil gemaakt in uniform beheer van de website door verschillende beheerders bij verschillende bedrijven! WordPress is echt gemakkelijk te leren, ik had het met wat training zo onder de knie...

Grote toename in efficiëntie dankzij het herbruikbare thema en de custom blocks. Het idee om met blocks te werken in Wordpress multisite was een briljante zet. Zowel voor ons als bedrijf een goede investering in hoe we sites voortaan kunnnen bouwen met de native blocks van wordpress aangevuld met onze eigen gemaakte custom voorgestijlde blocks.
De klant was echt heel blij met de multisite oplossing. Het beheer van 3 sites in 1 overzichtelijke omgeving met uitwisselbare content.
Sterke verbetering van de gebruikerservaring door de gebruiksvriendelijke opzet van het basisthema en de vooraf gedefinieerde paginatemplates.
Ook niet gespecialiseerde webredacteuren kunnnen met een simpele door ons geschreven handleiding aan de slag met een pagina zonder opmaak te verpesten.
Toekomstbestendig thema. Door te werken met de allernieuwste versie van Wordpress blockthema integratie zijn we pioniers en is de site voor de komende jaren en updates van Wordpress zeer toekomstbestendig.

WP multisite huissstijlvast custom block theme voor makkelijk beheer