Jan Früchtl UX Designer at FastBill.

Motus Webapp

A fully responsive web application for an overall logistic software solution. The focus of motus is a fast, safe, and more transparent logistic process, and the web application makes managing this super easy.

A box profile page which a information sidebar, as well as a tracking and quick view area.

Overview

Motus is an industry and logistics software platform with a focus on fast, safe, and more transparent logistic processes. One key area of motus is the warehouse product, which is currently under active development. The motus warehouse web application is part of the whole motus ecosystem and plays a huge role in being an end-to-end logistics software solution.

This web application is primarily focused on managing different kinds of master records in order to enhance the entire logistics process. The user can control all sorts of various data and streamline it for faster and more reliable results.

The challenge while designing and developing the motus warehouse has been the focus on an entirely responsive web experience. The motus motto is "Logistics out of Your Pocket," which the whole team is working diligently to fulfill. Besides the fully responsive web experience, the design team has always been keen on topics like accessibility (e.g., color blindness) and tries to be as forehanded as possible to account for any problematic lighting or device situations during standard usage.

Company

REICHHART digital logistics GmbH

Project Duration

08/2016 - 04/2018

Role

Design & Fontend Development

My Role

Since the start of the motus warehouse project in August 2016, I've been part of the product development team as a UI/UX designer. My primary focus during the web application project has been conceptual and visual design. In close communication with our founders, our PM, and other stakeholders, I built the user interface in a component-based manner. The primary goal of this approach was to create a flexible and robust foundation to support a flexible and fast development cycle. I also participated in plannings and conceptual meetings that exceed the boundaries of only visual design work.

Furthermore, I was also responsible for developing the frontend part of this web application for the first year. I built all the groundwork and extracted small frontend libraries for a faster development process.

The Challenge

The logistics and industry software market tends to be slow and conservative and mainly offers isolated application solutions. The motus approach is the complete opposite and tries to be as modular and user-focused as possible.

The principal users of this software are under immense stress and have to work quickly. Tasks, like editing master records, overlooking statistics, and composing reports, have to be done in a fast and straightforward way with a high level of error resistance. In the end, the overall market segment, challenging warehouse environments, older devices, and a conservative sector make designing and developing motus Warehouse a demanding task.

The Approach

To handle all these challenges successfully, we built different prototypes and kept a close communication line to possible future customers to get their feedback early on. From day one, our goal has been developing an overall standard logistics software solution, so real life feedback was crucial.

During the primary design process, we concluded that a component-based approach would benefit our design and development process. We also wanted to stack different components together to free up resources and speed up our overall development process. That's the main reason why our whole web frontend is component based and follows ideas like BEM and Functional CSS.

On the visual side of things, nearly every component has its base on a so-called "Card Component." This philosophy is highly inspired by Google's Material Design approach and hugely helped us while designing the overall structure of motus.

Detailed Design

I was responsible for the whole design process from start to finish and was also implementing my designs as a frontend developer during the first year. During this time, I tried to move to a component-based approach by breaking every single component down to its minimum atom. Afterwards, I built a small component library in Sketch and implemented everything in our Patternlab instance.

This component-based approach and the specific rules and suggestions from Patternlab made the whole process more enjoyable and fast. Patternlab follows the idea of Atomic Design and helps encapsulate every component down to the "atomic level" as the minimum. Using Patternlab as a frontend development tool helped us a very great deal in the beginning and also made life easier for our developers.

A box profile page which a information sidebar, as well as a tracking and quick view area.

Box Profile

The box profile page is the ideal way of seeing all the relevant stats in one individual box inside your warehouse. Besides that, the user can also view and analyze the overall tracking throughout the lifecycle of the box.

Simple group view with a table pagination.

Article Groups

In motus, most items are grouped in folders, as you might know from your personal computer. This page is a simple overview of some article groups, which are mostly there for your organizational benefits.

Web view of the area "create page" displaying an inline form error.

Add New Area - Error

A user can create and edit every object himself. This screen shows a simple creation flow with a caught error, as well as it's proper error message.

Application Structure

The primary focus while developing the motus warehouse web application has been master data creation and content management. The web application is the central hub for all logistics management overviews. Users will open the app to manage areas, plots, or orders in all kinds of different ways and situations, just as they would on any smartphone while on the go or at their desks on a standard PC. Besides the management part, motus warehouse is also the leading resource for detailed information about every item and detailed histories such as tracking information and upcoming transports.

Besides the overall structure, the visual design is very component-based and firmly integrates the metaphor of card-based design. Every component is made out of a card and is structured unambiguously. Visually, nearly everything in this application is based on grayscale values. Colors are very rare. They are only used in particular instances such as in action buttons, icons, and error/success statements. The main reason behind that is the overall aim for a modest and supportive software that focuses on getting the job done.

Furthermore, we decided early on that icons can make a difference in communicating to our users. Icons do not make for the only right answer, but in combination with colors and labels, they can markedly enhance the overall experience and make different actions and components easier to understand. Therefore, we decided to build our icon library to have full control over the icon set and our style. In this specific field, it was also challenging to find the right icons for particular tasks, so this approach seemed reasonable and prescient.

Area profile page with incoming and outgoing box statuses.

Area Profile

The area profile page presents all relevant data that corresponds to this selected area. It gives the user insights about boxes and their specific states. Besides that, a user can also print particular area labels directly from inside the profile page.

Web view of the contact "create page".

Add Contact

Another simple create page with a specific segmented controls element.

Responsive Design

One huge challenge during the development was our goal to aim for a fully responsive web experience. We not only had to make it work on different kinds of desktop machines and browsers but also on basically every device in any shape and form.

Admittedly, this decision slowed us down in some instances, but in the grand scheme of things, we came to some pretty meaningful solutions that made components like the secondary navigation usable throughout all devices regardless of the number of buttons inside.

We also went in the right direction to develop a robust and future-oriented solution. With a working and responsive web experience, motus can adapt to nearly any change in the web space in basically no time and is usable in almost every situation. That is not only a fun gimmick, but also more or less a new standard in the industry with a massive benefit for the user.

A simple group view this a specific notification component included.
An example of a empty states page.
Mobile view of the box detail page with a open secondary menu.
The user login page.

What I’ve Learned

The first step of building motus warehouse is done. Today, motus is a small logistics solution that is going to grow rapidly over the following months and years. The main takeaway for me over the past one and a half years was the component-based approach while designing and developing UIs. In its current shape and form, our method to this topic is not finalized and could be hugely improved. Today, when we are building UIs, our components make the whole process faster and more manageable during every single phase.

Another convenient habit I have adopted is to test early and often. Sometimes it feels intimidating, but in the end, early and regular feedback was helping immensely. Nevertheless, group feedback should be managed and mainly happen in a safe space with people from diverse backgrounds to hear different opinions. Specific processes and meetings like "Design Critiques" with designers, developers, PMs, and other stakeholders to diversify the audience can be a great feedback booster.

As an overall summary, I would say that component-based design and development are here to stay and can boost productivity and speed while helping with more flexible and less error-prone visual designs. For design feedback, it can be beneficial to follow specific processes like "Design Critiques" in a regular manner.