How A12 works – From models to applications

Interface and interaction design usually take up a lot of time and effort in individual software projects. Plasma Design by mgm aims at speeding up the process. It is inspired by design languages like Google’s Material, but focuses specifically on business applications.

In every individual software project there comes a time when you get afflicted by a sense of déjà vu. The requirements look familiar. Tasks and discussions revolve around questions that have been answered in other projects. You get the feeling of having done it all before. As it turns out, this phenomenon of constantly reinventing the wheel does not only occur in software engineering, but also in the design and layout of user interfaces.

In which way does the application display data? Which colors and fonts should be used? What about the navigation layout, the design of buttons or boxes for content? In classical individual software projects, these aspects are negotiated with the customer. The design is more or less done from scratch again and again. This takes up half a year in the best case. “A core idea of A12 is to concentrate on the customer’s business requirements – not on design specifics”, explains Dietmar Schmidt, design expert at mgm, “theplasma-multidevicerefore we started to conceptualize a basic layout that should work in any project”. The idea of Plasma Design was born – a coherent design concept for business applications.

A neutral design for business software

What kind of layout and user interface does a business application really need? The mgm experts started to answer this question by reflecting about previous projects – mainly large-scale software projects in the insurance industry, the public sector and e-commerce. First of all, business applications are driven by function and by the necessity of performing certain tasks. It is more important to give users a reliable tool than to dazzle them with fancy images or flashy design effects. Functional considerations are more important than aesthetic considerations – which is not to say that a reduced, functional design cannot be appealing and elegant in a puristic fashion.

Second of all, most business applications share many structural elements. “Based on our experience from previous projects, we identified two major areas: forms and overviews”, says Schmidt. In almost every business software you have to display aggregated data in a clear form, e.g. in tables, lists or charts. These overviews are generally used for providing summaries and supporting decision making or for selecting data sets for detailed editing. Detailed editing is usually done in forms – the dominant method of choice when it comes to data input from users. Since forms in business applications may get very large and complex with nested sections, defining a solid layout for any case imaginable is a challenging task.

Multi-device support with Desktop-first

Another preliminary step of conceptualizing Plasma Design has been the analysis of existing frameworks and design languages. There is Bootstrap from Twitter, Metro from Microsoft and Material from Google. These frameworks offer elaborate and well thought out concepts for graphical design and definitions about how control elements should behave in interactions. Especially Material Design has been received as a solid foundation by the mgm experts, except for a few aspects. “Everyone agrees that mobile-first characterizes the future of computing”, says Schmidt, “But it doesn’t characterize the present when it comes to business applications. We still live in the world of the Desktop.” Plasma Design therefore puts special emphasis on large screens while ensuring responsiveness and multi-device support.

On a conceptual level, Plasma Design is based on Material Design. But in order to focus on Desktop-based web-applications, a few minor tweaks have been applied – some fonts have been made smaller and some spacings have been narrowed, etc. The UI/UX team of mgm has started to implement the concepts of Plasma successively. “We have refined and implemented the design and interaction concepts for forms and overviews already”, says Viet Nguyen, who manages the A12 UI/UX work at mgm’s branch in Leipzig. “Technically, Plasma Design is provided as an npm-package for frontend developers. In putting the Plasma concepts into practice we rely on the Stylus CSS language and the BEM methodology”.

Benefits for projects and future plans

So, what is the main benefit for projects using Plasma Design? In a nutshell: speed. Projects can start immediately with a design that is optimized for business applications. No individual design and interaction specifications are required. Prototypes which represent actual applications can be built from day one – which is one of the core ideas of the A12 platform. If customers like the design, they can keep it and use it in production. If they are not satisfied with its neutral, puristic aesthetics an individual design can still be developed and used. This can be done by mgm or an agency for example. The main point is that a solid design for the business application in question is available from the start which drastically speeds up application development and prototyping.

While the current version of Plasma Design already covers the most important aspects of business applications, it is constantly developed further – both technically and conceptually. “In the future, we’d like to introduce more capabilities for customization”, Schmidt explains, “You can tweak the design simply by adjusting sliders or by choosing between predefined layouts from a list”. Another field of work concerns the interplay of different content areas. How do different content areas relate to each other? What happens if one of these areas is resized? Or when data is changed in one content area and impacts other content areas? Can you specify rules or patterns for the interaction between these larger parts that constitute applications? These questions go beyond what is typically understood as UI/UX design, but they might lead to new modular approaches in application design and new insights about the building blocks that define today’s frontends.