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
Screenshot of Boris Baldinger Homepage

Boris Baldinger Photography website

Boris Baldinger is a specialist for personal branding and business photography. With him, people become personalities, heads of character become brands. In his photos, he reflects what someone stands for and works for. However, his original website from 2010 no longer reflected his open character and his highly qualified work. By relaunching the website, we …

Content Hub Migros Bank

Migros Bank Online Magazine & Content Hub

The corporate design of Migros Bank has been rebranded and we have adapted the current blog and the Content Hub accordingly. Before, there was mainly green and white, but now there is a variety of cheerful colours.We have been supporting the content marketing team of Migros Bank since 2015. During this time, we have implemented …

How.fm Landing Page

how.fm UX, Design & Development

how.fm provides digital services in the field of training software for warehouse staff. The software documents processes digitally and leads to an automated training of employees. Our team in Germany supports how.fm with design and development work around their websites, campaigns and landing pages.how.fm’s software documents processes digitally and leads to automated employee training. The …

Various Artists - The Ruins of the Eight Hour Workday

Pro Helvetia Online Art Magazine

In order to reach the target group of cultural professionals, a website with special features and surprising elements was needed. A unique online magazine with numerous animations and elaborate styles. The brand new Pro Helvetia magazine – V/A – Various Artists – is a true experience.

SOMEDIA Press AG Konzept & UX Design für das Online News Portal

For a news portal, it is particularly important that readers can inform themselves across various screen sizes. Clear reduced design, good readability, as well as great user flow across various devices are the focus. This was the second time that we had the opportunity to contribute to the relaunch of the regional news portal of …

Pro Helvetia Website

We implemented the digital book platform in close cooperation with the design agency Velvet and our long-standing customer Pro Helvetia. A new, individual WordPress website was created, which is located within the general Pro Helvetia multisite.

hostettler autotechnik ag Website

In order to support autofit – a garage network with over 290 car garages distributed throughout Switzerland – and their partners, we have given their websites a complete makeover and developed new functions to improve their processes.

Kanton Zürich, Bildungsdirektion Web Applikation

Together with the Education Directorate Canton of Zurich, we have designed and implemented a web application on the subject of career choice, which is now publicly accessible via the desktop and therefore for a broader audience such as parents, teachers and career mentors. The portal runs technically via a so-called “headless” -CMS, which collects data …

VBZ Traffic Media Ad Calculator

To enable advertising customers of the Zurich public transport (VBZ) to plan their advertising campaigns easily and online, we have designed and developed an online calculator for advertisement on trams and buses.Initial situationThe trams and buses in Zurich, Switzerland are in heavy use. So it makes sense to use them for advertising purposes. Of course …

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

Digital publications have become an important part of a marketing strategy. Since we have a great deal of experience in designing and implementing holistic solutions for our clients online communication, the insurance company SWICA commissioned us to digitally bring their customer magazine, which had previously only been available in print, to the market.The contents of …

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 last 10 …

Get in touch with us

info@required.com