Finished screens for XperiDo 4, which has been rebranded to Xpertdoc Smart Flows. XperiDo is a document generation product. You can access your templates, data and settings from the online Project Console.

The same theme persists throughout all screens: soft colors, the typical XperiDo blue and cool greys. The design's main objective was to support the user in his actions, guide him through the application and provide a sense of consistency across screens.

You'll see the same colors and icons pop up everywhere. For instance, the selected/hover colors (and check mark) are present in both the list view (above) and the data set builder:

The use of one color line (blues) meant that we could use colors for other associations. Red colors for warnings, green for success messages, as people would expect:

The reporting screen shows plenty of filterable metrics with relevant information about your project:

The login screen was designed to be unique and interesting to look at, without it being too defined. This was done on purpose so that the viewer would not get bored or tired of the same images after a while:

The square is really the most recognizable XperiDo shape, but I made others to keep it fresh. The plan was to randomly show one of these backgrounds:

The most complex screens belong to the flow builder. This is the heart of the product and takes some time to understand - it was built for functionality, and there's a lot of it:

Yellow indicates blocks that are linked according to the links set up on the right, in the Inspector. The yellow created a nice contrast with the blue and it stands out immediately, which helps you see how your flow is structured quickly.

XperiDo 4 uses a lot of icons to convey meaning and help the user feel confident in their decisions. These one-color icons have to work on a small scale, and need to be unique enough yet feel as if they belong in the same software:

I colored the status icons to show which group they belong to. Red means your flow is completely stopped without repair, blue means it's on hold, yellow means it requires user input etc:

For all the care I placed in both the icon and screen designs, I always kept in mind that the design has a supporting role: ease-of-use and guiding the user were always at the front. Most screens are fairly devoid of heavy design elements as I wanted to keep the focus on the action and not distract the user:

The screens that could feature more decorative elements are a nice change from the more functional screens, and I'm glad we found a nice balance between the two. This keeps the application fresh and nice to look at, while it remains easy to use when more focus on the action is required.

All in all, a great project to work on that required a variety of design skills to make it work well.