Klantvraag
De klant wilde graag, in eerste instantie, een website ontwikkelen om hun waardevolle informatie over e-invoicing te delen met de buitenwereld. Dit idee was gek genoeg een vrij uniek concept en TriFinance was er zelfs al mee begonnen. Ze hebben met beschikbare online tools een eigen website omgeving opgezet voor verschillende landen. De opdracht voor ons was om hier een mooie online maatwerk oplossing voor te realiseren.
Oplossing & resultaat
Met deze informatie is SMIT. direct aan de slag gegaan met het uitdenken van deze tool. We hebben geadviseerd om het product als een nieuwe branding op te zetten: Electronic Invoicing Global. Ook hebben wij advies gegeven over hoe dit product het best op de markt gezet kon worden. Het idee van een ‘website’ was al snel van de baan. We hebben het groter aangepakt: een online platform.
Huisstijl
Het begint bij het maken van een aparte branding voor het product. Denk bijvoorbeeld aan een nieuw logo, kleuren en ook een aparte huisstijl. Onze in-house vormgever Renik heeft een passend nieuw logo gemaakt. De opdracht hierin was: een logo wat aansluit bij de huisstijl van TriFinance.
Aansluitend leveren wij een brandbook bij de huisstijl.
Wireframes en ontwerp
Na het afbakenen van de huisstijl was het de beurt aan het webdesign team. Het doel van het design team: een design prototype. Dit proces gaat altijd van start met goed overleg, gevolgd door het maken van wireframes. User Experience en User Interface staan hierin centraal.
Als de indelingen van de pagina’s zijn goedgekeurd gaan de designers over tot ontwerpen van de pagina’s. Dit gaat in een razend tempo, omdat de indelingen al helemaal bekend zijn. Dit resultaat delen we opnieuw met onze klant, zodat de gehele stijl van het platform direct duidelijk is. In dit geval was het prototype direct raak. Een paar aanpassingen en het design werd afgerond.
Realisatie van het platform
Na enkele feedback rondes is het design goedgekeurd. Op dat moment wordt het design gedeeld met developers en vindt er duidelijk overleg plaatst. Welke functionaliteit wordt er gebouwd? Wat doet de rode knop precies? Wat gebeurd er als ik daar op klik? Alles wordt tot in de puntjes uitgeschreven.
Techniek
Het platform werkt met de technologieën Laravel, VueJS en maakt gebruik van Google Spreadsheets koppelingen om de data vanuit meer dan 200 bestanden te halen en te synchroniseren met het platform.
Met onze innovatieve manieren van het afschermen van de online content zijn er meerdere drempels opgezet:
- Login middels een account dat gekoppeld is aan een organisatie.
- De teksten worden geroteerd betreft karakters en opnieuw ingeladen middels een custom font dat de karakters visueel weer op de juiste plek neerzet. Hiermee zal dan indien er tekst gekopieerd zal worden andere karakters op het klembord komen dan dat de gebruiker dacht te hebben gekopieerd.
Indien het scherm inactief wordt zullen wij de schermweergave wazig maken zodat het maken van screenshots niet of minder soepeltjes zal verlopen
- De interactieve wereldkaart is gerealiseerd met LeafletJS (een open-source project) hiermee is veel flexibiliteit en mogelijkheid tot aanpassen gerealiseerd voor het opzetten van de wenselijke kaart voor de klant.
De snelheidswinst van dit platform is de merken aan het cache-update-refresh mechanisme dat we hebben ingebouwd. Dit geldt voor alle aspecten van de omgeving, ongeacht hoeveel gebruikers er binnen een organisatie wijzigingen zal aanbrengen.
Resultaat
Het gehele platform is mede door vakkundig werk voortijdig opgeleverd aan de klant. Alles in dit project is zo duidelijk geschreven en bedacht, dat een vroege oplevering mogelijk was.
