30
Komponenten (Websitebausteine)
4'000 +
Produkte im Shop
85'300
Eingelöste Coupons seit 01. Juli 2021
Auftrag
Die neue, nutzerfreundliche Website soll das breite Angebot zeitgemäss und ansprechend im Web präsentieren. Dabei stehen mehrere Gedanken im Vordergrund: Der Online Shop soll die Vielfalt an Produkten simpel und zugänglich anzeigen. Zudem soll sie als zentrale Informationsplattform für die verschiedenen Produkte und ihre Formate fungieren. Für den hep Verlag soll sie auch als zentrales Marketingtool dienen.
Zielsetzung
Vielfältiger Produktkatalog mit über 4000 Produkten darstellen
Detaillierte Informationen zu Produkten und Angeboten vermitteln
Einfache Bedienung und Flexibilität der Webseite für die hep-Mitarbeitenden
Modulare Elemente für eine flexible Anzeige der Inhalte
Aktuelle Themen & Aktionen in verschiedenen Formen präsentieren
Gute Accessibility trotz hoher Komplexität
![](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/hep/hepverlag_produktseiten.png)
Herausforderungen
Die grösste Herausforderung bietet der Produktkatalog mit über 4000 Produkten. Diese werden im PONDUS, dem ERP des hep Verlags verwaltet und abgebildet. Damit der Inhalt nicht doppelt gepflegt werden muss, haben wir das ERP mittels Schnittstelle in den neuen Online Shop integriert. So können Produkte und deren Attribute flexibel auf der Webseite dargestellt werden. Zusätzliche Komplexität entsteht durch diverse verschiedene Produktarten (Buch, E-Lehrmittel, PDF, ebook), Verknüpfungen zu Partnern (beook und myskillbox) und zahlreichen Features wie dem Nutzen von Coupons & Gutscheinen, komponentenbasierte Landingpages und Produktseiten.
Lösungsprozess
In mehreren Workshops wurde das Konzept mit Hilfe von Wireframes, die neue Seitenstruktur und die Anforderungen an die Webseite definiert. Basierend auf dem Corporate Design des hep Verlags wurde ein ansprechendes und benutzerfreundliches User Interface Design kreiert.
Während mehreren Monaten wurde die neue umfangreiche Webseite mit dem CMS Statamic umgesetzt. Die Webshop-Anbindung wurde mit dem Laravel Framework realisiert.
![](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/hep/hep_komponentenbasiert.png)
Flexible Komponenten für optimale Bedienbarkeit
Mit fast 30 einzigartigen Komponenten (Website-Bausteine) und 9 Header Styles kann das Team des hep Verlags verschiedene Landingpages selbstständig aufbauen. Die Flexibilität des CMS bietet dabei eine individuelle Gestaltung verschiedener Angebote, Informationen und Produkte. Der modulare Aufbau des CMS ermöglicht eine intuitive Erfassung von verschiedensten Inhalten. Die Komponenten sind responsive. Das heisst, dass die Inhalte auf verschiedenen Screen-Grössen (Smartphone, Tablet, Desktop usw.) ideal aussehen, ohne dass das hep Team etwas anpassen muss. So finden ihre einzelnen Zielgruppen inhaltlich hochwertige Lehrmittel mit einer breiten Palette an nützlichen Informationen an einem Ort.
Anbindung Pondus
Die technisch komplexe Schnittstelle zu Pondus stellt einen hohen Mehrwert für den hep Verlag dar. Die Daten der Produkte werden direkt aus dem ERP in den Webshop importiert und automatisch zu einer schönen Produktseite zusammengestellt. Das Produkt kann danach in Statamic (CMS) von hep mit Daten bzw. Komponenten, welche nicht im ERP vorhanden sind, angereichert werden. Somit werden Produktseiten ohne grossen Aufwand automatisch erstellt.
Coupons & Schnittstellen
Im Fall von hep stellen Coupons digitale Codes dar, welche Zugriff auf ein Produkt erlauben. Diese sind einzigartig; sie können nur einmalig eingelöst werden. Nach dem Einlösen werden sie mit den Logindaten von Usern verknüpft und dienen verschiedenen Zwecken:
Produkte können online für andere Personen erworben werden. Lehrpersonen können so z.B. für eine ganze Klasse die online Version eines Fachbuches erwerben und den Schüler:innen weitergeben. Das vereinfacht die Organisation.
Coupons, welche auf anderen Plattformen gekauft werden oder in einem Buch enthalten sind, können über die Webseite eingelöst werden. Das erlaubt eine flexible Nutzung für verschiedene Bedürfnisse der Lernenden.
Dafür wurde je eine Schnittstelle zu beook & myskillbox eingerichtet. Mit einem Coupon wird das Produkt bei den Partnerorganisationen gutgeschrieben und kann so verwendet werden. Das Login bleibt jeweils dasselbe, und die eingelösten Coupons werden so erkannt.
Im CMS lassen sich die eingelösten Coupons einfach verwalten und es ist ersichtlich, was zu welchem Zeitpunkt eingelöst und bezogen wurde.
![](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/hep/hep_coupon.png)
mySkillbox
mySkillbox ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB). mySkillbox ist eine online Lernplattform für «ABU»-Lektionen (allgemeinbildender Unterricht). Die Schnittstelle bietet die Möglichkeit, sich mit einem hep-Login auf den
Plattformen anzumelden. Die Lizenzen für mySkillbox können direkt über die hep Webseite bezogen werden — von Lehrpersonen & Lernenden.
beook
beook ist eine online Lernumgebung und Partnerorganisation vom hep Verlag. hep bietet Nutzer:innen verschiedene Produkte, welche mit einem Coupon Code bei beook eingelöst werden können. Der Code ist entweder in einem Buchumschlag aufgedruckt oder kann separat als eLehrmittel erworben werden. Nutzer:innen können sich entweder mit den Logindaten des hep Benutzerkontos bei beook anmelden oder den Coupon in der beook-App direkt einlösen. Mit einer API-Schnittstelle greift beook auf die Website des hep Verlag zu und erkennt, welche Coupons eingelöst wurden. So haben Nutzer:innen auf der beook Lernumgebung Zugriff auf die eingelösten Produkte (E-Lehrmittel) und können direkt mit diesen arbeiten.
Weitere Funktionen
Die Webseite stellt neben den Produkten auch den hep Verlag selbst vor und gibt eine Übersicht über angebotene Dienstleistungen. So dient zum Beispiel eine sympathische Darstellung der Mitarbeitenden der Präsentation des hep Verlags als Arbeitgeber.
Die Zusammenarbeit hat eine längerfristige Partnerschaft hervorgebracht. Der hep Verlag setzt seit der Umsetzung der Webseite auf novu als digitale Partneragentur. So werden laufend Weiterentwicklungen, Ergänzungen und Anpassungen vorgenommen.
![](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,z_0.5,h_2000,c_thumb,g_auto/novu-cms/staging/assets/references/hep/wenger_rahel_okt_21_sw_beschn-1641806318.webp)
novu vereint technisches und grafisches Know-how auf höchstem Niveau. Das Team von novu hat schnell verstanden, was für uns und unsere Kunden wichtig ist und wir haben jetzt eine Webseite, die genau unseren Wünschen entspricht. Sie ist flexibel gestaltbar und technisch vorausschauend aufgebaut, sodass wir neue Projekte und Erweiterungen einfach angehen können. Wir haben uns beim anspruchsvollen Relaunch unserer Webseite gegenseitig zu Höchstleistungen angespornt und trotz stressigem Endspurt hatte es auch immer Platz für den einen oder anderen Joke.
Referenzen
![Referenz nohe Schweiz](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nohe-schweiz/nohe_thumb_02.png)
![Referenz nohe Schweiz](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nohe-schweiz/nohe_thumb_01.png)
nohe Schweiz
![Referenz gibb Sporttag](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/gibb-sporttag/gibb-sporttag-thumbnail-2.png)
![Referenz gibb Sporttag](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/gibb-sporttag-thumbnail-1.png)
gibb Sporttag
![Referenz Media-Line GmbH](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/media-line-gmbh/thumb_a9-1.png)
![Referenz Media-Line GmbH](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/media-line-gmbh/thumb_logo-1.png)
Media-Line GmbH
![Referenz Working Bicycle](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/workingbicycle/working-bicycle---thumb1.png)
![Referenz Working Bicycle](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/workingbicycle/working-bicycle---thumb-2.png)
Working Bicycle
![Referenz NFP Energie](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nfp/nfp---thumbnail-1.png)
![Referenz NFP Energie](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nfp/nfp---thumbnail-2.png)
NFP Energie
![Referenz Roots Kassensystem](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/roots/roots_thumbnail2.png)
![Referenz Roots Kassensystem](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/roots/roots_thumbnail1.png)
Roots Kassensystem
![Referenz datenschutz.law](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/Preview-datenschutz1.png)
![Referenz datenschutz.law](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/Preview-datenschutz2.png)
datenschutz.law
![Referenz Gestina AG Immobilienverwaltung](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/gestina/house-1.png)
![Referenz Gestina AG Immobilienverwaltung](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/gestina/cloud-1.png)
Gestina AG Immobilienverwaltung
![Referenz La Werkstadt](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/la-werkstadt/lawe_thumb_02.png)
![Referenz La Werkstadt](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/la-werkstadt/lawe_thumb_01.png)
La Werkstadt
![Referenz ISP Smarthome](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/isp-smarthome/house-1.png)
![Referenz ISP Smarthome](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/isp-smarthome/isp_logo_white-(1).png)
ISP Smarthome
![Referenz Denk an mich Website](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/denk-an-mich/Referenz-dam-1639650048.png)
![Referenz Denk an mich Website](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/denk-an-mich/denk_anmich-1639650050.png)
Denk an mich Website
![Referenz Uniskat AG Transportservice](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/uniskat-ag-transportservice/truck-1.png)
![Referenz Uniskat AG Transportservice](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/uniskat-ag-transportservice/house-1.png)
Uniskat AG Transportservice
![Referenz Fracture Monitor](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/fracture-monitor/header_illustration_2.png)
Fracture Monitor
![Referenz Kellerhals Carrard](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/kellerhals-carrard/kellerhals-carrard_thumbnail_2.png)
Kellerhals Carrard
![Referenz Seilbahnen Schweiz Webseite](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/seilbahnen-schweiz/seilbahnen-schweiz---thumbnail-1.png)
![Referenz Seilbahnen Schweiz Webseite](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/seilbahnen-schweiz/seilbahnen-schweiz---thumbnail-2.png)
Seilbahnen Schweiz Webseite
![Referenz Energie Wasser Bern](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/ewb/ewb_01.png)
![Referenz Energie Wasser Bern](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/ewb/ewb_02.png)
Energie Wasser Bern
![Referenz NZZ Kunst](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nzz-kunst/nzz-kunst-thumbnail-1.png)
![Referenz NZZ Kunst](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nzz-kunst/nzz-kunst-thumbnail-2.png)
NZZ Kunst
![Referenz Golfers Paradise Onlineshop](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/golfers-paradise/golfersparadise---thumbnail1.png)
![Referenz Golfers Paradise Onlineshop](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/golfers-paradise/golfersparadise---thumbnail2.png)
Golfers Paradise Onlineshop
![Referenz Game «Generali Running Challenge»](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/running-challenge/running-challenge---thumbnail-1.png)
![Referenz Game «Generali Running Challenge»](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/running-challenge/running-challenge---thumbnail-2.png)
Game «Generali Running Challenge»
![Referenz Nexplore](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nexplore/nexplore_website_1.png)
![Referenz Nexplore](https://res.cloudinary.com/teamnovu/image/upload/w_2000,q_auto,f_auto,c_lfill,g_auto/novu-cms/staging/assets/references/nexplore/nexplore_preview_background-1672997800.png)