Shoprenter.hu megújulása
lett az év honlapja
B2B weboldalak kategória
2020-ban a Shoprenter.hu összes oldalát megújítottuk és egy grandiózus kampány keretében lett bemutatva az új brand.
Szolgáltatás
UX Design
UI Design
Fejlesztés
Video
Platform
Figma
WordPress
After Effects
Ár
600 – 990 ezer Ft
Év
2020
Projekt
A Shoprenter egyike a legmagasabb képességű webáruház megoldásoknak, amely professzionális alapot biztosít a kis és középvállalkozások e-kereskedelméhez.
A cég életében most jött el egy nagyobb arculatváltásnak és megújulásnak az ideje. A projekt kiterjedtsége megkövetelte a szoros együttműködést a marketing és a product teammel. A kollaboratív környezet nagyban hozzájárult, hogy 2020-ban elnyerjék Az Év Honlapja díjat B2b kategóriában.
Elkészült anyagok
UI kit és Styleguide
Egyedi, komponens alapú UI kit, a jövőbeli design munkák támogatásához.
Landing page
Egyedi, interaktív WordPress oldal a brand kommunikálására.
Video
Shoprenter megújulás videója a kampány támogatására.
Aloldal design
7 db reszponzív aloldal design, mobil verziókkal.
01 Design System
Kihívás
Egy termék fejlesztése során gyakran esnek abba a hibába a termékfejlesztők, hogy nem definiálják előre a felhasználható design komponenseket. Az eredmény egy olyan SaaS termék lesz, ahol 10 féle gombbal kell tervezni és fejleszteni. Hasonló a helyzet egy összetett és sok aloldallal rendelkező weboldal esetén is.
A Shoprenter 9 éve alatt szintén ezzel a problémával küzdött. A folyamatos fejlesztések, funkciók és webshop sablonok újabb és újabb aloldalakat kívántak. Végül gombokból kb 10-15 félét számoltunk össze az egész site-on. A kihívás tehát az volt, hogy erre megoldást találjunk és egy skálázható Design Systemet alkossunk az új weboldalnak.
Figma Design System
A Shoprenter projekt legelső pontja egy olyan Design System és Styleguide létrehozása volt, ami meghatározza a weben használható komponenseket (logók, gombok, űrlap elemek, stb.). A Design System segítségével olyan egységes megjelenést biztosíthatunk weboldalunknak, amivel a design és front-end fejlesztési munkák is felgyorsíthatóak. Fontos volt, hogy az egész rendszer skálázható legyen és egymásra épülő elemekből épüljön fel.
02 Landing oldal
Kihívás
A brand magújító kampányhoz szükség volt egy landoló oldalra, amely egy felületen mutatja be legfontosabb változásokat a design és a kommunikáció szempontjából, teret engedve azoknak fókuszpontoknak is, amelyek változatlanok maradtak a cég küldetését illetően.
A weboldalnak feladatai a következők voltak:
- Szemléltesse a termék design és kommunikáció változásait (egymás mellé állítottuk a régi és új admint, illetve a magázást és tegezést)
- Arculati kézikönyv, mint másodlagos CTA is jelenjen meg a weboldal alján
WordPress Landing oldal
A WordPress mint platform tökéletesnek bizonyult egy ilyen feladatra. Egyszerűen és gyorsan felépíthető volt az oldal. Az Elementor page builder pedig megfelelő hátteret biztosított az egyedi design megoldásoknak.
03 Video
Kihívás
Bemutatni a Shoprenter új arculatát egy 1 perces videóban, amely a landoló oldalhoz igazodva kommunikálja az arculat megújulásának legfontosabb pontjait.
Audio
Olyan aláfestő dalt választottunk a videó alá, amely erős és hatásos ütemeivel teremt a rövid szöveges üzenetek mögé fiatalos, motiváló hangulatot – eltérve ezzel az IT iparágra jellemző “corporate upbeat” stílustól.
Video
Az 1 perces klippet After Effects segítségével állítottuk össze a marketinges csapat scriptje alapján .
Fő szempont volt, hogy ne egy szokásos sablon alapján készült videót készítsünk, hanem amennyire csak lehet és a büdzsé engedi legyen egyedi. Ezért 0-ról építettük fel és csak a szövegekhez használtunk animálást.
04 Aloldalak
Kihívás
6 aloldal design elkészítése mobil nézettel.
Aloldalak
Shoprenter Blog
Árak és csomagok
Referenciák
Oktatás
Design témák
Értékesítés
Online Oktatás
Időszakos akcióként érhető el
Egyedi Üzleti Weboldalakat készítek
