Casestudy: Scorpioncoatings.com web herontwerp

Als het gaat om de digitale wereld, zijn het de slimme, snelle en eenvoudige oplossingen die ertoe doen. Dat is precies wat onze klant wilde toen hij ons benaderde voor een webredesign. Een verouderde en moeilijk te gebruiken website zorgt niet alleen voor een verbroken verbinding tussen u en de gebruikers, maar heeft ook invloed op de bedrijfsresultaten.

Hoe weet u of de website van een klant een herontwerp nodig heeft?

Het omvat veel dingen, waaronder het vernieuwen van lay-outs, het bijwerken van inhoud en het verbeteren van de navigatie. De vraag die de meeste mensen stellen is hoe vaak ze moeten investeren in een herontwerp van een website. Hoewel er geen magisch antwoord is op deze vraag, zijn hier de belangrijkste redenen waarom een website mogelijk opnieuw moet worden ontworpen:

  • Bij rebranding of herpositionering
  • Noodzaak om een betere gebruikerservaring te creëren
  • De huidige site is niet mobiel responsive
  • Het huidige ontwerp ziet er verouderd uit
  • Behoefte om conversies/verkoop te verbeteren
  • Tools van derden zijn verouderd
  • De huidige website werkt niet

Casestudy van Scorpioncoatings.com

De websitesjabloon is een cruciaal onderdeel van een bedrijf en een van onze belangrijke klanten was van mening dat dit bedrijfsonderdeel kon worden verbeterd.

Het probleem

Nadat we de website van onze klant hadden bekeken, merkten we dat deze opnieuw moest worden gedefinieerd om de kern van het bedrijf met succes te communiceren.

We moesten het bedrijf ook optimaliseren voor de belangrijkste webvitaliteiten. Zoals u weet, spelen deze essentiële zaken een cruciale rol bij het bepalen van de positie van een website in Google en andere zoekmachines.

Navigatie door het productportfolio was een probleem waardoor het moeilijk was voor gebruikers om te vinden wat ze zochten – het probleem van navigatie had een negatieve invloed op conversies en uiteindelijk op hun bedrijfsresultaten.

Objectief

  • Creëer een boeiende en aantrekkelijke website met een duidelijke call-to-action
  • Maak een responsief webontwerp dat gemakkelijk toegankelijk en gebruiksvriendelijk is op mobiele apparaten
  • Bouw een visueel aantrekkelijke startpagina (ik heb het team de opdracht gegeven om drie mockups van de startpagina te bouwen waaruit de klant kan kiezen)
  • Herontwerp "over" pagina
  • Ontwerp de "locator"-sjabloon
  • Integreer sociaal delen met relevante pagina's
  • Optimaliseer de website voor SEO om de zichtbaarheid te verbeteren Voorbereiding

    Om de site in kaart te brengen en elk detail over hun producten te vinden, zijn we begonnen met het analyseren van de huidige website. We hebben gekeken naar onsite problemen die SEO kunnen belemmeren. We merkten dat de 83 afbeeldingen geen alt-teksttags hadden en dat de site verbroken links had. We moesten ook de titeltags en metabeschrijvingen optimaliseren.

    De volgende stap was het zoeken naar inspiratie en referenties. We hebben de toonaangevende websites in de niche van de klant gecontroleerd om wat ideeën op te doen over wat het beste werkt. Natuurlijk moesten we vroeg genoeg een duidelijk beeld hebben van hoe we de website moesten structureren om later verwarring te voorkomen.

    Het proces

    Voordat ik aan het project begon, wilde ik ervoor zorgen dat mijn team en de klant op één lijn zitten wat betreft communicatie en tijd. Ik creëerde een communicatiekanaal op Basecamp met de details van het project en alles wat we moesten doen.

    Ik heb leden van de klantzijde en mijn teamleden toegevoegd die het project zouden afhandelen.

    Voordat we aan een project begonnen, konden we het met de klant bespreken om te weten welke richting we op gingen. We gaven iedereen ook de kans om hun mening over het project te geven voordat we naar de volgende stap gingen.

    We hebben ook de tijdlijn voor elke fase van het project vastgesteld, zodat we zonder verwarring de volgende fase kunnen volgen en naar de volgende fase kunnen gaan.

    Stappen om een website opnieuw te ontwerpen

    Onderzoek vormt een cruciaal onderdeel van het herontwerpproces van onze website. Voordat we met het herontwerpproces beginnen, graven we dieper in het publiek van onze klanten om te ontdekken wat wel en niet werkt. Idealiter volgt ons herontwerpproces deze stappen:

    • De huidige site controleren
    • De gebruikers begrijpen
    • De doelen identificeren
    • Concurrentieanalyse
    • Een strategie maken
    • Het te gebruiken platform evalueren
    • Een tijdlijn instellen
    • Executie
    • Pre-lanceringsbeoordeling

    Stap 1: Audit de huidige site

    Als webdesign bedrijf begrijpen we dat een goede voorbereiding nodig is bij het herontwerpen van een website. De eerste stap die we namen was het uitvoeren van een diepgaande audit van de huidige locatie van onze klant. Tijdens de audit realiseerden we ons dat sommige delen van de website verouderd waren of ondermaats presteerden, terwijl we andere onderdelen konden hergebruiken.

    Dit is in het bijzonder wat we aan het doen waren bij het controleren van de website:

    De prestaties van de websitepagina beoordelen

    We bouwen een sitemap van de huidige website om de analyses van elke pagina te helpen beoordelen en op zoek te gaan naar merkbare gebruikerstrends. Hierdoor wisten we met welke pagina's we moesten werken. Door zaken als verkeer, conversies, enz. te analyseren, konden we zien welke pagina's gebruikers nuttig vinden en welke pagina's we moesten verwijderen. Dit heeft ons enorm geholpen bij het maken van een sitemap voor de nieuwe website.

    SEO-audit voor de huidige site

    Hoe goed een website ook is, niemand zal hem zien als deze niet is geoptimaliseerd voor SEO. Met dit in gedachten hebben we Google Search Console gebruikt om een volledige SEO-audit van de site van onze klant uit te voeren om een idee te krijgen van waar ze waren met SEO-inspanningen en wat we konden doen om ervoor te zorgen dat de site goed presteert in zoekmachines.

    Na het uitvoeren van de SEO-audit realiseerden we ons dat technische problemen zoals sitesnelheid en ontbrekende zoekwoorden de organische prestaties van de website negatief beïnvloedden.

    Inhoudsbeoordeling

    Inhoud is een ander belangrijk onderdeel van een website. Toch weten veel website-eigenaren niet hoe ze het moeten gebruiken om hun bedrijf te laten groeien. Nadat we bijvoorbeeld de inhoud op de website van onze klant hadden bekeken, realiseerden we ons dat het meeste over hun bedrijf ging en niet over hun publiek.

    De meeste mensen bezoeken een website om een antwoord op hun vraag te vinden en doen waarschijnlijk een aankoop. Als dat het geval is, moet goede website-inhoud gaan over de pijnpunten van de koper en niet over 'u' en uw bedrijf.

    Stap 2: Identificeer de gebruikers

    Een van de fouten die onervaren websiteontwerpers maken bij het herontwerpen van een website, is dat ze de huidige websitebezoekers niet begrijpen. We wisten dit heel goed en wilden het een beetje anders doen.

    We besloten de gebruikers te interviewen en hen vragen te stellen, zodat we hun reis konden begrijpen. Enkele van de vragen die we de gebruikers hebben gesteld, zijn:

    • Wat was uw ervaring met het navigeren naar pagina x?
    • Wat was de aanleiding om product X te kopen?
    • Welke uitdagingen heb je ervaren op de website?

    Zoals u kunt zien, zijn deze vragen bedoeld om de reis van de gebruiker te begrijpen, zodat u de nodige wijzigingen kunt aanbrengen. Naast het interviewen van de gebruikers, hebben we gebruikerstests opgezet om uit de eerste hand informatie te krijgen over hoe gebruikers omgaan met de website bij het uitvoeren van verschillende taken. Op deze manier konden we gebieden identificeren die we moesten veranderen om frustraties van gebruikers te minimaliseren.

    Stap 3: doelen stellen

    Nu we de site-audit al hadden uitgevoerd en bekend waren met de reis van de gebruikers, was de volgende stap het stellen van de doelen. Natuurlijk hadden we een idee waarom onze klant zijn website opnieuw wilde ontwerpen, maar we wisten dat het noodzakelijk was om na ons onderzoek een aantal specifieke doelen te stellen.

    Omdat we een website wilden maken die goed werkt voor SEO en marketing, gingen we verder dan het uiterlijk en het uiterlijk om de functionaliteit van de website op te nemen.

    Hoewel visuele functies goed zijn, kunnen ze problemen veroorzaken wanneer ze op een website worden gepropt. Denk aan moeilijk te vinden navigatie, trage laadtijden, verwarrende paginalinks, enz., die een gebruiker zouden frustreren.

    Zo stellen we doelen voor het herontwerp van onze website:

    • Onze klant wilde zijn bezoekers verdrievoudigen, dus hebben we een getal gebruikt bij het bepalen van onze doelen
    • Navigatie was een probleem, dus hebben we specifieke ontwerpdoelen gesteld
    • Genoemde specifieke functionaliteiten zoals calls to action

    Nadat we onze doelen hadden bepaald, hebben we ze aan het hele team gecommuniceerd, zodat ze wisten wat er moest gebeuren.

    Stap 4: Concurrentieanalyse

    Er is niets mis met naar uw concurrentie te kijken om te zien wat zij in uw branche doen. Als een concurrent het beter doet dan jij, is het verstandig om erachter te komen waarom dat zo is.

    In ons geval hebben we gekeken naar andere websites van concurrenten en hebben we vastgesteld wat we leuk vinden en wat niet. We hebben gekeken naar wat ze op hun website doen dat onze klant niet is. Maar begrijp ons niet verkeerd, ons doel was niet om ze te imiteren. In plaats daarvan wilden we uitzoeken hoe we de website van onze klant konden verbeteren en onderscheiden van de concurrenten.

    Stap 5: Maak een strategie

    Nu we goed gedefinieerde doelen hadden en concurrentieanalyses uitvoerden, was de volgende stap het definiëren van een strategie om die doelen te bereiken. Dit is wat we in onze strategie hebben opgenomen.

    Informatie-architectuur

    We ontdekten enkele pagina's die het goed deden tijdens onze site-audit en andere die geen bezoekers ontvingen. We moesten deze pagina's reorganiseren, enkele verwijderen en zelfs andere pagina's toevoegen die we geschikt achtten.

    We hebben structurele kaarten van de oude site getekend om een idee te krijgen van hoe de schermen zich verhouden. We hebben rekening gehouden met de doelen, het verkeer en de inhoud geëvalueerd voordat we de nieuwe wijzigingen doorvoeren. De informatiearchitectuur fungeerde als een checklist bij het ontwerpen, schrijven of coderen van alle pagina's.

    Gebruikersreis

    Hoe een gebruiker met een website omgaat, bepaalt hoe lang hij op de site blijft en of hij een aankoop doet of niet. Daartoe is het absoluut noodzakelijk om alle fasen van de reis van een gebruiker in overweging te nemen, vanaf het moment dat ze op de website komen tot het moment waarop ze een aankoop doen.

    Door de ideale gebruikersstroom te identificeren, kunnen we bepalen hoe bezoekers met de site omgaan. Toen we eenmaal wisten hoe een gebruiker zich door de site zou bewegen, werd het gemakkelijker om de gebruikersreis te optimaliseren.

    SEO-checkpoints

    Een van de belangrijkste redenen voor het opnieuw ontwerpen van een website is om het verkeer te verbeteren en de verkoop te verhogen. Zoals eerder vermeld, zal niemand uw website zien als deze niet vindbaar is op zoekmachines. Ons webdesignteam wist dit en daarom hebben ze onze SEO-nerds bij elke stap van het herontwerpproces betrokken.

    Onze SEO-experts hebben goed trefwoordonderzoek uitgevoerd om een idee te krijgen van waar bezoekers naar op zoek zijn en de nieuwe site voor die trefwoorden te optimaliseren. Het kennen van de voorwaarden die de potentiële kopers gebruiken, hielp op twee manieren. Ten eerste maakte het het gemakkelijker om inhoud te maken die resoneert met het publiek, en ten tweede hielp het de positie in zoekmachines te verbeteren.

    Naast trefwoordonderzoek zijn hier andere stappen die we hebben genomen om de site te optimaliseren voor SEO:

    • Metabeschrijvingen en permalinks opnemen voor alle inhoud
    • Kop- en subkopteksten opnemen voor leesbaarheid
    • Voeg doelzoekwoorden toe aan de bestemmingspagina's
    • Laadtijd van de site verbeteren

    Mobiel reactievermogen

    Momenteel is er meer mobiel browsen dan desktop browsen, wat betekent dat meer gebruikers waarschijnlijk een tablet of telefoon gebruiken bij het bezoeken van een website. Om ervoor te zorgen dat de website van onze klant aan de taak voldoet, moesten we deze mobiel responsief maken.

    Gebruikerservaring is de nieuwe rankingfactor van Google, wat betekent dat websites die geen goede gebruikerservaring hebben, laag zullen scoren in zoekmachines. Bovendien zullen gebruikers waarschijnlijk een site verlaten als deze niet responsief is. Een responsive website verbetert niet alleen de gebruikerservaring, maar stimuleert ook de SEO. Enkele van de stappen die we hebben genomen om de laadtijden en mobiele ervaringen van de site te verbeteren, zijn:

    • Afbeeldingen optimaliseren
    • Lettertypen optimaliseren
    • CSS-levering optimaliseren
    • Compressie inschakelen
    • Verminder de reactietijd van de server
    • JavaScript en JavaScript laden uitstellen
    • JavaScript en CSS verkleinen
    • Bronnen verkleinen
    • Prioriteit geven boven de vouwinhoud
    • Schuif scripting onder de vouw

    Stap 6: Evalueer het CMS van de site

    Het kiezen van de juiste software is cruciaal bij het herontwerpen van een website. Deze software, ook wel contentmanagementsysteem (CMS) genoemd, bepaalt hoe content wordt ontwikkeld, ontworpen en gepubliceerd.

    Verschillende platformen hebben hun voor- en nadelen. De sleutel is om een platform te gebruiken dat up-to-date is; anders mis je verschillende waardevolle functies en optimalisaties.

    In ons geval wilden we een veilig, zoekmachinevriendelijk platform en een platform dat geoptimaliseerd is voor snelheid, dus gingen we voor WordPress. Natuurlijk zijn er veel mogelijkheden, dus zorg ervoor dat u ze controleert, afhankelijk van wat u voor uw klanten wilt bereiken.

    Stap 7: Stel een tijdlijn in

    Doelen kunnen nooit een open einde hebben. Nadat we alles klaar hadden, stelden we een realistische tijdlijn op om het project af te ronden.

    Het maken van een website kost tijd, dus we gaven onszelf genoeg tijd om het proces niet te haasten. Natuurlijk is er geen magische manier om te bepalen hoeveel tijd het kost om een website opnieuw te ontwerpen, maar in de meeste gevallen zal het twee tot vijf maanden duren om het project te voltooien.

    Voor ons geval hebben we overwogen wanneer de klant de website nodig zou hebben en hoeveel werk we eraan wilden besteden. Nadat we een deadline hadden, hebben we deze in kleinere stukken opgedeeld om ons te helpen onze voortgang bij te houden.

    Stap 8: Uitvoering

    Ontwerpen is de meest cruciale stap van een herontwerp van een website. Het is de tijd dat je eindelijk in elkaar kunt zetten wat je achter de deuren hebt voorbereid.

    We wilden het beste voor onze klant, dus besloten we het rustig aan te doen terwijl we constant feedback kregen. De eerste stap was het maken van wireframes om een duidelijk beeld te krijgen van hoe de inhoud op elke pagina zal verschijnen.

    Daarna gingen we aan de slag met het ontwerpen van de homepage en natuurlijk om feedback van het team te vragen. Dit heeft ons veel tijd bespaard omdat het ervoor zorgde dat alles vanaf het begin de goede kant op gaat. We herhaalden hetzelfde proces voor de resterende secties totdat we de hele site hadden voltooid.

    Stap 9: Pre-lanceringsbeoordeling

    Nu je de website hebt ontworpen en ontwikkeld, is de volgende stap het lanceren van de website. Voordat we de website lanceerden, hebben we echter besloten om de site te beoordelen om er zeker van te zijn dat alles in orde was. Dit is wat we hebben opgenomen in onze pre-launch review:

    • Ervoor zorgen dat de metabeschrijving en paginatitels correct zijn
    • Controleren op gebroken links
    • Controleren op ontbrekende of kapotte afbeeldingen
    • Bevestigen dat 301-omleidingen zijn ingesteld

    Door de website te beoordelen voordat we deze aan de eigenaar overhandigden, konden we eventuele problemen oplossen die zich na de lancering konden voordoen. Bovendien werd het voor gebruikers gemakkelijker om over te stappen van de oude site naar de nieuwe.

    Resultaten

    Dit is wat we hebben kunnen bereiken:

    • Een bijgewerkte website die aantrekkelijk is voor gebruikers
    • Een professionele en mobielvriendelijke website die het merk van de klant met succes communiceert
    • Een goede en duidelijke Call to Action (CTA)
    • Merkwaarden van het bedrijf waren nu duidelijk zichtbaar
    • Eenvoudig te begrijpen leveringsproces, zelfs voor nieuwe gebruikers
    • Meer verkeer en meer verkopen Belangrijke tips voor een nieuw webontwerp web

      Neem altijd de tijd om de zakelijke vereisten te begrijpen voordat u met het ontwerpproces begint, en onthoud dat gebruikerservaring een cruciaal onderdeel vormt van een webontwerpproject. Duidelijke communicatie tussen u en de klant, u en uw team staat in elke fase van het project voorop. Zorg ervoor dat u alle opties valideert voordat u codeert en test het ontwerp altijd op feedback en verbetering.

      De post Case study: Scorpioncoatings.com web redesign verscheen eerst op GoDaddy Blog .