Ugrás a tartalomra

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 Karina
marketing és HR menedzser
Gyógyszer Webáruház
Gyógyszer Webáruház gyogyszerwebaruhaz.hu (új ablakban nyílik) Iparág: Gyógyszertár
Ez a webshop törődik az egészségeddel
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.

A Gyógyszer Webáruház logója – patikus kereszt körökből kirajzolt hatszögben – és a színpaletta: korall, barack és sötétkék tömör színek, valamint két színátmenet

A Gyógyszer Webáruház végleges logója és a választott színpaletta
Mohos Máté, Bimbó 1 Patika Kft.

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.

Logóváltozatok a Gyógyszer Webáruháznak ingen, köpenyen és kiszállító furgonon, a végleges korallszínű kereszttel

A logó tervek és a végleges verzió

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.

Termékdoboz alap- és kiválasztott állapotban: a kiválasztott terméknél a háttér türkizre vált, és a kosár gomb kiemelt színt kap

Egy termék kiválasztásakor a design egyik eleme, hogy az animáció kiemeli az árucikket és annak hátterét, így növelve a vásárlói élményt, ezzel segítve a döntést.
  1. 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.

  2. 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.

  3. 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.”

A tünetalapú kereső: a Keresés tünetek alapján oldalon a vásárló panaszok, például foginygyulladás szerint böngészhet
A Gyógyszer Webáruház oldalán nem csak az általános kereső érhető el, de tünetekre, panaszokra is lehet szűrni, amely elősegíti a legjobb megoldások megtalálását.

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.
A termékoldal Kapcsolódó dokumentumok füle letölthető betegtájékoztatóval és általános termékismertetővel
A részletes termékoldalon nem csak a termékadatok, betegtájékoztató és a hozzá csatolható letölthető dokumentumok állnak rendelkezésre, de ajánlott termékek, sőt helyettesítő árucikkek is felsorakoznak.

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:

  1. Á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.
  2. 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.
  3. 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.
A webshop kategóriamenüje ikonokkal (gyógyászat, vitaminok, szépségápolás, baba-mama) és a lenyíló alkategóriák
A szűrési lehetőségek célja a könnyű böngészés és célzott keresés támogatása.

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.

A Gyógyszer Webáruház nyitóoldala laptopon és mobilon

Az elkészült webshop reszponzív oldal, ami a hatályos szabályoknak megfelelően akadálymentes is.

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.

A Gyógyszer Webáruház arculatával dekorált kiszállító furgon

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ály­mentes

reszponzív felület

Az elkészült webshop a hatályos szabályoknak megfelelően akadálymentes.

A Gyógyszer Webáruház logója és színpalettája
Mohos Máté

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.

Mohos Máté Bimbó 1 Patika Kft.

További munkáink

Nézd meg a többit is.

Összes esettanulmány

Te is olyan digitális megoldást keresel, amely vállalkozásodat támogatja?

A jó eredmény nem a fejlesztéssel kezdődik, és nem is az átadással ér véget. Weboldal, webshop, marketing vagy a folyamataid digitalizálása: a céged működéséből indulunk ki, és hosszú távon is a céljaidat szolgáljuk. Beszélgessünk róla!

Az esettanulmány szerzője Koppány Karina marketing és HR menedzser

Karinával leginkább a weboldalszövegek és a marketing tanácsadások során fogsz együtt dolgozni. Emellett ő interjúztatja az új kollégáinkat, és a social media tartalmainkért is ő felel — az fws legtöbbször az ő hangján szólal meg az online térben.

Karina további írásai