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:

  1. 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)
  2. 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
Online Oktatás

Időszakos akcióként érhető el