UX for CMSBOX

Interaction Concept for a CMS Editor

We were able to work on the interaction concept for the new version of the Content Management System “CMSBOX” run by a Swiss Company based in Bern.

For over 10 years CMSBOX‘s innovative Content Management System has been providing inline editing. Which means that you can edit the website directly in the frontend, without having to switch to the edit mode “backend” of the system. The CMSBOX-Team won the Swiss Web Award back in 2009 for this kind of new writing experience. For Version 3.0 we were asked to help specifically with the User Experience Design.

How we started

Interaktive Wireframes mit Invision-Prototype
Interaktive Wireframes with an Invision Prototype

Interactive Wireframes

Our first iterations of the interaction concept were based on wireframes, which we turned into interactive screens with the help of an Invision prototype. This way, the entire project team was able to experience the idea of the new interaction concept.

 

 

Functional Prototype

The new concept was then integrated into a cms test installation where the functions for the new interactions where developed. With this high-quality functional prototype, we were able to test the complex interactions on real users to evaluate their understanding.

cmsbox-user-testing
Remote User Test via Skype

User Testing

The user tests were made remotely, which means that the test users took part in the test via Skype and therefore, did not have to travel to Bern. The test scenarios were designed for fast content creation. The findings of the user tests were very helpful and served as the basis for further design iterations, which ultimately led to the final product.


What’s the new interaction concept?

Fast content creation

We created the new interaction concept with a focus on “fast content creation”. The website should be filled with content as quickly as possible. Therefore, the author will now be shown the necessary options in the context of the selection. An example of this is when a text is edited, the toolbar would not be displayed until the toolbar is needed. In this case, as soon as the text is selected.

Adding content

When building the pages, the content elements are now available directly in the content area. Just a click away (button “+”) placed right next to the content area. These options are displayed only when it’s needed, as well.

Responsive Design

The new version of the content management system should meet the latest demands of web technologies and above all responsive design. Customers should be able to test the CMSBOX-based websites in the various device sizes within the CMS to increase the authors’ awareness of the different devices. Therefore, there is a new “Device Switch”, with which the website can be tested while editing on the different screen sizes (Mobile, Tablet, Desktop).

Next was the claim that all interactions are designed for touch operation, so that a website can also be edited on a mobile device and easily updated while on the move.

 

Detailed functions of the CMSBOX can be found on the website cmsbox.ch.

Type
Interaction concept for a swiss content managment tool

Client
CMSBOX GmbH

Services
Design, User-Tests

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

cmsbox-editor-feature

SWICA Blogs

Instead of only keeping their business customers up to date with brochures and flyers, SWICA health insurance decided to start a blog. We were able to support them from the start to the launch in April 2018 and continue to do so.

SWICA Magazin

SWICA publishes four times a year their own printed magazine and shares them to their customers. To be able to reach more people with their magazine, we supported SWICA to bring their magazine online. Similar to the print version each issue is a single unit. On each article the reader is able to access the …

screenshot-swisscom-publifon-overview

Swisscom Competition

You could see them almost at every corner, but since the rise of the cell phone, there is no more need for their existence: the Publifon telephone booths. The last remaining booths are being dismantled, the telephone booth era in Switzerland is coming to an end. What was the goal? Swisscom wanted to give the …

Kaufleuten Website & Payment Integration

For our client Kaufleuten based in Zurich, we redesigned their website with a mobile first approach. In addition, we were allowed to expand their ticketing system to include a payment integration. Now events can not only be reserved but also paid online.

klingler consultants Corporate Website

For klingler consultants we were able to redesign and implement their holistic website. In collaboration with our partner photographer Boris Baldinger, the imagery of the team pictures was created.

MAAG Music & Arts AG Event-Websites

For MAAG, we not only redesigned and developed their new main site bymaag.ch, but also all of their show websites which include for example the popular swiss musical “Ewigi Liebi”.

foodward Website for Education

We have already been working with foodward for some years now and had the pleasure to redesigning their website to improve the presentation of their course offers and their food network.

Swiss Moving Media Website

To deliver their advertising clients a whole new experience in booking ads, we built a WordPress based web application. Advertisers now have the chance to book their ads with just one click for four cities: Genève, Basel, Lausanne, and Zurich.

Tageswoche Artikel Detail

TagesWoche Local news platform

Together with Adrian Zumbrunnen, we supported the TagesWoche team with the redesign of the news platform tageswoche.ch in terms of concept design.

SBB CFF FSS Magazine

The Blog of the Swiss Federal Railways has been around for quite some time. Since our first redesign in 2013, we continued to provide our services for the editorial team.

Moving Media Website & Ad Calculator

To deliver their advertising clients a whole new experience in booking ads, we built a WordPress based web application. Advertisers now get a preview of their ads on the buses and trams.

Hotelplan Travel Magazine

Together with the travel agency Hotelplan we designed and developed their new travel blog. We match the travel stories with their current travel offers every hour using their custom API.