Esettanulmány · Egyedi webshop
Ez a webshop törődik az egészségeddel
Logótól a kész webáruházig mi feleltünk a teljes vizuális stratégiáért. A cél egy online patika volt, ami bizalmat sugároz, megfelel a szigorú jogszabályoknak — és közben tényleg könnyű használni.
Koppány Karinamarketing és HR menedzser
- generációs családi vállalkozás mögötte
- 3
- a logótól a kész webshopig
- Arculat
- akadálymentes, reszponzív felület
- WCAG
Egy gyógyszer webáruház designja nem csupán esztétikai kérdés, hanem az üzleti siker és a felhasználói élmény egyik meghatározó eleme. Egy ilyen platform esetében a vizuális megjelenésnek egyszerre kell támogatnia a gyors és egyszerű navigációt, erősítenie a márka hitelességét, valamint megfelelnie az iparági szabályozások által támasztott követelményeknek.
A Gyógyszer Webáruház esetében a teljes arculattervezéstől a webshop felhasználói felületének kialakításáig mi feleltünk a vizuális stratégiáért. A cél egy olyan design megalkotása volt, amely az egészségügy iránti bizalmat és szakmaiságot sugározza, miközben modern, letisztult és felhasználóbarát. Az alábbiakban bemutatjuk a teljes tervezési folyamatot, a logó- és arculatkialakítástól kezdve a webshop specifikus UX/UI megoldásaiig, és megvizsgáljuk, hogyan segíti a design a vásárlói élményt és az üzleti célok elérését.
Az ügyfél
Három generáció a gyógyszeriparban
A Gyógyszer Webáruház mögött egy három generációs családi vállalkozás áll, amely hosszú évek óta jelen van a gyógyszeriparban. Az alapítók célja nem pusztán egy új webshop létrehozása volt, hanem egy olyan platform kialakítása, amely modern alternatívát kínál a gyógyszer- és egészségügyi termékek online elérhetőségére.
Bár a webshopon gyógyszerek is elérhetők, a vállalkozás elsődleges célja nem még több gyógyszer értékesítése, hanem egy országosan ismert, megbízható és könnyen használható online patika megteremtése. A piaci szereplők elemzését követően egyértelművé vált, hogy a legtöbb versenytárs webshopja nehezen kezelhető, kevésbé intuitív megoldásokkal operál. Az ügyfél ezt a problémát szerette volna kiküszöbölni egy átlátható, felhasználóbarát, modern és innovatív megoldással.
A kiindulás
Amit meg kellett oldani.
A fejlesztés során figyelembe kellett venni a folyamatosan változó jogszabályi környezetet is, amely szigorúan szabályozza a gyógyszerek online értékesítését és kiszállítását. Míg külföldön egyes országok lehetővé teszik a receptköteles gyógyszerek online rendelését, Magyarországon jelenleg csak személyesen átadott kiszállítás engedélyezett, amelyet szakasszisztens vagy gyógyszerész végezhet. Az ügyfél számára ezért kiemelten fontos volt, hogy a webshop ezt a szabályozást is figyelembe vegye, miközben hosszú távon rugalmasan alkalmazkodni tudjon az esetleges változásokhoz.
-
Nehezen kezelhető versenytársak
A legtöbb versenytárs webshopja nehezen kezelhető, kevésbé intuitív megoldásokkal operál.
-
Változó jogszabályi környezet
A gyógyszerek online értékesítését és kiszállítását szigorú szabályozás határozza meg, amelyhez a webshopnak alkalmazkodnia kell.
-
Hiányos adatok a patikai rendszerből
Nem minden adat érhető el automatikusan, így az adminnak a kézzel rögzítendő információkat is rugalmasan kell kezelnie.
-
Nem volt online jelenlét
A webshop elindítása előtt az ügyfélnek még nem volt aktív online jelenléte.
A folyamat
Egyensúly a modernitás és az iparági kötődés között.
Egy gyógyszer webáruház esetében az arculatnak nem csupán esztétikailag kell kiemelkednie, hanem funkcionalitásában is támogatnia kell a felhasználói élményt.
Jani, grafikusunk megjegyzése:
„Olyan egyedi arculatot alakítottunk ki, mind szín- és formavilág tekintetében, amely erősen megkülönböztethetővé teszi a konkurens oldalaktól és egy modern és haladó vállalkozás képét tükrözi.
A logó kialakítása is ezeknek a szempontoknak megfelelően történt, ugyanakkor hangsúlyt fektettünk arra, hogy a tevékenységi kör is jól felismerhető és beazonosítható legyen. Ezért a logóban megjelenik a patikus kereszt, a molekulák és a kémiai kötés szimbóluma is.”
A logó tervezésekor alapvető cél volt, hogy egyértelműen beazonosítható legyen az iparági háttér, ugyanakkor elkerüljük a túlzottan hagyományos megoldásokat. A végleges design patikus keresztet, molekulákat és kémiai kötéseket is tartalmaz, amelyek együttesen sugallják a gyógyszerészethez való kötődést. Fontos szerepet kapott az egységesség is: a benne található kör formák a webshop különböző pontjain is visszaköszönnek, így biztosítva a vizuális összhangot és az arculat következetességét.
A színek kiválasztásánál két fő szempont érvényesült: a WCAG szabványoknak való megfelelés és az egészségügy vizuális asszociációi. A végleges paletta egyik meghatározó eleme a türkizkék, amely az orvosi köpenyt idézi, ezzel az egészség és a szakmaiság érzését kelti. Emellett modern, vibráló színek teszik élénkebbé és frissítőbbé az arculatot. A betűtípusok tervezésénél az olvashatóság és a vizuális harmónia volt a legfontosabb tényező. A választott modern, lekerekített betűtípus nemcsak könnyen értelmezhető, hanem illeszkedik a honlapon alkalmazott egyéb vizuális elemekhez is.
Jani, grafikusunk megjegyzése:
„A tipográfia modern, lekerekített betűkkel operál, ami harmonizál a honlapon használt lekerekített elemekkel.
Az oldal felépítése a UX standardoknak megfelelően lett kialakítva, nincsenek benne olyan »formabontónak« szánt megoldások, amelyek összezavarnák a látogatókat, nehezen érthetőek lennének és akadályoznák a konverziót.”
A webshop kialakításakor az egyik legfontosabb cél a termékek könnyű megtalálhatósága és az egyszerű navigáció volt. Az átlátható felépítés segíti a felhasználókat abban, hogy gyorsan elérjék a számukra releváns termékeket, míg a különböző szempontú szűrési lehetőségek támogatják a vásárlói döntéseket.
A termékek bemutatása kulcsfontosságú egy gyógyszer webáruház esetében, ezért a „termékdobozok” minden lényeges információt tartalmaznak anélkül, hogy túlzsúfolt hatást keltenének. A részletes termékoldalak olyan struktúrában készültek, amely lehetővé teszi, hogy a vásárlók könnyen elérjék a legfontosabb adatokat, például az árat, a termékjellemzőket és a kapcsolódó dokumentumokat. Emellett a kapcsolódó termékek kiemelése segíti a keresztértékesítést, ösztönözve a további vásárlásokat.
-
Logó
Patikus kereszt, molekulák és kémiai kötések; a kör formák a webshop különböző pontjain is visszaköszönnek.
-
Színek és tipográfia
A WCAG szabványoknak megfelelő, orvosi köpenyt idéző türkizkék paletta és modern, lekerekített betűtípus.
-
UX/UI megoldások
Könnyű megtalálhatóság, egyszerű navigáció és minden lényeges információt tartalmazó termékdobozok.
Keresés és navigáció
Felhasználói élmény és funkcionalitás egyszerre
A gyógyszertárak online jelenlétében gyakran tapasztalható, hogy a felhasználók nehezen találják meg a keresett termékeket, a navigáció bonyolult és az információk nem mindig egyértelműek. Ezeket a problémákat figyelembe véve olyan webshopot terveztünk, amely a gyors keresés, egyszerű böngészés és vásárlói döntések támogatására épül, így a platform nem csupán vizuálisan vonzó, hanem átlátható, intuitív és könnyen használható is.
Az elsődleges funkciók – keresés, kategóriák és ajánlott termékek – azonnal elérhetők, így a vásárlók gyorsan megtalálják a számukra releváns tartalmakat.
Főbb megoldások:
- Hibatűrő kereső: A keresősáv képes kezelni az elírásokat, ékezet nélküli beírásokat és javaslatokat ad a keresett kifejezésekre.
- Tünetalapú kereső: Az adminisztrációs felületen beállítható, hogy a felhasználók konkrét egészségügyi panaszok alapján is keresni tudjanak.
- Leggyakrabban megrendelt termékek külön szekcióban: Ez segíti a visszatérő vásárlókat, hogy gyorsan elérjék a népszerű termékeket.
Jani, grafikusunk megjegyzése:
„Az oldal kialakításakor fontos szempont volt a termékek könnyű megtalálhatósága és a termékkategóriák közötti navigáció, valamint a termékek szűrésének lehetősége, különböző szempontok szerint.”
Termékoldal
Termékoldalak: minden információ egy helyen
Egy webshop termékoldalának kialakításakor kiemelten fontos, hogy az összes lényeges információ könnyen elérhető legyen, miközben a felhasználói felület letisztult és jól átlátható marad. A gyógyszertári termékeknél ez különösen jelentős, hiszen nem mindegy, hogy a választott készítmény vényköteles-e, milyen allergéneket tartalmaz vagy, ami talán a legfontosabb, hogy milyen betegség tüneteinek kezelésére alkalmas.
Megoldások:
- A felület lehetővé teszi, hogy betegtájékoztatót és dokumentumokat csatolhatnak minden termékhez. Így a vásárlók részletes tájékoztatást kaphatnak, és már azelőtt elolvashatják a készítmények leírását, mielőtt megvásárolnák őket.
- Kapcsolódó termékek ajánlása: A rendszer olyan termékeket javasol, amelyek kiegészíthetik a kiválasztott árucikket.
- Helyettesítő termékek megjelenítése: Segítséget nyújt azokban az esetekben, amikor egy adott termék éppen nem elérhető, vagy a vásárló egy hasonló alternatívát keres.
Szűrés
Szűrési és kategorizálási rendszer: gyors és hatékony böngészés
A webshop egyik kiemelt funkciója a részletes szűrési lehetőségek biztosítása, amelyek támogatják a vásárlói döntéseket és segítik a gyors termékfelfedezést. Ezeket ikonok is segítik, például egy akciós terméknél a % jel jelenik meg grafikusan is a terméken, ugyanúgy, ahogy vizuális megkülönböztetést kap egy vényköteles termék is, ugyanúgy mint a gyógyszerek, mint a gyógyszernek nem minősülő árucikkek és a dermokozmetikumok is. A webshopban több olyan funkció van, ami segít a vásárlóknak a számukra legjobban megfelelő keresett termékek megtalálásában.
Lehetőségek:
- Ár szerinti szűrés: A rendszer lehetővé teszi, hogy a felhasználók a legolcsóbb termékeket helyezzék előtérbe, vagy bizonyos ársávban keresgéljenek.
- Ikonok a gyógyszerkategóriák megkülönböztetésére: Azok a termékek, amelyek gyógyszernek minősülnek, külön jelzést kaptak, így a vásárlók könnyen eligazodhatnak a kínálatban.
- Cikkcsoportok százalék alapú ármeghatározással: A rendszer lehetőséget biztosít arra, hogy egyes termékkategóriák kedvezményesen jelenjenek meg a vásárlók számára.
Ajánlórendszer
Ajánlórendszerek és upsell megoldások
A Gyógyszer Webáruház tervezésekor kiemelt figyelmet fordítottunk arra, hogy a vásárlói élmény ne csupán egyszerű és gyors legyen, hanem intuitív ajánlórendszerekkel is támogassa a felhasználókat. Egy jól felépített webshop esetében az ajánlások nemcsak a vásárlási élményt teszik gördülékenyebbé, hanem a vásárlók elégedettségét és az üzleti eredményeket is növelhetik. A webshop rendszeresen elemzi a vásárlási mintákat és a böngészési szokásokat, ennek alapján pedig dinamikusan ajánl kapcsolódó termékeket a felhasználóknak. Ha egy látogató egy adott terméket néz meg, a rendszer azonnal megjeleníti azokat az árucikkeket, amelyeket más vásárlók is megvásároltak vagy amelyek logikusan kapcsolódhatnak az adott termékhez. Ez a megoldás segít abban, hogy a felhasználók könnyebben találják meg a számukra releváns termékeket, miközben növeli a vásárlások értékét.
A kapcsolódó termékek mellett a webshop helyettesítő termékeket is megjelenít, ami különösen fontos a gyógyszeriparban, ahol egy adott készítmény helyett gyakran elérhető hasonló hatású alternatíva. Ez a funkció nemcsak az elérhetőség problémáját oldja meg, hanem a gyógyszertári vásárlás személyes élményét is visszahozza az online térbe, hiszen egy jól felépített ajánlórendszer olyan érzést kelt, mintha egy szakértő ajánlana alternatívákat a vásárlónak.
Jani, grafikusunk megjegyzése:
„A termékek részletes nézetén elérhető kapcsolódó termékek további vásárlásra ösztönöznek, és személyesebbé teszik az online rendelést.”
Az ajánlások harmadik pillére az upsell ajánlatok, amelyek célja, hogy a vásárló számára hasznos, de addig még nem feltétlenül ismert termékeket javasoljanak. Egy adott gyógyszer esetében például a rendszer olyan kiegészítő vitaminokat vagy egyéb segédeszközöket ajánlhat, amelyek javíthatják a kezelés hatékonyságát vagy kényelmesebbé tehetik a felhasználást. Ezek a megoldások nemcsak a webshop forgalmát növelik, hanem hozzájárulnak a tudatosabb vásárlási döntésekhez is.
A megoldás
Hatékony, skálázható, fenntartható.
A Gyógyszer Webáruház fejlesztése során nem csupán egy modern és esztétikus webshop létrehozása volt a cél, hanem egy működésében is hatékony, skálázható és hosszú távon fenntartható rendszer megalkotása. A projekt egyik legnagyobb kihívását a központi patikai rendszerhez való illeszkedés jelentette, hiszen nem minden adat volt automatikusan elérhető, ezért az adminisztrációs felületet úgy kellett kialakítani, hogy rugalmasan kezelje a manuálisan rögzítendő információkat is.
A fejlesztés során kiemelt figyelmet fordítottunk a részletes árkezelési megoldásokra, amelyek lehetővé teszik a termékkategóriák százalékos alapú árazását. Ezzel a rendszerrel az ügyfél hatékonyabban tudja kezelni az árképzést, miközben biztosítja, hogy a jogszabályi előírásoknak is megfeleljen – például a 30 napos akciós árak feltüntetése minden termék esetében egyértelműen megjelenjen.
A webshopba beépített kattintáskövető rendszer egy másik olyan fejlesztési elem volt, amely jelentős előnyt biztosít az ügyfél számára. A vásárlói aktivitások részletes elemzésével folyamatosan finomhangolható az ajánlórendszer, az akciók hatékonysága és a felhasználói élmény. A rendszer pontos visszajelzést ad arról, hogy a látogatók milyen termékeket keresnek a leggyakrabban, mely ajánlatok teljesítenek jól, és milyen pontokon lehet még tovább optimalizálni a webshop működését.
-
Hibatűrő kereső
Kezeli az elírásokat és az ékezet nélküli beírást, és javaslatot ad a keresett kifejezésre.
-
Tünetalapú kereső
Az adminban beállítható, hogy a vásárlók konkrét egészségügyi panaszok alapján is kereshessenek.
-
Leggyakrabban rendelt termékek
Külön szekció segíti a visszatérő vásárlókat, hogy gyorsan elérjék a népszerű termékeket.
-
Betegtájékoztató a terméknél
Minden termékhez csatolható dokumentum, így a vásárló a rendelés előtt elolvashatja a leírást.
-
Kapcsolódó és helyettesítő termék
Ha egy készítmény nem elérhető, a rendszer hasonló alternatívát ajánl, mintha egy szakértő tenné.
-
Ikonok és szűrők
Ár szerinti szűrés, a gyógyszerek, vényköteles és akciós termékek vizuális megkülönböztetése.
-
Százalékos árazás, akciós ár
Cikkcsoportonkénti százalékos árazás és a 30 napos akciós ár egyértelmű feltüntetése.
-
Beépített kattintáskövetés
Látszik, mit keresnek a legtöbben és melyik ajánlat működik, így az ajánlórendszer finomhangolható.
Az eredmény
Ismerhető és elismert online márka.
A technikai háttér mellett a brandépítés is kiemelt szerepet kapott. Bár a webshop elindítása előtt az ügyfélnek még nem volt aktív online jelenléte, a fejlesztés részeként olyan vizuális és tartalmi alapokat hoztunk létre, amelyekre egy későbbi közösségi média és marketing stratégia is építhető. Az új arculat, a letisztult és konzisztens vizuális elemek, valamint az átgondolt UX/UI megoldások mind hozzájárulnak ahhoz, hogy a Gyógyszer Webáruház ne csupán egy webshop legyen a sok közül, hanem egy ismerhető és elismert online márkává váljon. Az ügyfél számára egy olyan stabil és fenntartható webshopot adunk át, amely alkalmazkodik a piaci és jogszabályi változásokhoz, miközben a felhasználók számára egy könnyen kezelhető, átlátható és professzionális platformot biztosít.
30 nap
akciós ár feltüntetése
A jogszabály által előírt árfeltüntetés minden terméknél egyértelműen megjelenik.
2 kereső
terméknév és tünet
A hibatűrő kereső mellett panaszok alapján is lehet keresni.
Arculat, amire lehet marketinget építeni
Vizuális és tartalmi alapok, amelyekre egy későbbi közösségi média és marketing stratégia is építhető.
Akadálymentes
reszponzív felület
Az elkészült webshop a hatályos szabályoknak megfelelően akadálymentes.
A fejlesztési folyamat elejétől a végéig jól strukturált volt – nem volt gyors, de nem is kellett annak lennie. Sőt, visszagondolva el sem tudom képzelni, mi lett volna, ha egy olyan céggel dolgozom, ahol három-négy hónap alatt kész lett volna minden.
Szükség volt erre a bő egy évre, hogy minden tényleg összeálljon. A termékfeltöltés például két hónapot vett igénybe, mert bár az adatokat átvettük, sok esetben kézzel kellett kiegészíteni a leírásokat, vagy újra feltölteni a képeket, de rengeteg termékről van szó, szóval ez érthető. A fejlesztési szakaszban Dorka volt a projektmenedzserem, és nagyon gördülékenyen működött a közös munka. Ha neki volt kérdése, igyekeztem gyorsan válaszolni, hogy ne álljon meg a munka, ő pedig mindig segítőkészen és gyorsan reagált, ha én fordultam hozzá. Rengeteg egyeztetésen vagyunk túl, és mindig megoldást találtunk minden helyzetre.
A design kész verziójára is élénken emlékszem – amikor megkaptam, őszintén mosolyogtam, mert tényleg azt éreztem: ez jó lett. Az elkészült webshop kezelhetősége szerintem nagyon jól sikerült, a célokat elértük, és a vásárlói visszajelzések is ezt igazolják. Sok idősebb vásárlónk van és ők is könnyen eligazodnak az oldalunkon. Természetesen mindig van mit fejleszteni, például a checkout folyamaton még szeretnénk csiszolni, de ez már folyamatban van.
A webshop beindítása óta érezhetően megnőtt a forgalmunk – olyan vásárlók is betérnek hozzánk személyesen, akik eddig nem is tudtak rólunk, de a webshopon keresztül felfedeztek minket. És ma már nemcsak a II. kerület környékén értékesítünk, hanem az egész országban – ez nagyon jó érzés. A legjobb visszajelzések viszont azok, amikor egy-egy vásárló megköszöni a gyorsaságot, a terméket – vagy éppen az apró ajándékot, amit a csomagjába tettünk. Ajánlanám-e az fws-t másoknak? Már ajánlottam is – nemcsak webshophoz, hanem bármilyen weboldalhoz is.