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
graphical user interface, text, application, chat or text message

VBZ Online Website

VBZonline is a unique magazine that tells captivating and informative stories about everyday life in Zurich’s transportation system and its actors. It focuses on topics such as sustainable lifestyles, urban living, mobility, and much more.Initial situationIn early 2022, we took over the existing website without making any changes and continuously maintained it. Then, in the …

Ringier Advertising Website & Web-App

73 brands, over 100 advertising formats, millions of users. Ringier Advertising markets the media titles and marketplaces with national appeal of Ringier, Ringier Axel Springer and Swisscom (bluenews, local.ch, search.ch) as well as other partners. Ringier Advertising is the contact for the advertising customers of Ringier AG.They support advertising agencies, major customers and also NGOs …

graphical user interface, application

smartportrait Website

smartportrait.io is a platform for high-quality and consistent employee portraits. An experienced photo editing team transforms cell phone photos into stunning studio quality. Customization and top-notch editing create a diverse portrait library for numerous uses.Smartportrait was launched by co-founders Boris and Johannes. Nicole completes the team and brings in her content expertise. Together, they are …

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.

Screenshot of the registration onboarding for the HIN Client

Health Info Net (HIN) Application

Health Info Net AG (HIN) protects sensitive patient data in the digital world and is the standard for secure communication in the Swiss healthcare sector. We support HIN on an ongoing basis as a digital agency with user experience, user interface design and programming work.

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 …

We use cookies to provide the best possible service to you. By continuing to use this website, you agree to our privacy policy.
More