Imaginary Clouds relancering af webstedet førte til en stigning på 5% i konverteringer på kun 3 måneder
Om dette projekt
I erkendelse af vigtigheden af en bedre UI/UX-oplevelse for at øge konverteringen, redesignede vi hjemmesiden efter vores vækstrevision og produktdesignproces.
Resultat: Redesignet førte til en stigning på 5% i konverteringer, og antallet fortsætter med at vokse.
Vores engagement
Udformning
Udvikling
teknologier
Webflow
Motiveret af vores forpligtelse til at levere en enestående onlineoplevelse gennemførte vi en vækstrevision ved hjælp af analytiske værktøjer som Google Analytics og Hotjar samt kørte brugerinterviews i realtid for at forstå, hvad brugerne virkelig ledte efter, når de gik ind på et websted til softwareudvikling.
Med Google Analytics dykker vi dybt ned i vigtige målinger som tid pr. side, afvisningsfrekvens og konverteringsfrekvenser. Disse kvantitative data gav uvurderlig indsigt i brugeradfærd, hvilket gjorde det muligt for os at finde områder til forbedring. Bevæbnet med denne viden finjusterede vi vores wireframes, optimerede engagement og skabte en problemfri brugerrejse.
Parallelt blev Hotjar vores allierede og fangede brugerinteraktioner gennem heatmaps, sessionoptagelser og brugerfeedback. Disse kvalitative data afslørede brugerpræferencer, smertepunkter og muligheder for forbedring. Det gav os mulighed for iterativt at forfine vores wireframes og sikre, at de var intuitivt designet til at imødekomme vores brugers konstant skiftende forventninger.
Brugerinterviewene hjalp os med at forme Imaginary Clouds hovedpersona, der består af brugere, der leder efter en passende serviceudbyder, der passer godt til størrelse og kultur, og hvis proces er hurtig, fleksibel og tilpasset deres behov.
Mens den første opdatering af webstedet medførte betydelige forbedringer, er det vigtigt at nævne, at digitale landskaber konstant udvikler sig. Den dynamiske karakter af brugerpræferencer, teknologiske fremskridt og markedstendenser kræver kontinuerlig overvågning og tilpasning. Ved konsekvent at analysere data og indsamle brugerfeedback sikrer vi, at vores hjemmeside forbliver responsiv, engagerende og tilpasset de moderne brugeres skiftende behov. Denne løbende forpligtelse giver os mulighed for at levere en enestående online oplevelse og være på forkant i en konkurrencedygtig digital verden.
Da vi havde en dyb forståelse af vores systemer, data og indholdsstruktur, gennemførte vi både design og implementering af Imaginary Clouds hjemmeside internt.
Vores designteam udarbejdede en stilguide, et designsystem og alle wireframes på Figma under hensyntagen til principperne om brugervenlighed, tilgængelighed og visuel appel. Efter designgodkendelse fortsatte vi med udviklingsfasen. Vores Webflow-udviklingsteam brugte alle de bedste fremgangsmåder, der blev identificeret i analysefasen, for at bringe wireframes til live. Vi fokuserede derefter på at optimere ydeevne, lydhørhed og en problemfri integration af alle funktioner og tredjepartsværktøjer.
Vores viden gjorde det muligt for os at udvikle en omhyggelig plan og udføre en smidig migration. Vi fulgte en gennemtænkt tilgang, der kombinerede vores ekspertise og strategiske tænkning for at afbøde eventuelle udfordringer. Grundig test, omfattende sikkerhedskopieringsplaner og omhyggelig implementering sikrede en problemfri migreringsproces.
NEW PROJECT IN MIND? LET'S TALKi løbet af projektet
Til denne modernisering udnyttede vi vores egen PDP (Product Design Process). I erkendelse af betydningen af en struktureret og brugercentreret tilgang startede vi dette projekt med en klar køreplan på plads.
Gennem hele processen sikrede regelmæssige feedbacksløjfer og iterationer, at vi forblev på linje og inkorporerede nødvendige rettelser undervejs.
to faser
Migration
Udvikling
fire faser
Forskning
Ideering
Henrettelse
Teknisk vurdering
fire faser
Krav
Back-end integration
Webstedsudvikling
Avanceret filtrering og søgning
fire faser
Forskning
Ideering
Henrettelse
Teknisk vurdering
fire faser
Efterslæb
Bootstrap
Bølge 0
Bølge N
fire faser
Forskning
Ideering
Henrettelse
Lancering og overdragelse
to processer
MVP
ADP
Fire faser
Omfangsmøde
Kode gennemgang
Test gennemgang
Kvalitetsvurdering
Vurdering
Fire faser
Efterslæb
Bootstrap
Bølge 0
Bølge N
i løbet af projektet
Til denne modernisering udnyttede vi vores egen PDP (Product Design Process). I erkendelse af betydningen af en struktureret og brugercentreret tilgang startede vi dette projekt med en klar køreplan på plads.
Gennem hele processen sikrede regelmæssige feedbacksløjfer og iterationer, at vi forblev på linje og inkorporerede nødvendige rettelser undervejs.
Imaginary Cloud startede med at migrere den eksisterende database fra Wordpress MySQL til PostgreSQL. En skræmmende opgave på grund af de tusinder af varer og store aktiver, der er normale på en CG-markedsplads.
Efter at migreringen var afsluttet, fokuserede teamet på at migrere sin infrastruktur. Webstedet blev hostet på Heroku, som havde relevante begrænsninger for evnen til at skalere. Imaginary Cloud var i stand til at migrere det til AWS og fuldføre den første fase på bare 2 måneder.
Efter den vellykkede levering af Stage 1 fortsatte klienten med at arbejde med Imaginary Cloud på et kontinuerligt udviklingsgrundlag og tilføjede flere funktioner til sit produkt for at fremme væksten. Holdet arbejdede på mange forskellige elementer, fra betalingsintegrationer til salgskampagneværktøjer for at lette markedsføringskampagner på markedspladsen. Imaginary Cloud hjalp også Flipped Normals med at forbedre sin Google-positionering ved at implementere en SEO-revision, som finjusterede webstedets ydeevne og indholdsrelevans.
Projektet startede med et teammøde for at liste alle kundens krav. Denne grundige undersøgelse giver mulighed for en lettere, hurtigere og mere omkostningseffektiv levering. Dette møde blev ledet af vores projektleder, som støtter teamet gennem hele projektet, og vores udvikler, hvilket sikrer, at alle tekniske detaljer diskuteres.
Eurofound fremlagde en solid briefing, der redegjorde for den eksisterende infrastruktur, deres vision for webstedet og de tekniske begrænsninger og krav. Det var en udfordrende opgave, der skulle udføres på 6 uger.
Vores udvikler startede udviklingsprocessen ved at oprette back-end-integrationen, der ville gøre det muligt for det nye websted at hente indhold fra den eksisterende database. Ved hjælp af en Django-ramme var vi i stand til at oprette en effektiv og hurtig applikation, der hentede data, genererede lister over resultater og muliggjorde mere avancerede muligheder.
Imaginary Cloud og Eurofound mødtes ugentligt for at sikre, at alt blev udviklet efter kundens krav.
Da hovedsoftwaren var afsluttet, var næste fase at udvikle webstedet for at få adgang til et sådant værktøj. Til dette fulgte vores udvikler Eurofounds stilguide for at sikre sammenhæng på tværs af kundens digitale tilstedeværelse.
Selvom der ikke blev tildelt nogen designer til dette projekt, fulgte vores udvikler UX/UI best practices, da han var i stand til at kontakte flere af designerne hos Imaginary Cloud.
For at forbedre indholdsnavigationen ønskede Eurofound at inkludere en avanceret filtrerings- og søgefunktion i deres database. Efter fuldt ud at have kortlagt databaseindholdet i den nye software, var vores udvikler i stand til at oprette et sæt kategorifiltre, der gjorde det muligt for brugerne at vælge indholdet af et givet emne og implementerede et søgeelement til siden, så brugeren frit kunne søge i ethvert dokument.
Vi identificerer de vigtigste aspekter af forretningsmodellen og brugernes behov.
For det første indsamler vi beviser, der understøtter de beslutninger, der træffes fremover, og sikrer, at der ikke træffes nogen beslutning baseret på vage antagelser.
Denne fase består af 3 trin: en briefing med projektets vision og mål og forretningskrav; brugerforskning for at garantere produktets anvendelighed og effektivitet fra brugerens perspektiv; og et designbenchmark til at analysere landskabet for lignende og komplementære produkter, designmønstre og teknologier, der bruges i branchen.
Forskningsfasen giver os mulighed for at udnytte eksisterende aktørers viden og færdigheder og sikre funktioner og designdifferentiering på markedet, og sikre kundernes pasform.
Vi formulerer en tilgang til produktet baseret på brugerens behov og forretningsmodellen.
Dette er kernen i den kreative proces, og det er her produktkonceptet formuleres ud fra brugerens behov og forretningsmodellen (begge identificeret i forskningsfasen). Her arbejder UX-designeren, produktdesigneren og produktejeren tæt sammen.
Denne fase består af 4 trin: kortlægning af brugerrejse, ved at beskrive hver brugers handling med forskellige brugerscenarier; a beslutningsmatrix der hjælper med at prioritere brugernes og produktets mål, samtidig med at man overvejer produktets livscykluss aktuelle fase; tegne wireframes, dvs. sidernes struktur og navigationsflow for at sikre brugervenlighed af grænsefladen og reducere designtiden; og endelig, a humørbræt for at sikre, at produktets udseende formidler den ønskede brugeroplevelse og er tilpasset brugerprofilen og markedsstrategien.
Vi bringer konceptet ud i livet og omsætter det i praksis.
I dette trin fokuserer produktdesigneren på at skabe en fysisk repræsentation af det koncept, der er defineret indtil dette punkt.
Den består af 3 trin: a stilguide, hvor vi definerer en grafisk grænseflades stil under hensyntagen til farvepalet, skrifttyper, billedstil, inputfelter, knapper og så videre, for at sikre konsistens i hele applikationen; a grafisk brugergrænseflade design (GUI), som er de endelige skærme ved at anvende stilguiden på wireframes; og et klik igennem prototype at lette feedback fra interessenter eller potentielle brugere og investorer.
Vi garanterer, at alle genererede krav og ideer er realistiske at implementere.
I denne fase skal alt det tidligere udførte arbejde være opnåeligt i betragtning af den tilgængelige tid og budget, der tidligere er afgjort.
Den består af 2 trin: a arkitektur på højt niveau hvor vi beskriver, hvordan produktet vil blive bygget, og fastlægger basislinjerne for de teknologier og færdigheder, der er nødvendige for at fremstille det, og projektplan at definere de vigtigste milepæle og give en generel forståelse af projektets struktur, faser, skæringspunkter og indbyrdes afhængigheder.
Denne indledende fase involverer indsamling af afgørende information for at forstå projektets vision, mål og forretningskrav. Vi præsenterer forretningscasen, der skitserer projektets tidslinje, hovedkonkurrenter, komplementære produkter og udforskning på højt niveau af personas. Dette indebærer også at stille og besvare spørgsmål for at definere mål og udforske ideer, hvilket sikrer differentiering fra eksisterende aktører på markedet.
I idéfasen leverer vi planen og strukturen for hele hjemmesiden, som definerer den relative betydning af indhold, når det flyder ned ad siden.
Webstedskortet fastlægger webstedets struktur og indholdshierarki for optimal navigation. Wireframing skitserer skærmstruktur og navigationsflow og prioriterer dit digitale produkts funktionalitet frem for æstetik. Til sidst hjælper vi dig med at planlægge sidens indhold til indholdsidéen og giver retningslinjer for publikumstilpasset materiale.
Under udførelsen leverer vi den første vigtige side, typisk hjemmesiden, og sikrer, at den stemmer overens med din målgruppe og markedsstrategi. Vi anvender derefter stil på wireframes gennem GUI-design, med fokus på visuel æstetik og opretholdelse af konsistens på tværs af hjemmesiden. Vores webflow-udviklingsproces følger bedste praksis og inkorporerer interaktioner, animationer og lydhørhed på tværs af enheder.
Endelig præsenterer vi resultater på et testdomæne, hvor klientinddragelse er afgørende for et vellykket resultat.
Vi giver dine teams omfattende træningssessioner og Q&A-muligheder for at give dem mulighed for autonomt at administrere indholdet. Vi tilbyder løbende support, sikrer, at alle nødvendige oplysninger til webstedsopdateringer er let tilgængelige, og vi konfigurerer tilladelser inden for Webflow efter behov.
Derudover integrerer vi problemfrit hjemmesiden med vigtige marketingværktøjer som Google Analytics, konfigurerer SEO-optimeringer og migrerer og forbinder problemfrit det ønskede domæne. Ved at udnytte Webflows pålidelige hostingtjenester sikrer vi, at hjemmesiden offentliggøres med optimal ydeevne og pålidelighed.
Vores UX-designere vil målrette brugerprofilerne og identificere deres behov, når de bruger dit produkt, i betragtning af dets anvendelighed og effektivitet fra deres synspunkt. Forskning i designmønstre og branchens mest anvendte teknologier gør det muligt at udnytte og forstå eksisterende aktørers viden og praksis. Derudover sikrer det, at dit produkt/design er specifikt og anderledes.
Vi foretager en UX-gennemgang for at fastsætte produktkravene under hensyntagen til den etablerede anvendelighedsheuristik i marken for at levere en ensartet og flydende brugeroplevelse. Alle oplysninger om indsigt og analyser vil blive opsummeret i en visuel og overbevisende revisionsrapport, der viser UX Audits vigtigste resultater, hurtige gevinster og anbefalinger vedrørende dit produkts potentielle forbedringer.
Sammen baserer vi stilguiden for at sikre, at dit produkts forskellige visuelle grænsefladeelementer er konsistente og sammenhængende. At køre en UX-revision giver os mulighed for at løse de vigtigste problemer med udførelsen af slutudseende skærme. Plus, alle anbefalinger, der er resultatet af anerkendelse af hurtige gevinster, vil blive designet til implementering.
Briefing: Vores løsningsarkitekter begynder med at engagere sig med interessenter for dybt at forstå de forretningsmæssige udfordringer eller mål. Dette indebærer detaljerede diskussioner for at identificere det specifikke problem, der skal løses, og de ønskede resultater, hvilket sikrer, at løsningen er perfekt tilpasset dine strategiske mål.
Vurdering af tekniske løsninger: Efter at have forstået forretningskravene oversætter vores arkitekter disse til tekniske specifikationer. Dette trin involverer at identificere og kortliste de mest egnede teknologier, platforme og værktøjer, der kan opnå de ønskede funktionaliteter effektivt og effektivt.
Løsningsarkitekturdesign: Vi designer løsningens overordnede tekniske arkitektur under hensyntagen til nøglefaktorer som skalerbarhed, sikkerhed, ydeevne og integration med eksisterende systemer. Denne plan danner grundlaget for alt efterfølgende udviklingsarbejde og sikrer, at løsningen er både robust og tilpasningsdygtig til fremtidige behov.
Valg af teknologier og værktøjer: Baseret på arkitekturdesignet anbefaler og evaluerer vi de teknologier og værktøjer, der bedst passer til løsningens behov og din organisations eksisterende infrastruktur. Dette sikrer, at teknologistakken er optimal, omkostningseffektiv og fremtidssikret.
Projektplan: Vi udvikler en omfattende projektplan, der skitserer de vigtigste milepæle, faser, og indbyrdes afhængigheder. Denne plan giver en klar forståelse af projektstrukturen og hjælper med at styre forventninger og tidslinjer effektivt.
Projektets efterslæb: Vi identificerer og prioriterer brugerhistorier og opdeler dem i håndterbare underopgaver til både front-end- og back-end-udvikling. Dette trin sikrer, at udviklingsprocessen er organiseret, med klare prioriteter og fokus på at levere værdi på hvert trin.
Implementering af løsningsarkitektur: Vores løsningsarkitekter arbejder tæt sammen med udviklingsteams for at sikre, at løsningen implementeres i henhold til den designede arkitektur. Dette indebærer løbende samarbejde med udviklere, systemadministratorer og andre it-fagfolk for at sikre, at arkitekturen realiseres effektivt.
Kontinuerlig forbedring: Vi tror på løbende forbedringer. Når løsningen er implementeret, vurderer vi regelmæssigt arkitekturen for at identificere eventuelle forbedringsområder. Dette giver os mulighed for at foretage de nødvendige justeringer og sikre, at løsningen forbliver effektiv og tilpasset de skiftende forretningsbehov.
Den produktbacklog er en liste over forretnings- og projektmål og indeholder, hvad der forventes at blive udviklet af udviklingsteamet og vedligeholdt af produktejeren. Det er et levende dokument, der løbende opdateres, prioriteres og sorteres efter forretningsværdi. Det kan også have produktforbedringer, fejl, tekniske spørgsmål og så videre. Dens formål er primært at have alt, hvad der er nødvendigt for at nå projektets produktvision.
I denne fase opretter vi også en Sprint-efterslæb, som er en liste over opgaver, der skal udføres under hver sprint. Vi prioriterer brugerhistorierne for hver sprint og sikrer, at teamet ved, hvad de skal arbejde på.
Med Sprint-efterslæb På stedet starter udviklingsprocessen endelig. At arbejde gennem sprint-backloggen og levere små brugbare stykker software giver ofte mulighed for kontinuerlig feedback og forfining, hvilket sikrer, at produktet altid er på rette spor.
I denne fase indfører vi en orienteringsmøde der inkluderer de oplysninger, der er indsamlet under workshoppen med teamet og interessenter. Den præsenterer visionen og målene for projektet og præciserer alle nødvendige forretningskrav. Det er også her en FAQ-session i forhold til projektets art finder sted.
Den arkitektur på højt niveau involverer udvikling af det tekniske design, med den ideelle balance mellem kompleksitet og rækkevidde. Det er her, vi identificerer eksterne afhængigheder fra tredjepartsudbydere, såsom Stripe, Facebook, Amazon og så videre.
Vi starter derefter CI/CD-arbejdsgang som er opsætningen af problemstyringsværktøjet, kodelagre, kontinuerligt integrationssystem og udviklings- og iscenesættelsesmiljøer. Det efterfølges af opsætningen af koderepo og automatiseret testramme, iscenesættelsesmiljøet og produktionsservere samt det kontinuerlige integrationsøkosystem (dvs. servere, udrulningshook) /kontinuerlig implementering.
Endelig i Funktion 0 vi leverer den første meningsfulde funktion: en hjemmeside, en login-skærm, en del af det første dashboard. Dette trin sikrer, at der er noget påviseligt med opfattelsen af værdi i slutningen af fasen.
Med Datamodel, giver vi den første baseline for produktets evolutive datamodel. Den identificerer de vigtigste dataenheder og relationer og basislinjer datakilderne og datalagrene (dvs. relationsdatabaser, dokumentdatalagre osv.). Dette trin består også i at iterere produktkonceptet og designe den første version af datamodellen.
Her er når vi præsenterer Bevis for koncept (PoC), Minimalt testbart produkt (MTP), eller Minimalt levedygtigt produkt (MVP), og vi leverer og implementerer den første version af produktet - selvom den version er implementeringen af et koncept. Dette hjælper med at mindske tekniske risici og teste de vigtigste forretningslokaler til udvikling af en markedsklar version af produktet gennem en levedygtighedsvurdering.
På produktionsforøgelser trin, vi gennemgår tekniske og forretningsmæssige risici og virkningen af PoC, MTP eller MVP på de oprindelige lokaler eller Wave 0. Her identificerer vi også genanvendelige komponenter fra Wave 0 til Wave 1 (dvs. ofte er POC'er ikke genanvendelige). Dette hjælper med at indsamle feedback om den første integrerede model og vurderer produktets levedygtighed, før du går over til Wave 1.
Endelig, wave retrospektive anmeldelser produktstatus, evaluerer bølgesucces i forhold til forretningsmål og identificerer forbedringer. Vi designer derefter mål for den næste bølge og prioriterer funktioner. Ved at gøre dette kan teamet analysere det arbejde, der er blevet udført i tidligere sprints, og planlægge bevidst, hvad der skal være det næste bjerg at bestige.
Vi starter med en Områdegennemgangsmøde hvor vi identificerer de vigtigste projektmål, de domæner, der skal gennemgås, og hvilke målinger vi vil vurdere, og indsamler oplysninger om vedligeholdelsesevne, cyklomatik, arv, klasse og andre.
Vi fortsætter med at udføre Kode gennemgang ved at se på arkitektur for at forstå, hvordan produktet er bygget, dets principper og dets mønstre.
Nu er det tid til en Testgennemgang, hvor vi vurderer enhedstest, kodedækning og testkvalitet.
Vi følger op med en Gennemgang af kodekvalitet, hvor vi opregner alle problemerne og beskriver dem fuldt ud, identificerer de kritiske og kategoriserer dem.
Vi afslutter processen med en Vurdering fase, hvor vi viser alle anbefalede rettelser og giver et skøn over de ressourcer, der er nødvendige for at implementere dem.
ANVENDTE TEKNOLOGIER
Vores hjemmeside var allerede bygget på Webflow; ved at forblive inden for det samme økosystem maksimerede vi effektiviteten, da vores fortrolighed med platformen gjorde det muligt for os at udnytte dens funktioner, intuitive grænseflade og omfattende tilpasningsmuligheder.
Vi oprettede stilguiden, designsystemet og de nye wireframes på en samarbejdende Figma-fil.
Vi implementerede Arbejdsmodel for administreret projekt som involverede udvikling af projektet helt internt.
Holdet havde en projektleder, der overvågede planlægning, koordinering og udførelse, styring af tidslinjer, ressourcer og mål; 4 designere, der samarbejdede om oprettelsen af design og implementering af de nye sider gennem Webflow; og 2 udviklere, der arbejdede sammen med 2 vækstspecialister for at optimere ydeevne, kode og hjælpe med at mindske potentielle risici i migrationsfasen
Dette projekt leverede en dybdegående forståelse af kundens persona og deres interaktion med tjenesten.
Øgede konverteringer med 5% 3 måneder efter lanceringen og tæller stadig
Tid brugt på siden steg med 3%
Sideforgivelsraten faldt 4,26%
Den gennemsnitlige tid pr. side på alle vores servicesider er 69% længere
Oprettet et fængslende websted, der effektivt kommunikerer Imaginary Clouds tjenester
The project behind the NDA
I erkendelse af vigtigheden af en bedre UI/UX-oplevelse for at øge konverteringen, redesignede vi hjemmesiden efter vores vækstrevision og produktdesignproces.
Resultat: Redesignet førte til en stigning på 5% i konverteringer, og antallet fortsætter med at vokse.
.webp)
