Suunnittelemassa ja toteuttamassa yrityksemme markkinointisivustoa: Matkani sisällöstä toteutukseen
Päivitimme äskettäin yrityksemme verkkosivuston. Tässä blogikirjoituksessa kerrotaan työkaluista ja menetelmistä, joita käytimme parantaaksemme verkkosivustoamme.
Jos olet Logton käyttäjä, saatat huomata, että yrityksemme verkkosivusto on äskettäin päivitetty. Jos et ole, käy verkkosivustolla, logto.io, ja arvaa, kuinka paljon resursseja laitoimme tämän toteuttamiseen.
Saatat ajatella, aijotteko te tyypit mainostaa, että pelkästään erinomaisten toteutustaitojenne näyttäminen vaatii valtavasti työtä, vaivaa ja huolellista suunnittelua?
Ei!
Päinvastoin, haluamme osoittaa kuinka fiksusti hyödynnämme työkaluja ja menetelmiä parantaaksemme tuotteidemme laatua ja toimittaaksemme parhaat tuotteet ja palvelut käyttäjillemme.
Olemme saaneet yhteisöltämme myönteistä palautetta ja ihmettelemme, miten sen teimme. Tämä päivityskierros on erilainen, koska keksimme täysin uudenlaisen työnkulun nopeasti liikkuvassa ympäristössä. Haluaisimme esitellä parhaita käytäntöjämme ja tarkastella lähempää tiimityötä ja yhteistyökulttuuriamme.
Tausta
Olemme teknologiahenkilöstö, joka keskittyy tarjoamaan laajan valikoiman asiakasidentiteettiin liittyviä kehityspalveluita ja infrastruktuurityötä. Paine toimittaa on merkittävä. Samalla meidän on tuettava erilaisia tarinankerronta- ja operatiivisia tehtäviä, kuten luotava brändättyjä markkinointisivustoja, kirjoitettava blogeja, mainostettava hankkeitamme ja pidettävä yhteyttä käyttäjiimme.
Houkutteleva aloitussivusto on ratkaiseva, koska se muodostaa usein ensimmäisen vaikutelman, jonka yleisö saa tuotteestasi, auttaen heitä ymmärtämään tuotteesi ratkaisemien ongelmat, mukaan lukien hinnoittelun ja merkittävät asiakkaat sosiaalisena todisteena.
Lisäksi se voi täyttää useita liiketoiminnan tavoitteita:
- Esitellä tuotteesi brändi ja arvotarjous.
- Generoida liidejä.
- Toimia sisältökeskuksena, mikä on erityisen tärkeää yritykselle, joka keskittyy tuotevetoiseen tai kehittäjävetoiseen kasvuun.
- Tarjota paikka optimoida SEO, hankkia käyttäjiä ja seurata säännöllistä liikennettä.
Edellisessä työssäni olin mukana verkkosivuprojektissa. Katsotaanpa, mitä tyypillinen työnkulku sisältää:
- Ensin tuotemarkkinointipäälliköt ja tuotepäälliköt määrittelevät sisällön ja vaatimukset.
- Tuotesuunnittelijat ja UX-kirjoittaja hiovat sisältöä.
- Siirrämme työn alla olevan sisällön, yleensä matalan tarkkuuden version, visuaalisten ja brändäyssuunnittelijoiden viimeisteltäväksi ennen tuotantoa.
- Insinöörit ja tuotepäälliköt aloittavat sitten toteutuksen, keskittyen animaatioihin ja responsiiviseen verkkosuunnitteluun.
Tämä prosessi on työläs ja sisältää monia ihmisiä ja sidosryhmiä, minkä vuoksi se ei sovi nopeasti muuttuvaan ympäristöön.
Vaikka meillä alussa olisi vain kaksi henkilöä ylläpitämässä tätä – tuotesuunnittelija ja insinööri – verkkosuorituskyvyn hallinta, kuvien lataaminen, responsiivisuuden varmistaminen, kuvamuotojen käsittely ja sisällön päivittäminen vaativat silti paljon edestakaista viestintää.
Tämä työnkulku on tehoton. Ajattelen jatkuvasti, kuinka vapauttaa insinööriresursseja keskittymään ydinproduktiin, kun hallinnoin loput.
Työkalujen käyttäminen tuottavuuden parantamiseksi on avainfilosofiaa tiimissämme. Siksi olen alkanut tutkia työkaluja, jotka voivat auttaa virtaviivaistamaan näitä prosesseja.
Tarpeiden erittely
Jotta voisimme kehittää menestyksekkään SaaS-markkinointisivuston, eritellään tärkeät elementit:
- Sisältö: Minkä tahansa markkinointisivuston perusta on tietää tarkalleen, mitä esittää. Tämä vaatii syvällistä ymmärrystä kohdeasiakkaistasi, heidän tyypillisistä käyttötapauksista ja tuotteesi arvotärkeydestä. Mikään työkalu ei voi korvata tätä ymmärrystä. Onneksi osallistumiseni tuotteensuunnitteluun ja markkinointiin tarkoittaa, että olen hyvin varustautunut luomaan sisältöä, joka vastaa käyttäjien tarpeita.
- Suunnittelu: Sivustolla tulisi olla kiillotettu ja tyylikäs visuaalinen vetovoima. Vaikka taustani on UX/tuotesuunnittelussa, eikä niin laaja kuin omistautuneen luovan suunnittelijan, kykyni riittää tämän osa-alueen kompetenttiin hallintaan.
- Tekninen toteutus: Tärkeitä teknisiä huomioita ovat sivuston isännöinti, responsiivisuuden varmistaminen ja sujuvien mikro-interaktioiden mahdollistaminen. On myös välttämätöntä integroida sivusto saumattomasti muihin komponentteihin, kuten linkkien uudelleenohjauksiin ja tuotteen kirjautumissivustoon.
Tutkittuani hieman, tässä on työkalupakki, jota suunnittelen käyttäväni suunnittelupuolella:
Tuote- ja markkinointisisältö
ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper tai vastaavat AI-sovellukset kopilotille.
Tämä on tarkoitettu markkinointisisällön ja viestien hienosäätöön ja optimointiin. On tärkeää olla selvä niiden tavoitteesta ja tarkoituksesta. AI on vain kopilootti, ei päätöksentekijä. Ennen kuin kirjoitan mitään markkinointiviestiä, kysyn itseltäni muutaman kysymyksen:
- Kuka lukee viestin?
- Tarvitsevatko he lisäkontekstia?
- Mikä on keskeinen kohta, johon haluat viestillä puuttua?
- Mitä odotat käyttäjän tekevän seuraavana?
- Onko tämä viesti tarkoitettu kouluttamaan vai ajamaan tiettyyn toimintaan?
- Onko tällä potentiaalia olla harhaanjohtava tai liioitteleva?
Sitten kirjoitan alkuperäisen luonnoksen asioista, jotka haluan viestiä.
Joskus AI voi tuoda esiin sanoja, jotka vaikuttavat vanhentuneilta tai kääntävät alkuperäiset aikeesi saaden ne vaikuttamaan loogisesti oikeilta. Sinun on kuitenkin korostettava tarkoitustasi uudelleen ja pidettävä kiinni tavoitteistasi. Sinun on luotava standardit varmistaaksesi, että yleisölle lähetetyt sanat ovat selkeitä, suoria, ytimekkäitä ja läpinäkyviä. Tämä on erityisen tärkeää tuotealueellamme, joka palvelee monia yrityksiä ja kehittäjiä.
Suunnittelu
Figma, Framer vuorovaikutus- ja visuaaliseen suunnitteluun sekä animointiin ja prototypointiin
Minulla on suunnittelutausta, joka keskittyy pääasiassa tuotesuunnitteluun, mikä sisältää käyttöliittymän ja käyttökokemuksen suunnittelun. Vaikka kiillotetun käyttöliittymän suunnittelu ei olekaan minulle haaste, työni ei ole yhtä tyylikästä kuin ammattilaisen. Kuitenkin, joidenkin perusvisuaalisten suunnittelu- ja kuvitustaitojen avulla sekä valitsemalla oikeat työkalut, voit parantaa työsi laatua. Käytän Frameria ja Figmaa tässä luovassa prosessissa.
Tämä on vanha suunnittelumme, joka on täysin rakennettu Figman avulla
Alkuperäinen suunnittelumme luotiin Figmassa. Käytin virallista Framerin liitännäistä, "Framer to HTML", kopioidakseni ja liittääkseni perustavan suunnittelun Frameriin, mikä tarjosi hyvän lähtökohdan.
Seuraava vaihe on niin sanotusti suunnitella. Jos olet aiemmin käyttänyt Figmaa, siirtyminen Frameriin sujuu helposti, sillä yleistuntuma ja -kokemus ovat varsin samanlaisia. Aion korostaa muutamia mielenkiintoisia vuorovaikutuksia, jotka parantavat merkittävästi tuottavuutta.
Layout
Figman käyttäjät arvostavat automaattista layoutia, koska se säästää paljon aikaa elementtien asettelussa. Kuitenkin Framerin layout-toiminnot ovat vielä älykkäämpiä, ja ne ovat lähempänä etupään ajatusmallia. Framerissä voit valita, käytätkö ruudukkoa vai pino-layoutia, määritellä sarakkeet, asettaa maksimileveyden, ja se kääriytyy automaattisesti toiselle riville tarvittaessa. Tämä ominaisuus tehostaa suunnitteluprosessia heijastaen, kuinka elementit käyttäytyvät live-verkkoympäristössä。
Breakpoints responsiiviseen suunnitteluun
Pystyt asettamalla breakpointeja ja leveysasetuksia (kuten täytä, kiinteä, suhteellinen ja sopii sisällölle) ja määrittämällä erilaisia kankaita helposti ja tarkasti saavuttamaan monenlaisia responsiivisia suunnitteluratkaisuja. Tämä lähestymistapa tarjoaa tehokkaan tavan mukauttaa asettelu eri näyttökokoihin ja -laitteisiin.
Animaatio
Framer tarjoaa erilaisia valmiita animaatioita, mukaan lukien ticker
-animaation, jota käytämme laajasti verkkosivustollamme työmme esittelyyn. Voit asettaa komponentin ja upottaa sen tämän elementin sisään. Tämä antaa sinun määritellä erilaisia kokoonpanoja, kuten nopeus, suunta, pehmuste ja paljon muuta, tarjoten joustavuutta ja hallittavuutta animaation käyttäytymisessä sivustollasi.
Toinen hyödyllinen ominaisuus Framerissa on mahdollisuus mukauttaa vieritysanimaatioita. Esimerkiksi voit määrätä, kuinka kohteet näkyvät niiden tullessa näkyviin selaamisen aikana. Asettamalla vieritysanimaatiosi voit hallita elementtien esitystapaa ja ajoituksia, parantaen käyttökokemusta ja sisällön kanssa sitoutumista.
Nopeasti Julkaise
Yksi keskeisistä vaatimuksistani on kyky:
- Suunnittele nopeasti useita laskeutumissivuja SEO-optimointia ja markkinointikampanjoita varten. Nopeus on välttämättömyys.
- Päivitä sisältö usein omatoimisesti. Tuotteesi laskeutumissivu heijastaa viimeisimpiä kehityssuuntia ja nykyistä tuotepositiointiasi. Vanhentunut sisältö tarkoittaa markkinamahdollisuuksien menettämistä ja ei vastaa asiakkaidesi nykyisiin tarpeisiin.
Edellisessä työnkulussani, joka kerta kun minun piti päivittää sisältöä, minun piti joko pyytää insinööriä tekemään se tai tehdä se itse luomalla vetopyyntö. Insinööritiimimme seuraa tiukkaa prosessia varmistaakseen koodin laadun, mikä voi olla aikaa vievää ja rajoittaa kykyäni tehdä nopeita muutoksia.
Framer on ratkaissut tämän ongelman minulle. Nyt, kun teen muutoksen ja klikkaan julkaisua, se heijastuu välittömästi tuotannossa. Tämä kyky on merkittävästi helpottanut prosessia, mahdollistaen nopeat päivitykset ja suuremman autonomian sisällön hallinnassa.
Tekniikka
Koska se on Framerin isännöimä, meillä ei ole tarvetta toteuttaa tai suorittaa teknistä työtä. Insinöörimme tarvitsivat vain noin 10 minuuttia integroidakseen sen muiden verkkosivujemme kanssa.
Nykyinen verkkosivustomme koostuu 20-30 sivusta; jotkut on kehitetty Framerilla, kun taas toiset on luotu perinteisillä ohjelmistokehitysmenetelmillä. Olemme parhaillaan valitsemassa parhaita työkaluja sivujemme ylläpitoon. Esimerkiksi kehittäjädokumentaatiossa, jota on haastavaa hallita Framerilla, kehittäjäystävällisen dokumentaatiokehyksen käyttäminen isännöimään omaa sisältöä on optimaalinen valinta. Etenemme arvioimalla tarpeitamme ja päätämme, jatkammeko omaa isännöintiämme vai siirrymmekö kokonaan Framerin käyttöön.
Miten se muutti työnkulkuamme
Muutimme täysin työnkulkuamme, mikä teki markkinointisivustojen tuotannosta täysin vaivatonta. Se on luotettava, ylläpidettävä ja erittäin tehokas.
Kirjoitin tämän blogin jakaakseni parhaat käytännöt. Jos sinulla on kokemuksia Framerista ja kauniiden verkkosivujen suunnittelusta, haluaisin kuulla niistä. Puhutaan ja opitaan toisiltamme.
Nyt on aika tutustua tuotteeseemme! Vieraile osoitteessa logto.io.