VEKTORS
PROJEKTA APSKATS
008 // PROPERTYVECTOR

Zīmols un vietne Nekustamā īpašuma aģentūras programmatūras platforma

Next.js 16Reakcija 19TypeScriptTailwind CSS 4Statiskais eksportsCloudflare darbiniekiSVG ilustrācijaZīmola identitāte
propertyvector.co.uk
ĪSS

PropertyVector ir Apvienotās Karalistes programmatūras platforma, kas tiek izstrādāta nekustamo īpašumu un izīrēšanas aģentiem: ar AI darbināms CRM, portālu plūsmas, aģentūru vietnes un īpaši pielāgotas lietotnes vienuviet. Tam bija vajadzīgs zīmols un vietne, kas jau pirms produkta laišanas tirgū iegūtu aģentūru interesi.

RISINĀJUMS

Es izstrādāju identitāti, sākot no tīkla mājas logotipa līdz piecu krāsu tērauda paletei, un izveidoju desmit lappušu Šveices tīkla vietni ar produktu maketiem, kas ierakstīti kodā, pilnu iespēju karti un vienu, atkārtotu aicinājumu uz darbību.

REZULTĀTS

Aģenti dažu minūšu laikā var redzēt, ko platforma dara visā klienta ceļojumā, iedziļināties jebkurā modulī un reģistrēt interesi ar vienu klikšķi. Vietne ir pilnībā statiska, un tās vadīšana gandrīz neko nemaksā.

TIEŠRAIDĒŠANAS UI // PĀRBAUDES ĒNOJUMS: AKTĪVS
propertyvector.co.uk
PROPERTYVECTOR vietnes sākuma ekrāns
┌─[KOPSAVILKUMS]───────────────────────

PropertyVector mārketinga vietne ir a Next.js 16 statisko eksportu apkalpo a Cloudflare darbinieks, ar zīmola sistēmu un produktu ilustrācijām, kas izstrādātas no jauna.

Dizaina problēma bija uzticēšanās: nekustamo īpašumu aģentiem likt neizlaistai programmatūrai justies īstai bez pārprasīšanas. Atbilde bija mierīgs Šveices režģis, maketi, kas veidoti kā komponenti, un katra no 32 iespējām, kas apzīmētas kā pamata, papildinājums vai vēlāk.

└──────────────────────────────────────────┘
LOMAZīmola dizainers un izstrādātājs
VEIDSB2B SaaS zīmols + mārketinga vietne
IETVARSNext.js 16 / React 19 / TypeScript
STILSTailwind CSS 4 motīvu marķieri
HOSTINGSCloudflare Workers statiskie līdzekļi
STATUSSTiešraide · produkts izstrādes stadijā
//Galvenie fakti un metrika
10
Statiskās lapas
Prece, funkcijas + legāls
32
Iespējas kartētas
20 kodoli · 4 papildinājumi · 8 vēlāk
13
Produktu maketi
Iebūvēts kods, nevis attēli
0
Serveri vai datu bāzes
Statiski līdzekļi vienam darbiniekam
//Ierobežojumi
01
IEROBEŽOJUMS 01

Pārdodiet produktu, kas joprojām tiek ražots

PropertyVector ir izstrādes stadijā. Vietnei bija jāpanāk, lai CRM, AI palīgi, portālu plūsmas un aģentūru tīmekļa vietnes justos konkrētas nekustamo īpašumu aģentiem, bez gatavās programmatūras ekrānuzņēmumiem un bez pārprasīšanas.

02
IEROBEŽOJUMS 02

Izskaidrojiet plašu produktu bez pārliecības

Trīsdesmit divas iespējas pārdošanas, izīrēšanas, īpašuma pārvaldības, finanšu, klientu lietotņu un AI jomās. Aģentiem vajadzēja lasīt divas minūtes; pircējiem, kas salīdzināja piegādātājus, bija nepieciešams pilns saraksts.

03
IEROBEŽOJUMS 03

Izskatieties kā nopietns B2B piegādātājs

Nekustamā īpašuma aģentūras pērk programmatūru uz uzticības pamata. Zīmols bija jālasa kā mierīgs, precīzs un izveidots, nevis kā starta veidne.

04
IEROBEŽOJUMS 04

Ātri, indeksējami un nav jāuztur

Vietne pastāv, lai to atrastu aģenti, kuri meklē CRM un portāla plūsmas programmatūru, un lai savāktu interesi. Nav aizmugursistēmas, nav datu bāzes un nav veidlapu pakalpojuma, lai turpinātu darboties.

//Zīmols
ZĪME

Māja, kas veidota kā tīkls: īpašums centrā, savienots ar vietni, cilvēki un procesi ap to.

PALETE
Zils-melns#101820
Tērauda flote#2d3e50
Forši pelēks#7c8ea3
Bāls tērauds#d8e1ea
Mākonis#f7fafc

Viena forša tērauda saime un bez akcenta krāsas. Aģentūras pērk uz uzticības pamata; ierobežojums skan kā noteikts.

VEIDS
Viens
Darbvieta
INTER TIGHT 600 — DISPLAY

Kontakti, īpašumi, jautājumi un piedāvājumi vienā savienotā darbvietā.

INTER 400 — TEKSTS
//Sistēmas arhitektūra
[AUDITORIJAS]
Nekustamā īpašuma aģentiPārdošana + izīrēšana
Aģentūras vadītājiRedzamība + ziņošana
MeklētājprogrammasVietnes karte + strukturēti dati
↓
[BŪVĒT]
Next.js 16Lietotņu maršrutētājs, izvade: eksports
Ierakstītais satursIespējas kā dati
Segmenta labojumsPēcveidošanas saplacināts skripts
↓
[CLOUDFLARE]
Statisko līdzekļu darbinieksPasniedz ./out
Pielāgoti domēniApex + www, auto TLS
_headersDrošība + kešatmiņas noteikumi
↓
[KONVERSIJA]
Reģistrēties IntereseIepriekš aizpildīts e-pasts
Trīs iesūtnesPārdošana · vispārējs · atbalsts
Nav saglabātu datuUz vietas nekas nav savākts
//Pilna mājaslapa
RITINĀT ↓, LAI IZPĒTĪTU
SKATĪT:
Pilna PropertyVector mājas lapa desktop: varonis, četru daļu platforma, piecas produktu demonstrēšanas kartītes, 32 iespējas, klienta ceļojums no pirmā apmeklējuma līdz pabeigšanai, kāpēc nekustamā īpašuma aģenti izvēlētos PropertyVector, kontaktpersona un kājene
//Ekrāni
PropertyVector Workspace lapa: virsraksts “Viena darbvieta visam klienta ceļam” blakus CRM maketam, kurā redzama pārdevēja Sāra Patela, kas atzīmēta kā Hot lead, ar rekvizītiem, sarunām, nākamo darbību un darbības laika skalu.
DARBA VIETA — PIEVIENOTS CRM
PropertyVector AI lapa: “AI, kas palīdz aģentiem veikt darbības” blakus ikdienas darbību sarakstam ar vienumiem, kas atzīmēti kā Kavēts, Šodien, Ieteikts un Apturēts
AI — ŠODIENAS DARBĪBAS
PropertyVector sarakstu lapa: '22 Park Road' pārdošanai par 255 000 € tiešraidē vietnēs Rightmove un Zoopla, rindā OnTheMarket, ar 75% veselības pārbaudi.
SARAKSTI — PORTĀLA PLŪDES
PropertyVector vietņu lapa: aģentūras tīmekļa vietnes makets ar īpašuma meklēšanu un novērtējuma rezervāciju, kā arī tālrunis ar ierakstu ar funkciju Rezervēt apskati un Saglabāt meklēšanu
Tīmekļa vietnes — AĢENTŪRU VIETNES
//Klienta ceļojums
  1. 01

    Pirmā vizīte

    Pārdevējs nonāk aģentūras vietnē. Meklēšana, saglabātie meklējumi un pogas Rezervēt vērtējumu plūsma tieši CRM.

  2. 02

    Vērtēšana

    Tikšanās, turpmākie pasākumi un nākamā darbība tiek rādīta kontaktpersonu ierakstā ar aktivitāšu laika grafiku, ko var redzēt visa komanda.

  3. 03

    Instrukcija

    Īpašuma informācija tiek ievadīta vienreiz, iekļaujot fotoattēlu veselības pārbaudi, stāva plānu, EPC un aprakstu.

  4. 04

    Mārketings

    Viens ieraksts tiek publicēts pakalpojumos Rightmove, Zoopla un OnTheMarket, katram portālam tiešraidē un rindā.

  5. 05

    Piedāvājumi līdz pabeigšanai

    Pretendentu saskaņošana, skatīšanās un piedāvājumi, pēc tam izpārdošanas norise, AI atzīmējot to, kas ir apstājies.

//Dizains un inženierija
01 /Zīmols un vizuālā sistēma
Atzīme, kas veidota no idejas

Logotips ir māja, kas veidota kā tīkls: pieci stūra mezgli un centrālais mezgls, ko savieno vektori, īpašums saistītu cilvēku un procesu centrā. Tas tiek piegādāts kā primārais, salikts, simbols, apgriezts, mono un lietotnes ikonas variants.

Piecu krāsu tērauda palete

Zili melns, tumši tumšs tērauda, ​​vēsi zili pelēks, bāli tērauds un mākoņbalts, vienu reizi pasludināts par Tailwind 4 tēmas žetoniem. B2B pircējam atturība šķiet uzticama, un statusa emblēmām ir nozīme bez papildu krāsām.

Šveices režģa tipogrāfija

Inter Tight displejam un Inter tekstam, pašam mitināts nākamais/fonts. Lieli virsraksti ar lielajiem burtiem, numurētas sadaļas un katrs elements, kas atrodas uz redzamām matu līniju režģa šūnām.

02 /Tiek rādīta programmatūra, kas nav pabeigta
Maketi, kas rakstīti kā komponenti

Trīspadsmit produktu ilustrācijas (CRM kontaktpersonu ieraksts, AI darbību saraksts, portāla plūsma, aģentūras vietne, piegādātāja portāls, pretendentu atbilstības noteikšana un citi) ir React komponenti, nevis attēli. Tie paliek asi jebkurā izmērā, mērogojas ar konteineru em vienībās un tiek pakļauti ekrāna lasītājiem kā viens attēls.

Oriģinālā ilustrācija

Īpašuma fotoattēli ir SVG rindu mājas četros paletes toņos, un klienta ceļojums tiek uzzīmēts kā terase, kas virzās no pirmā apmeklējuma uz SOLD. Nekādu fondu fotogrāfiju un nekā, kas jālicencē.

Godīga marķēšana

Katrai iespējai ir noteikts statuss: pamatplatforma, papildinājums ar papildu samaksu vai vēlāk. Paraugu nosaukumi un attēli ir atzīmēti kā ilustratīvi.

03 /Informācijas arhitektūra
Pārskats, pēc tam dziļums

Mājaslapā ir sniegta četrdaļīga platforma, piecas vitrīnas kartes, iespēju režģis, klienta ceļš un seši iemesli, kāpēc to izvēlēties. Katrai daļai ir sava lapa: platforma, darbvieta, AI, saraksti, vietnes un līdzekļi.

Iespējas kā dati

Visas 32 iespējas atrodas vienā drukātā modulī, kas sagrupētas deviņās kategorijās ar statusu katrai. Mājaslapas režģis, funkciju lapa un kājene ir nolasāma no tā, tāpēc skaitļi nekad nemainās.

Viens aicinājums uz darbību

Reģistrācijas interese tiek parādīta galvenē, katras lapas varonī un kājenē, atverot iepriekš aizpildītu e-pasta ziņojumu pārdošanai. Vispārīgās un atbalsta iesūtnes ir norādītas atsevišķi.

04 /Kustība ar mērķi
Ielādes secība, kas stāsta par stāstu

Pirmajā apmeklējuma reizē atzīme izveidojas kā tīkls, kamēr skaitītājs darbojas līdz 100 un klienta ceļojums atzīmējas no pieprasījuma līdz pabeigšanai, pēc tam aizkars paceļas. Tas tiek atskaņots vienu reizi sesijā, izlaiž jebkuru taustiņu vai klikšķi un tiek paslēpts pirms krāsošanas lietotājiem ar samazinātu kustību.

Režģa līnijas, kas ievelkas

Katrai sadaļai ritinot skatā, tās matu līnijas pārvelkas un saturs paceļas. Ielādējot ekrānā jau redzamās sadaļas tiek atstātas vienas, tāpēc nekas nemirgo.

05 /Statiskā eksporta veiktspēja
Pilnībā statisks

izvade: "eksports" veido katru lapu HTML formātā. To apkalpo tikai statiskiem līdzekļiem paredzēts Cloudflare Worker ar pielāgotiem domēniem virsotnei un www, kā arī HTML 404 lapu.

Iepriekšējas ielādes labošana ligzdotajos maršrutos

Eksports ierakstīja segmentu priekšienes lietderīgās slodzes mapēs, savukārt klienta maršrutētājs pieprasīja vienotu, punktētu faila nosaukumu, tāpēc katra apakšlapas sākotnējā ielāde atgrieza 404. Neliels skripts pēc izveides pievieno vienotas kopijas, atjaunojot tūlītēju klienta puses navigāciju.

satura redzamība bez salauztiem enkuriem

Garās lapas izlaiž ārpus ekrāna esošo sadaļu renderēšanu. Tā kā šīs sadaļas sākas ar aptuveno augstumu, enkura lēcieni var novirzīties, tāpēc mazs klienta komponents pēc katra lēciena no jauna nosaka mērķi dažus kadrus.

06 /SEO, pieejamība un drošība
Veidots, lai būtu atrodams

Katras lapas metadati, kanoniskie URL, ģenerēta vietnes karte, roboti un tīmekļa manifests, izveides laikā renderēts Open Graph attēls un JSON-LD strukturēti dati. Atslēgvārdi atlasa aģentu meklēto: nekustamā īpašuma aģentūra CRM, Rightmove un Zoopla plūsmas, pārdevēju un iznomātāju portāli.

Pieejams pēc noklusējuma

Saite pāriet uz saturu, redzamas fokusa kontūras, semantiskie orientieri, dekoratīvā māksla, kas ir paslēpta no palīgtehnoloģijām, un visas animācijas, kas izveidotas ar priekšroka samazinātu kustību.

Rūdītas galvenes, juridiskās lapas

HSTS, nosniff, kadru noliegšana, stingra novirzīšanas politika un bloķētu atļauju politika ar nemainīgu jaukto līdzekļu kešatmiņu. Privātuma politika, GDPR un noteikumu lapas ir paredzētas Apvienotās Karalistes uzņēmumam.

//Kompromisi un nākamie soļi

Interese tiek uztverta pa e-pastu

Reģistrācijas interese atver iepriekš aizpildītu e-pasta ziņojumu, tāpēc vietnē nekas netiek saglabāts un nav veidlapu aizmugursistēmas, ko aizsargāt.

NĀKAMAIS SOLIS

Īsa kvalifikācijas veidlapa ar piekrišanu, kas tiek publicēta CRM, tiklīdz lietotne ir pieejama

Maketos tiek izmantoti datu paraugi

Produktu ekrāni ir plānotās lietotnes ilustrācijas, kas skaidri atzīmētas kā tādas.

NĀKAMAIS SOLIS

Moduļu piegādes laikā nomainiet tos ar reālās darbvietas ierakstiem

Nav publicētas cenas

Cenu noteikšana tiek veikta, izmantojot demonstrācijas, kamēr tiek pieņemts lēmums par iepakojumu.

NĀKAMAIS SOLIS

Cenu tabula, kas balstīta uz tiem pašiem spēju datiem

Tikai mārketinga vietne

Pats CRM darbojas atsevišķi lietotņu apakšdomēnā un joprojām tiek izstrādāts.

NĀKAMAIS SOLIS

Kopīgi dizaina marķieri, lai vietne un lietotne paliktu viens zīmols

RAŽOŠANA // TIEŠRAIDĒ
Skatiet tiešsaistes vietni vietnē propertyvector.co.uk
propertyvector.co.uk
Saņemt cenas piedāvājumu

Ir ideja projektam?

Pastāstiet man, ko jūs mēģināt sasniegt. Jums nav jāzina, kura tehnoloģija jums ir nepieciešama: es palīdzēšu definēt tehnisko pieeju, darbības jomu, laika grafiku un izmaksas pirms izstrādes sākuma.

Tādējādi tiek atvērta jūsu e-pasta lietotne ar ievadīto informāciju. Nekas netiek nosūtīts, kamēr nenospiežat sūtīt.