UX Unterstützung für CMSBOX

Interaktionskonzept Content Management

Zusammen mit der Berner Firma CMSBOX GMBH durften wir das Interaktionskonzept der neuen Version des hauseigenen Content Management Systems „CMSBOX“ erarbeiten.

Seit über 10 Jahren bietet das innovative Content Management System CMSBOX ein sogenanntes „inline editing“ an. Was heisst, dass Content Manager direkt innerhalb der Webseite Ansicht auch bearbeiten können, ohne dass man in ein Backend (Bearbeitungs-Modus) des Systems wechseln muss. Dafür wurde die CMSBOX sogar mit dem Swiss Web Award ausgezeichnet. Für die neue Version 3.0 wurden wir angefragt das CMSBOX-Team hinsichtlich User Experience Design zu unterstützen.

Vorgehen

Interaktive Wireframes mit Invision-Prototype
Interaktive Wireframes als Invision Prototyp

Interaktive Wireframes

Erste Iterationen des Interaktions-konzeptes fanden anhand von Wireframes statt, welche mit Hilfe eines Invision Prototyps interaktiv wurden. Somit konnte das ganze Projekt-Team die Idee der neuen Interaktion und Abläufe anhand von interaktiven Screens erleben, um diese auf die Machbarkeit zu überprüfen.

Funktionaler Prototyp

In einer weiteren Phase wurde das neue Konzept vom Entwicklungsteam der CMSBOX GMBH in eine Testinstallation integriert. Der funktionale Prototyp diente als Grundlage für die bevorstehenden Benutzertests. Denn nur mit einem qualitativ hochwertigen Funktions-Prototypen konnten wir die komplexen Interaktionen und Abläufe auf Effizienz und Verständnis testen.

cmsbox-user-testing
Remote User Test via Skype

User Testing

Nachdem das neue Interaktionskonzept als funktionaler Prototyp implementiert wurde, starteten wir mit den Benutzertests. Die Tests wurden Remote durchgeführt, dass heisst, die Benutzer haben via Skype am Test teilgenommen und mussten somit nicht extra nach Bern anreisen. Die Test-Szenarien wurden auf das schnelle Erfassen von Inhalten („Fast Content Creation“) ausgelegt. Die Erkenntnisse der Benutzertests waren sehr hilfreich und dienten als Grundlage für weitere Design-Iterationen, welche schlussendlich zum Endprodukt führten.


Das neue Interaktions-Konzept

Schnelle Inhaltserfassung

Das ganze Interaktionskonzept haben wir mit Fokus auf „fast content creation“ erstellt. Eine Website sollte möglichst schnell mit Inhalten befüllt werden können. Deshalb werden nun dem Autor die nötigen Optionen im Kontext zur Auswahl gezeigt. Ein Beispiel dafür ist, wenn ein Text editiert wird, wird die Toolbar erst dann angezeigt, wenn der Content Manager auch wirklich diese Aktion auslösen möchte. In diesem Fall, sobald der Text selektiert wird.

Inhalte hinzufügen

In der CMSBOX können verschiedene Inhaltselemente hinzugefügt werden. Diese stehen neu beim Aufbau der Seiten direkt im Inhaltsbereich zur Verfügung. Eine Schaltfläche „+“ öffnet die verschiedenen Möglichkeiten wiederum im Kontext der Website. Diese Optionen werden dem Benutzer da angezeigt, wo er die Inhalte auch erfasst. Somit verliert dieser keine unnötige Zeit, um den Mauszeiger zum Beispiel zur Seitenleiste zu bewegen, um dann die gewünschte Option auszuwählen.

Responsive Design

Die neue Version des Content Management Systems sollte den neusten Ansprüche der Webtechnologien und vor allem des Responsive Designs entsprechen. Kunden sollten die auf der CMSBOX basierten Websites in den verschiedenen Gerätegrössen innerhalb des CMS testen können, um das Bewusstsein der Autoren für die unterschiedlichen Endgeräte zu fördern. Deshalb gibt es neu einen sogenannten „Device Switch“, mit welchem die Webseite während dem Bearbeiten auf den verschiedenen Bildschirmgrössen getestet werden kann.

Weiter war der Anspruch, dass alle Interaktionen auf Touch-Bedienung ausgelegt werden, damit eine Website auch auf einem mobilen Gerät bearbeitet und somit von unterwegs einfach aktualisiert werden kann.

 

Detaillierte Funktionen der CMSBOX können auf der Website cmsbox.ch gefunden werden.

Art
Interaktionskonzept für CMSBOX

Kunde
CMSBOX GmbH

Leistungen
Design

Website
https://www.cmsbox.ch/cms

cmsbox screenshot features
Das Berufswahl Portal dargestellt in verschiedenen Devices um die Responsiveness zu zeigen.

Kanton Zürich, Bildungsdirektion Web Applikation

Zusammen mit der Bildungsdirektion Kanton Zürich, haben wir ein Portal zum Thema Berufswahl konzipiert und umgesetzt, welches neu auch öffentlich über Desktop und damit auch ausserhalb der Schule für ein breiteres Publikum wie Eltern, Jugendliche, Lehrpersonen sowie Berufsberater zugänglich ist. Das Portal läuft technisch über ein sogenanntes „Headless“-CMS, das sich Daten aus unterschiedlichen Quellen unabhängig …

hostettler autotechnik ag Website

Für autofit – eine Garagengruppe mit über 290 Garagen in der ganzen Schweiz verteilt – haben wir 2019 die neue Website umgesetzt und begleiten den Kunden auch weiterhin. Map für Garagen-Suche Benutzer können in der ganzen Schweiz oder Ihrem Umkreis nach geeigneten Garagen suchen und sehen direkt in der Karte alle verfügbaren Garagen, inkl. Kontaktmöglichkeiten …

Humanis AG Website

Seit über 30 Jahren bringt die Humanis AG Menschen und Firmen passend, gekonnt und nachhaltig zusammen. Wir haben dem Unternehmen ein neues Website-Design auf Basis des existierenden Corporate Designs erstellt und die Website mit WordPress und Custom Blocks für den Block-Editor (Gutenberg) umgesetzt.

schilling partners ag Website

schilling partners ist eines der etabliertesten Schweizer Executive-Search-Unternehmen mit mehr als 30 Jahren Erfahrung. Wir haben dem Unternehmen ein neues Website-Design auf Basis des existierenden Corporate Designs erstellt und die Website mit WordPress und Custom Blocks für den Block-Editor (Gutenberg) umgesetzt.

Die VBZ Traffic Media Produkte Übersicht

VBZ Traffic Media Ad Calculator

Wir haben die Webapplikation AdCalculator, welche wir bereits schon für die Verkehrsbetriebe der Städte Basel, Genf und Lausanne entwickelt haben, ausgebaut und den Bedürfnissen der VBZ angepasst. Nun kann die Buchung von Werbung auf den verschiedenen Werbeplattformen wie Bus, Tram, Publibike, etc. auch direkt bei der VBZ digital statt finden. Neu können Werbekunden mit dem …

Swisscom AG Microsite

Am 16. April 2019 hatte der Bauer Hanspeter Benz für einen Tag ein echtes Picasso-Gemälde bei sich im Stall hängen. Wie es dazu kam, und welche Rolle wir dabei gespielt haben, erzählen wir hier.

SWICA Blogs

Statt wie bisher ihre Geschäftskunden mit Broschüren und Flyer zu informieren, hat die SWICA Krankenversicherung sich entschieden, einen Blog zu starten. Wir durften sie dabei vom Start bis zum Launch im April 2018 und darüber hinaus begleiten.

SWICA Magazin

SWICA bringt 4 mal pro Jahr ihr Haus-eigenes Print-Magazin „aktuell“ raus und verteilt dieses an ihre Kunden. Um mit dem Magazin noch mehr Leser zu erreichen, haben wir die SWICA dabei unterstützt, das Magazin online zu bringen. Ähnlich wie beim Print-Magazin, gibt es jede Ausgabe als eine geschlossene Einheit. Dazu haben die Leser auf einem …

Swisscom Wettbewerb

Lange standen sie fast an jeder Ecke, spätestens seit dem Siegeszug des Handys fristen sie jedoch ein einsames Dasein: die Publifon-Telefonkabinen. Laufend werden die letzten verbliebenen Kabinen abgebaut, eine Ära geht zu Ende. Was war das Ziel des Projektes? Swisscom wollte den 10 letzten Telefonkabinen ein zweites Leben ermöglichen und sie kreativen Köpfen überlassen. In …

Kaufleuten Website & Payment Integration

Für das Kaufleuten in Zürich haben wir ihre Website einem kompletten Redesign mit Mobile-First Ansatz unterzogen. Zudem durften wir ihr Ticketing-System um eine Payment-Integration erweitern. Nun können Veranstaltungen nicht nur reserviert, sondern auch gleich online bezahlt werden.

klingler consultants Corporate Website

Für klingler consultants durften wir ihren ganzheitlichen Webauftritt neu gestalten und umsetzen. In Zusammenarbeit mit unserem Partner Fotograf Boris Baldinger ist die Bildsprache der Teambilder entstanden.

foodward Website für Weiterbildungen

Wir arbeiten bereits seit einigen Jahren mit foodward zusammen und hatten nun die Gelegenheit, ihre Website neu zu gestalten, um die Ausbildungsangebote und das Food-Netzwerk entsprechend zu präsentieren.