TagCity is / was een van de grootste kortingscodewebsites in België. Pixili bood hen een totaal pakket branding, web, beeld en karakter ontwerp diensten aan.
We ontworpen hun merk identiteit van de grond op en integreerde die in hun website maar ook al hun marketingmateriaal zoals nieuwsbrieven, banners en socialemediacampagnes.
We ontwikkelden de website en alle interne tools, gaven advies in web strategie en nog veel meer. Een echt totaal pakket dus.
De reis van TagCity was dan ook een ware saga, en Pixili was er vanaf dag één bij. TagCity was een van onze eerste klanten en plus zes jaar en drie versies later werken wij nog steeds samen.
TagCity veranderde recent van naam en onderging een grondige re-branding en leeft verder onder de naam kortingscode.be. Op dat punt werd TagCity ook geen community site meer en zoals zijn naam suggereert enkel nog een kortingscode site.
TagCity leidde ook tot de samenwerking met de grootste Belgische nieuwsmagazines; Knack en Le Vif.
Nu zowel kortingscode punt b e als het project voor Knack en Le Vif zijn projecten door Pixili ontworpen en ontwikkeld. En kun je meer over lezen in hun eigen cases.
De Vraag
De vraag voor wat wij TagCity 2.0 noemen kwam er nadat de eerste versie van TagCity een zeer constant en relatief snelle groei onder vond. Veel webshops wouden op TagCity staan en de klant zag het aantal bezoekers maand na maand stijgen en er ontstond een bloeiende community TagCityers.
Het idee van TagCity sloeg dus aan. Maar groei werd tegengehouden door het feit dat de eerste versie van TagCity heel eenvoudig was.
Het logo
Het logo ontwierp Pixili al voor TagCity 1.0 en is hetzelfde gebleven in de transitie naar TagCity 2.0 en werd enkel iets gemoderniseerd.
Het logo is een fusie tussen een locatie symbool en een prijs kaartje en werd zeer gesmaakt door de klant.
Homepage
Aan TagCity werd regelmatig gevraagd door e-commercesites om deals uitgebreider te kunnen promoten. Dit is voor hen een belangrijke bron van inkomsten.
De vragende webshops toonde interesse in een tag die de homepage van de website kon overnemen.
Echter deze mocht niet aanvoelen als een traditionele homepage takeover en moest passen binnen hun merk.
De klant wou dus bepaalde webshops extra promoten zonder in te leveren op gebruikers ervaring van TagCity.
Om dit te bereiken ontworpen we een lay-out die functioneert als een overlay. Deze zorgt er voor dat belangrijke gebruikers elementen en de TagCity branding nooit verloren raken.
Om even welke achtergrond de vragende webshop ons bezorgde; de tekst op de TagCity zal altijd leesbaar zijn en UI-elementen altijd duidelijk zichtbaar.
Dit proces was ook extreem gebruiksvriendelijk voor de klant. De volledige overlay werd ontwikkeld in CSS (2) en voor de speciale effecten is geen extra software nodig zoals bv. Photoshop.
Hierdoor kon een mooie banner gemaakt worden zonder de nood aan dure software of tussenkomst van een grafisch vormgever. Het was zo eenvoudig als het uploaden van een passende foto.
En om zowel de kwaliteit als het goed presteren van de banner nog extra te verzekeren. Werden een aantal eenvoudige advertentieregels voor de vragende webshop opgesteld.
Er werd afgeraden om:
- veel tekst in de achtergrond te zetten
- een afbeelding te bezorgen met onvoldoende resolutie
- het belangrijk element in hun campagne exact in het midden te zetten.
Daarnaast bood TagCity ook de optie een afbeelding voor de takeover zelf te maken op basis van doelen van hun campagne.
Karakter ontwerp
Het ontwerpen van bedrijfsmascottes is altijd een van onze specialiteiten geweest.
We denken dat het een verloren vaardigheid is, terwijl er veel voorbeelden zijn waarom een bedrijfsmascotte een goed idee is.
Nu een mascotte lag hier voor de hand. Sinds in deze nieuwe versie de opdrachtgever de “City” in TagCity, het community-gedeelte dus, extra wou benadrukken. En een stad heeft inwoners.
We ontwikkelden eerst een vrouwelijk en mannelijk karakter. Deze zouden de standaard mascottes worden, maar ook de basis vormen van de look van elke TagCityer. De basis mascottes zijn Tagy en Tago.
Tagy is een mannelijk personage met een heel herkenbaar hoofd en de vorm is identiek aan het TagCity-logo.
Tagy wordt beschreven als vriendelijk, extravert, creatief en een geboren verkoper. Zijn algemene uiterlijk is gebaseerd op dat van infomerciallegendes zoals Anthony Sullivan, Vince Offer en Billy Mays.
Tago, wiens naam is gebaseerd op Margo, heeft veel van dezelfde eigenschappen.
Ze is zo mogelijk een nog betere verkoper dan Tagy, want naast alle natuurlijke kwaliteiten die iemand tot een goede handelaar maken, heeft ze charisma in overvloed.
Beide personages zijn met opzet ontworpen om eenvoudig te zijn. Tagy en Tago bevatten weinig verwijzingen naar ras of afkomst. Hun huid is oranje omdat het de merkkleur van TagCity is, maar ook onze een manier om te zeggen dat huidskleur er niet toe doet in TagCity. Iedereen is welkom.
Een probleem dat TagCity had is dat men een zeer breed raster aan webshops had, klinkt als een voordeel, maar wil ook zeggen dat men niet kon richten op 1 doelgroep.
Men wist wel wat de populairste interesse velden waren. Maar niet wie dit waren en hoe deze direct te bereiken met kortingen die extra interessant voor hen zijn.
Maar geloof het of niet ook hier kon karakter ontwerp helpen.
Na registratie wordt elke gebruiker een TagCityer omdat deze karakters ook bedoeld zijn als gemeenschapssymbool. Je kon je eigen personage ontwerpen op basis van je interesses, van Geeks tot Foodie. Dit gaf ons organisch een idee van de interesses van het nieuwe lid, wat ons een goede start gaf bij het creëren van een aangepaste TagCity-ervaring voor hen.
Social media
Daarnaast wilde TagCity ook speciale aanbiedingen en/of evenementen op Facebook kunnen promoten. Pixili ontwikkelde een basis lay-out voor de Facebook-thumbnail, een kader met bepaalde regels die altijd hetzelfde moest blijven. Zo waren posts van TagCity altijd herkenbaar voor hun volgers.
De lay-out bleef zeer flexibel en zoals te zien is in de onderstaande galerij, kan de basis lay-out veel verschillende vormen aannemen en er werd ook extra aandacht besteed aan posts voor feestdagen en actiedagen. Maar elementen zoals het font, het kader en waar bepaalde logo’s staan zijn altijd zelfde
TagCity organiseerde regelmatig weggeef acties en prijsvragen. In de transitie van TagCity 1.0, naar 2.0 wilde de klant dit blijven doen, maar voor deze acties meer inzetten op social media.
Nieuwsbrieven
De klant vroeg ons ook om nieuwsbrieven te ontwerpen. Net als op Facebook zou een flexibele basisindeling goed van pas komen.
We hebben ook speciale versies ontworpen voor belangrijke dagen zoals Black Friday, Cyber Monday, Valentijnsdag, enz.
Daarnaast was er nog een technische uitdaging. Een nieuwsbrief ontwikkelen die volledig dynamisch is en automatisch de best passende tags naar elke TagCityer stuurt. Dit deden we op basis van een algoritme die zich baseert op de algemene interesses van het lid plus de webshops die de gebruiker volgt.
Wervingsstrategieën
Bij het ontwikkelen van het community-gedeelte van TagCity stonden we voor de uitdaging. Om een natuurlijke manier te vinden meer bezoekers om te zetten naar een lid van TagCity.
Opdringerige banners, pop-ups en andere advertenties waren geen optie. Uit tests werden deze ervaren als een negatieve gebruikerservaring en verhoogde ze de bounce rate en leverde amper nieuwe leden op.
De bezoeker is dan in eerste instantie op de website om een korting te vinden. Pixili vond hiervoor een unieke, effectieve oplossing en verhoogde het aantal inschrijvingen drastisch. Hoe we dit deden is een prachtig voorbeeld van webstrategie, waar we ons in de schoenen van de gebruiker zetten en van uit dat oogpunt nadenken hoe we ons doel kunnen bereiken. Hieronder volgt dan ook een kleine masterclass in hoe we dit deden voor hen.
Exclusive Content Strategie
Het concept van de exclusieve contentstrategie is simpel: gebruikers hebben alleen toegang tot exclusieve content als ze zich registreren.
Dit idee is ontstaan naar aanleiding van een vraag bepaalde webshops en handelaars op TagCity. een trend onder webshops is om hun kortingen exclusief te maken door ze in aantal te beperken. Dit gaf ons ook een potentieel concurrentievoordeel omdat we veel exclusieve deals konden aanbieden.
Optin Strategie
We vonden wanneer iemand bereid is zich in te schrijven voor onze nieuwsbrief. Die gebruiker de exact juiste mentaliteit had om een lid te worden.
Logisch want die gebruiker wil op dit punt al regelmatig geschikte kortingen ontvangen. En door lid te worden, worden die kortingen alleen maar beter en relevanter.
De gebruiker vrijwillig in de juiste mindset krijgen was key om lid te worden als iets waardevol te beschouwen.
Dat is extreem moeilijk om in 1 keer te doen. Een normaal registratie formulier werd vaak genegeerd en paste ook niet vlot in een lay-out. Je zult daar door ook merken dat we voornamelijk de nieuwsbrief pushen op de website en niet die gebruikers registratie. Terwijl dat ons doel is moeten we de eerste drempel zo laag mogelijk maken en nooit hebzuchtig zijn met hoeveel data we van hen vragen. We vragen hun data beetje bij beetje en misschien nog belangrijker op een leuke en entertaining manier. Een voorbeeld van één van deze toffe manieren was het TagCity-paspoort.
Avatar strategie
In de eerste versie van TagCity lieten we gebruikers hun eigen avatar uploaden. Ook al lijkt dit de meest voor de handliggende manier om dit te doen in realiteit had dit veel nadelen.
Dit vroeg een extra moeite en een zekere kennis en die drempel leidde dat 80 procent van de gebruikers geen profielfoto had. De 19 procent van profielen die wel een avatar hadden waren vaak een profielfoto overgenomen tijdens hun registratie via Facebook en werd zelden veranderd.
De resterende 1 procent waren spammer en hackers. Die niet brandsafe materiaal probeerden te posten of de upload functie probeerden te misbruiken om de website te breken.
Ook al hebben we beide gefixt door bv. de nodig moderatie en uploads rechtstreeks naar een CDN te sturen. Het mocht niet zijn.
De laatste nagel in de kist van dit standaard avatar systeem was dat het weinig toe droeg tot de gebruikservaring van TagCity.
Toen we met het idee voor het nieuw avatar systeem kwamen was de keuze snel gemaakt. Want iedereen had direct een unieke avatar, het was on brand en altijd brand safe. Maar bovenal een leuke manier om data over gebruiker te verzamelen. Die daarna voor beide partijen nuttig was.
Het idee achter de avatar was ieder nieuw inwoner automagisch een unieke oogkleur, kledingkleur en haarkleur te geven willekeurig gegenereerd door het systeem. Dit kon men als men wou nog manueel aan passen samen.
Nu misschien wel het belangrijkste aspect is dat men kan kiezen welk type TagCityer ze waren.
En elk type gaf ons een idee over in welke categorieën dit lid mogelijk geïnteresseerd was.
Overzicht van alle type TagCityers en zijn gelinkte interesses.
- De vader / de moeder (Baby en kinderen, bloemen en geschenken, erotiek, huis en tuin, speelgoed)
- Student (Boeken, Muziek, films en games, Kantoor en bureau, Elektronica, Speelgoed, Dating)
- De geek (Bedrukken en fotografie, Boeken, muziek, films en games, Kantoor en bureau, Elektronica, Speelgoed, Dating )
- De Doehetzelfver (Huis en tuin, Elektronica)
- De Reiziger (Vakantie en reizen, Gezondheid en verzorging, Eten en drinken)
- De Foodie (Eten en drinken, Vakantie en reizen)
- Ondernemer (Zakelijke dienstverlening, Hosting, Kantoor en bureau, Elektronica)
- De Normie (alles/ik deel deze voorkeur liever niet met TagCity)
Blijven innoveren
TagCity was één van de eerste. Al dan niet de eerste! Kortingscode website met een community aspect. Dit was een van de ideeën die hen duidelijk onderscheide.
TagCity wou dan ook blijven innoveren en het nieuw doel van TagCity 2.0 was de eerste kortingscode site te zijn.
Die naast kortingscodes voor webshops, ook kortingen zou verzamelen van lokale handelaars. Wat ongezien was.
Voor de handelaars hebben we dan ook een volledige aparte wervingsstrategie, community ervaring en backend ontwikkeld.
Community ervaring
Met een interactieve, digitale kaart kunnen gebruikers winkels filteren op mogelijke kortingsbonnen of een uitverkoop. Ook was het mogelijk om in te zoomen op de locatie van het toestel via GPS .
En zoals voor de webshops maakten we een element die alle populairste handelaars weergeeft per categorie.
Handelaar-wervingsstrategieën
We splitsen het registratieproces op in stappen en laten bij elke stap de voortgang visueel zien.
Zo gaan we van stap 1, een lege stad, naar stap 2. Hier verschijnt een winkel, maar het bord erboven is nog leeg. In deze stap wordt de naam en het logo ingevuld, dus als de gebruiker bij stap 3 komt, is de winkel herkenbaar gemaakt.
In stap 3 wordt de locatie van de winkel opgevraagd en krijgt de virtuele winkel buren. Daarna zijn er twee optionele stappen die niet verplicht zijn, maar wel het profiel aanvullen met nuttige informatie.
Backend
Handelaars hadden ook een volledig eigen backend. Daarmee kon men volledig zelf hun pagina op TagCity beheren.
Zo kunnen verkopers zelf kortingsbonnen samenstellen met Live Preview.
Dat deze bon vervolgens direct beschikbaar was als een PDF-download. zorgde voor extra’s zoals het beperken van het aantal kortingsbonnen en/of het instellen van een beperkte geldigheidsperiode. Daarbovenop stelt TagCity standaard al voorwaarden die misbruik tegengaan.
Daarnaast zijn er nog twee unieke elementen waartoe alleen verkopers toegang hebben. Het eerste element was het aankondigen van een verkoop. Dit is uniek omdat ze maar een paar keer per jaar toegevoegd kunnen worden en gereserveerd zijn voor Premium leden.
Als er een uitverkoop aangekondigd wordt bij een winkel in de buurt wordt er automatisch een mail naar alle gebruikers in de buurt van deze winkel verstuurd.
Er is ook de mogelijkheid om de handelaar updates te laten plaatsen. Dit laat de handelaar vrij om te posten wat hij wil.
Landingspagina
Een aparte homepagina die verteld waarom handelaars lid moeten worden van TagCity.
