Agile User Interface Design – UID designs and implements user interfaces for optical inspection unit

The background

Carl Zeiss OIM GmbH is a subsidiary of Carl Zeiss AG. The company is active in the field of fully-automatic surface inspections in industrial production and develops optical measuring units for automated visual inspections. In June 2010, Zeiss OIM launched SurfMax, the first fully-automated quality testing unit for a variety of surfaces, e. g. metal, plastic or ceramic surfaces. 

The starting point

Q4Line, the software family integrated with SurfMax, has two user interfaces. Users can configure and control the inspection unit SurfMax via touch screen, inspection jobs can be created, handled and published via an office application. Together, UID and Carl Zeiss OIM developed a consistent usage concept for both user interfaces from scratch. During the development process, the main focus was on the end user. Another requirement was to keep in line with industrial norms, especially those for touch screen applications, as well as regulations for operating machine controls and manufacturing systems. 

The objectives

• Developing an innovative and motivating operating concept for the Q4Line software family
• Designing an interaction concept that focuses on relevant data and guides the user through the work process in the best possible way
• Working out a premium screen design that reflects the brand Carl Zeiss and integrates neatly into the existing product family
• Using and endorsing Scrum as an agile process model during the development phase
• Applying the Model-View-ViewModel pattern to develop an independent, component-based software

The procedure

During their joint kick-off meeting, Carl Zeiss OIM and UID defined Q4Line's user groups and their tasks. UID's usability engineers then developed a basic data structure and used it to build a detailed interaction concept. This concept was discussed and expanded by the project teams of both companies in regular design workshops. They documented recurring design solutions using interaction patterns for the modular structure of the software.

A mood board workshop was held to decide on the style of the design. Building on the results of this workshop., UID's designers and software engineers closely cooperated to work out the details of the graphic design so as to ensure its efficient technical implementation using WPF (Windows Presentation Foundation) within the .NET 4.0 project.

Carl Zeiss OIM and UID continuously expanded and optimized Q4Line using the basic operating concept and the screen design. What is so special about this project: Q4Line is developed using the agile process model Scrum throughout the project. UID's usability engineers, designers and software engineers are firmly integrated into the customer's software team. Every day, they coordinate their tasks in a so-called "Daily Scrum" to ensure more agile work and to identify problems at an early stage.

The challenge of such a process is that interaction design, screen design and software development run parallel. Before a "sprint" – a time-limited development cycle – the Product Owner defines the tasks to be implemented by the team during the sprint, considering the customer's point of view. Usability engineers and designers conceptualize and design the user interface needed for theses tasks, while both companies' software engineers implement them, using Model-View-ViewModel patterns to mark off user interface and business logic. This ensures that Q4Line's individual modules (touch screen and office application) access a common set of data but use different views reflecting specific requirements for each of the user interfaces.  

The result

The close and continuous cooperation between usability engineers, designers and software engineers helped to create a high-quality product. The second release finalized in December 2010 contains all relevant central functionality. Renowned companies are already considering using this system for automated visual inspections.

The usage concept is perfectly tailored to both user interfaces' usage contexts. The clear and consistent navigational structure guides the users through their work processes. The user interface is well-structured and highlights the most relevant information. The clear, functional screen design fortifies the quality and reliability of the brand Carl Zeiss. Moreover, it is perfectly aligned with the design of SurfMax's casing and makes the user's life easier with standard touch screens and self-explanatory icons. Visual effects illustrate the – otherwise invisible – inspection process and make it traceable. 

Project reference from 2011