Stadsradio FM Brussel lanceerde een paar weken geleden een nieuwe website. Marlon zorgde voor de uitwerking van het design en de volledige ontwikkeling van de website.
De vorige versie van de website, gelanceerd in 2004, werd ook door ons gebouwd. 6 jaar later was het dringend tijd voor een volledige vernieuwing. Het op maat gemaakte Content Management Systeem (CMS) dat de redactie gebruikt om de website up to date te houden werd grotendeels behouden; het systeem werd alleen op een aantal punten uitgebreid of aangepast.
Het is vooral de website zelf die grondig werd aangepakt. Van design tot wat er precies waar getoond wordt, alles werd vernieuwd. De homepagina wordt veel vaker geupdate, achterliggende pagina’s kregen related content, er wordt gebruik gemaakt van tags en de redactie kan razendsnel artikels verzamelen in nieuwe overzichtspagina’s (bij een bepaalde gebeurtenis, evenement of rond een bepaald thema).
Ook het aanbieden van audio werd volledig herbekeken. De live player is niet enkel meer het ding waarmee je naar de radio luistert, maar biedt een twitter feed aan en de meest recente artikels van de homepagina. De on-demand player biedt de audio nu ook aan als een stream, zodat je razendsnel kan doorspoelen naar een onderdeel in het programma, zonder eerst het hele bestand te moeten inladen. De on-demand player is ook uitgebreid met gerelateerde inhoud en extra audio fragmenten. Beide players werken op basis van een Flash Media Server stream.
Doorheen de site wordt ook inhoud van elders ingepast zoals Flickr slideshows, YouTube video’s, twitter feeds, RSS feeds, etc..
Sibelga is dé distributienetbeheerder voor elektriciteit en gas in het Brussels Hoofdstedelijk gewest. Marlon heeft voor Sibelga een nieuwe website ontworpen en ontwikkeld. Deze website is onlangs online gegaan.
De website moest vooral dynamisch zijn. Om deze reden werden er voor verschillende diensten workflows geïmplementeerd. Zo kan men bijvoorbeeld precies uitrekenen wat een nieuwe aansluiting of een nieuwe meter kost. Ook het aanvragen van een aansluiting of meter is in de nieuwe website een koud kunstje geworden. Bezoekers volgen een eenvoudige flow waarmee ze uiteindelijk een aanvraag kunnen doen. Meerdere aansluitingen kunnen aangevraagd worden. Deze werken worden als het ware in een ’shoppingbasket’ gelegd waarna er verder ‘geshopt’ kan worden. Omdat er veel technische termen en begrippen worden gebruikt staat er indien nodig de uitleg erbij.
De tools zijn niet alleen voor particulieren, ook professionele en industriële klanten kunnen hier hun gas of elektriciteit aansluiting aanvragen. Samen met Marlon heeft Sibelga deze flows ontwikkeld. Hierdoor zijn ingewikkelde formulieren ineens een stuk overzichtelijker!
Voor vacature.com werkte Marlon de voorbije maanden de nieuwe Mijn/Vacature af. Mijn/Vacature laat je toe
- online een CV aan te maken (manueel, door het importeren van een Microsoft Word document of door je gegevens uit LinkedIn op te halen) en zo gevonden te worden door werkgevers
- vacatures te ontvangen op maat van je profiel
- online te solliciteren
Jobs & Careers zorgde zelf voor analyse en design. Marlon zorgde voor de volledige ontwikkeling op maat van dit onderdeel van de website. Op basis van de analyse van Jobs & Careers bouwden we deze applicatie terug van nul op. De vorige versie van Mijn/Vacature werd volledig vervangen met de bedoeling verdere productontwikkeling mogelijk te maken.
Specifiek voor deze applicatie zijn o.a. integratie tussen PHP en Microsoft SQL Server, het gebruik van de LinkedIn API, integratie met verschillende SOAP webservices (voor gepersonaliseerde zoekopdrachten, Word document parsing, CV updates, online solliciteren, …) en integratie met het CRM systeem van Vacature.
Ook de migratie van alle gegevens uit de vorige versie van Mijn/Vacature (profielen, cv’s, gepersonaliseerde zoekopdrachten, diploma’s, werkervaringen, …) naar de nieuwe versie werd door Marlon afgewerkt.
Ondertussen is al een nieuwe versie van deze Mijn/Vacature gelanceerd. Mijn/Vacature is een onderdeel van de vacature.com site dat constant evolueert.
De website van Plan België – in nauwe samenwerking met de klant bedacht, ontworpen en ontwikkeld – werd door een professionele jury uitgeroepen tot “Meest gebruiksvriendelijke overheids- of non-profit website” tijdens de uitreiking van de eerste Usability Awards, een initiatief van AG Consult.
Zo’n wedstrijden impliceren altijd dat er zoiets bestaat als een winnaar en verliezers. We voelen er ons altijd wat onwennig bij. Maar natuurlijk is zo’n prijs een bevestiging van een bepaalde aanpak en filosofie waar we voor staan.
Het leuke aan deze award is de bevestiging van wat we oorspronkelijk zelf voor ogen haden bij het uitwerken van deze website (ik citeer even een paar opmerkingen van de jury):
- Grafisch creatief uitgewerkt maar toch gebruiksvriendelijk
- Goede categorisatie en navigatie
- Gelaagde content met aandacht voor hoe mensen lezen op het web
Deze website is niet alleen onze verdienste. Integendeel. De analysefase was een zeer nauwe samenwerking met de mensen van Plan België. Een samenwerking waarbij we via een prototype dat meer dan 7 maal werd herwerkt en via vele langdurige gesprekken tot het eindresultaat kwamen.
Deze award is een leuke aanleiding om het project wat verder uit de doeken te doen. In een tweetal blogposts zullen we binnenkort uitleggen hoe we tot het eindresultaat zijn gekomen.
Kudos aan AG Consult voor het zeer doorzichtig en nuchter organiseren van deze award.
Eind januari lanceerden we de nieuwe webshop voor de babyspeciaalzaak Monsters With An Attitude. Deze webshop is, net zoals alle andere webshops & projecten die we afleveren, “tailor made” naar de noden en wensen van de klant.
Zowel de look&feel als de functionaliteit werden vastgelegd na enkele rondes feedback en aanpassingen samen met de klant. Een goed inlevingsvermogen in de business en werkwijze van de klant laat toe om het aantal iteraties tot een minimum te houden terwijl we naar een maximum aan klantentevredenheid streven.
Wie de vorige posts op deze blog gelezen heeft weet dat we bepaalde ontwikkelings- en functionaliteitsprincipes hanteren. We kunnen ze gerust “web industry best practices” noemen. Wat nu volgt is een mix van een case study en whitepaper voor een webshop.
Analyse: analyse this
Eerst en vooral hebben we de analysefase. De eerste sessies met de klant zijn eerder brainstormsessies. Alle mogelijke functionaliteiten, inclusief de toeters en bellen, die relevant kunnen zijn voor dit type project worden uitvoerig besproken. Op het einde van de analysefase leggen we samen met de klant vast wat er zal worden uitgewerkt, hoeveel dat zal kosten en hoe lang dat zal duren. Vaak wordt er op dit ogenblik beslist om bepaalde opties al dan niet meteen te nemen of te verschuiven naar een volgende fase. Dankzij deze gefaseerde aanpak kan een project geleidelijk groeien.
Heel belangrijk is dat, naast de functionaliteit, ook de business processes van de klant mee onder de loupe worden genomen. In overleg worden scenario’s opgesteld voor de verschillende types van gebruikers (doelpubliek) die de website gaan gebruiken. Een gebruikerscenario identificeert handelingen met stappen en acties die moeten gebeuren om bepaalde doelen te kunnen bereiken.
Tijdens de analysefase staan deze gebruikerscenario’s centraal. Enerzijds bepalen ze de functionaliteit en logica. Anderzijds kunnen ze worden gebruikt ter controle of alle afgesproken functionaliteiten zijn verwerkt, maar ook of de website gebruiksvriendelijk en logisch is opgebouwd.
Uit de hele analyse vloeit uiteindelijke een prototype. Vincent had enkele posts terug over dit punt al een interessante uiteenzetting online geplaatst.
Design: het uithangbord
Tijdens de analysefase kan ook al aandacht worden besteed aan de look&feel van de webshop. Onderschat het belang hiervan niet. Een shop moet niet alleen functioneel goed werken, het moet er ook professioneel uitzien en vertrouwen wekken. Bovendien wordt de webshop het uithangbord voor de winkel. Een reden te meer om een knap en origineel design af te leveren. De klant weet op dit vlak meestal wel heel duidelijk waar hij naartoe wil. Onze designer Gert wist, zoals altijd, enkele verbluffende, toepasselijke designs uit zijn mouw te schudden.
Ontwikkeling: goede afspraken
Na deze eerste fases, die meestal wel parallel verlopen, start de technische ontwikkeling van de webshop. Tijdens de interne, technische kick-off meeting worden heel wat zaken besproken. We spreken goed af hoe de zaken technisch geïmplementeerd zullen worden. Doorgaans volgen nu 3 grote brokken in de ontwikkeling:
- Back-end development: dit houdt in dat de functionaliteit en bedrijfsprocessen die eigen zijn aan de webshop in code worden vertaald. Daarbij moet er ook communicatie naar een databank of externe systemen zijn.
- Front-end development: de design templates worden opgeknipt en vertaald naar XHTML, CSS en Javascript. Onderschat het belang van deze taak niet want hier leggen we de basis voor de Search Engine Optimalization (SEO).
- De laatste brok is de integratie van de back-end-ontwikkeling met de front-end-ontwikkeling.
Fasering, iteratie en klantfeedback
De ontwikkeling wordt opgedeeld in fases op basis van functionaliteit. Iedere fase wordt ontwikkeld en getest voor men naar de volgende fase overstapt. Veelal steunt een latere fase op eerder ontwikkelde fases dus is het van extreem belang dat men iedere fase goed test. Unit testing is hierbij een grote hulp.
Een belangrijk voordeel van fasering is dat men op het einde van iedere fase feedback kan vragen van de klant. Zo vermijdt je eventuele “verrassingen” op het einde van de complete ontwikkelingscyclus. Betrek je klant zo snel mogelijk bij de ontwikkeling. Iedere fase waarbij men binnen een korte periode een bepaalde functionaliteit ontwikkelt, test en ter goedkeuring voorlegt aan de klant noemt men een sprint.
Best practices
Er zijn een aantal best-practices die we in de kijker willen zetten:
- CSS sprites: we voegen een aantal afbeeldingen samen tot één afbeelding. (voorbeeld)
- Custom fonts door gebruik te maken van Adobe Flash.
- Search Engine Optimized (SEO) url’s & content.
- Gebruik van Ajaxvoor het winkelmandje met als doel een betere user experience.
- Meertaligheid. Je kunt argumenteren dat dit een functionaliteit is en geen “best practice”. Je kunt je echter geen Europese webshop inbeelden zonder. Meertaligheid is een “must”. Momenteel is de webshop van Monsters With An Attitude beschikbaar in één taal. De shop is zo ontwikkeld dat het toevoegen van extra talen slechts een administratieve kwestie is. Het leuke aan de meertaligheidsfunctie is dat wanneer men van taal verandert men op dezelfde pagina in de andere taal terecht komt. De meeste sites gaan bij het switchen van taal naar de hoofdpagina waardoor men de gebruiker verplicht om opnieuw een product of pagina te zoeken. Bij good practices hoeft dit niet. “It’s what separates the men from the boys”
Beheermodule: geen dubbel werk
Als laatste willen we je ook even laten meekijken achter de schermen want de publieke webshop is slecht de helft van de webapplicatie.
Deze beheersmodule laat toe de gegevens van klanten, producten, bestellingen en stock te beheren. Daarnaast is er ook nog volledige synchronisatie voorzien tussen de database voor de webapplicatie en de Filemaker-software in de winkel zodat de klant geen dubbel beheer moet doen voor de fysische winkel en de webshop.
De beheersmodule laat o.a. de volgende zaken toe:
- Beheer klanten, producten, bestellingen en stockindicatie;
- Printen BTW-listings, verkooplijsten;
- Printen van facturen, inhoudsdocumenten, plakbonnen & transportdocumenten;
- Printbare facturen en creditnota’s zijn PDF-documenten die dynamisch worden gegenereerd.
- Verzenden van betalingsherinneringen.
Oh ja, de ontwikkeling gebeurde in ASP.NET. Maar dit is slechts een triviaal gegeven.
Verdere informatie over dit project kan je terugvinden op de projectpagina
