Innovative app concept based on
neomorphism design

A novel app for iOS and Android that allows a smartphone based, efficient and user-friendly setup, control and monitoring of valves in complex plants. Based on the neomorphism design approach, real world metaphors are used to optimize usability and to allow a visual differentiation. A 6 step project approach that contained multiple user research phases was being used to make sure the app is tailormade based on the needs of the target group.

Mockup of application in iPhone

Context & Goal

The customer’s goal was to develop a novel app for iOS and Android that allows a smartphone based, efficient and user-friendly setup, control and monitoring of valves in complex plants. Until now, it was only possible to manually control the products, but as they often are barely reachable due to their installation situation and hardly identifiable due to the complexity of the plants, the app increases the overall equipment effectiveness. Additionally, it was important for the client to establish a differentiation from the competition by using a novel design approach.

Illustration for Goal
Illustration for Solution

Problem & Solution

The mission was to create an innovative user interface concept and to lead the design process holistically. By using novel design approaches, a differentiation to the competition should be established while offering an excellent usability to make sure the acceptance amongst the users is ensured. An extensive user survey was carried out to uncover the needs and the most important use cases for the app. Testing different design options ultimately led to the decision to use the so called neomorphism design which uses real world metaphors such as buttons appearing three dimensional. The result gives the user various options to customize the app to their needs and allow an experience that is tailored for the specific use cases.

Relevance of the experience

In the field of plant engineering, it is still uncommon to carry out a user research phase and the use of a neomorphism design approach which maximizes the intuitiveness of use by using real world metaphors is a novelty in that sector as well. Combining B2C based considerations, such as relevancy of the design for marketing purposes while optimizing the usability and customizability to ensure user acceptance with B2B relevant topics, particularly considering different use cases of the target group and considering the importance of a maximum overall efficiency by offering customization options while keeping a clear user guidance is an approach that hasn’t been found in other comparable projects yet.

Illustration for Experience
Illustration for design process

Design process

The target markets are plant construction companies and operators in the sectors food filling, industrial plants, and semiconductor production. There weren’t many insights available regarding the wishes and needs of the target group, but since they are crucial for the acceptance and thus for the success of the app, the extensive user research was carried out to uncover that information. After selecting the design direction, wireframes were created, and the planned functionality was verified by carrying out a usability test based on them. Following, the design was created, taking the iOS and Android human interface guidelines into account. The design was then handed over to a start-up that is responsible for the implementation.

Sustainability

The app reduces the deployment of service engineers because they don’t have to drive to the customer immediately when an error occurs. They can run an initial analysis of the problem by using in-app functionality and they even can give assistance to the plant worker though the app to a certain degree based on real-time readings. Many problems can be solved without an on-site visit, which reduces the CO2-emmissions. The app also shows imminent errors, to prevent them before they even happen. Additionally, documentation processes, setup instructions and product specifications are digitalized, which reduces the usage of paper. Thus, the app contributes to the corporate social responsibility of the client.

Illustration for Sustainability

Our process

By holistically approaching the project and making sure to implement user feedback into almost every step, we were able to create an experience that is tailormade for the industry while being innovative and modern when it comes to the design.

1

Definition of design direction

Initially, we compared flat design with neomorphism design with the client. Neomorphism design was then selected.

Illustration for Direction
2

User research

By asking future users of the app what could make their work more efficient and fun, we uncovered the necessary features.

Illustration for user research
3

Scribbles

We then scribbled all screens and features, while taking the user research results into account.

Illustration for Scribbles
4

Wireframes

The scribbles were then used to create wireframes that show every feature, user journey and options in detail.

Illustration for Wireframes
5

Wireframe verification

As the user centric approach has been the basis for this project, we then verified the wireframes with the target group and refined the features based on their feedback.

Illustration for Wireframe verification
6

Design

Ultimately, we designed the app for iOS and Android based on the neomorphism design, keeping the platform specific human interaction guidelines into account.

Illustration for Design