Title – „Concept, design and prototypical implementation of an intranet application for the administration of industrial tools"
show interactive prototype ➞
I wrote my bachelor's thesis in the context of UI/UX Design in the developement department of the company Kesseböhmer which is a big manufacturer in the field of metal processing, storefixtures and automotive. For the fast and economical processing of raw materials and metal products there are more than 3000 industrial tools. Engineers can look them up as data sheets in the intranet where they are sorted just in an alphabetical order. My task was to prepare concepts and designs for an intranet application that makes it easier and more convenient to find these industrial tools in the data base. I walked through different phases of my project: Project launch, learning of the complex technical topic, requirements analysis, data collection, conceptional thoughts and after all the interactive, prototypical implementation. I documented the whole process in my bachelor's thesis. The following poster is a quick summary of important project facts.
Because industrial-tools are most of the time custom-made there are quiet high developement costs. Certainly the already existing tools can be reused for frequently used parts. Unfortunately the tools are just sorted roughly into different categories and have only counting numbers. Over the years the structure and the overview of the data base was lost. Therefore unnecessary long searches and expensive new developements of tools are the result. A user-friendly intranet application is needed by the employees to look for tools that are already in stock and to gain information about them. The goal was to make the everyday life of the employees easier and to save a lot of costs for the developement of new industrial tools.
It was a special challenge for me to learn about the technical details of the topic. Regular meetings of the whole developement department and countless talks with professionals in the field of construction, tooling and IT were really helpul. Besides I walked through the factory and gathered a lot of data about the industrial tools I could find. For project mangement reasons I made a structure plan and a timetable for my project (see below). Additionally I had reagular talks with the head of the developement department and the team lead of the work preparation department. After the first brainstormings and mind-maps I designed a questionnaire for getting useful information in expert interviews. These were the cornerstone of my requirements analysis and for designing the possible use cases (see below). I collected the information in a specification book. Target groups and delimination criteria were also part of it. All in all I designed a lot of concept visualizations for my researches (see below).
Designing User Interfaces it’s important to have a user centered working method. Therefore it’s helpful to regularly deal with the user needs during the design process. Through the expert interviews, talks with the heads of the different departments and especially through the exchange with the future users of the intranet application in the development department, different user needs have been evaluated, e.g.:
- as a user, instead of a loose collection, I wand to be able to search for the industrial tools by different criteria and find them quickly
- I want to get an overview of the structure of the data base
- statsitics and various additional information about the industrial tools is helpful inside the interface
- photos, technical drawings and locations are important information details for evaluating the reuse of an industrial tool
- as a user, I want to get an overview of the cost of industrial tools in the past
For considering these user needs in the best possible way, I took care of desiging a clear structured interface which organizes the high amount of information and shows them in a dynamic and flexible way by using the cards as a design element.
At first I did a few scribbles with a fineliner to find the layout for the future intranet. I started with a blank piece of paper to be independent of the old design and to give the interface of the new industrial-tools-classification a modern and user-friendly UI Design. It was important for me to have clear navigation areas and an easy divisable area for the main content.
After that I went through different iteration phases with the design-tool Adobe XD until I had a high-fidelity-prototype. In the top area the user is able the navigation in the context of the whole intranet. On the left side it is possible to see the relevant content of the department. Talking about industrial tools we are in the filed of the developement department. The view is collabsible to have more space for experienced users. A breadcrumb-navigation gives the user a good way to orientate in the current process.
As a user I want to see all important information at a glance. The main menu is a dashboard with important data and facts, e.g. statistics for the reuse of tools, the developement costs of tool and other economical factors.
In the menu for searching tools the user can comfortably click through the structure of the different types of tools. Entering further parameters you get the found proposals.
Besides he can find detailed information about the different categories of tools on a special site and add new industrial-tools.
For giving the interface a high flexibility and a clear structure, the layout of the dashboard and the detail pages of the tools contain socalled 'cards' as design elements. They fit perfectly to the content and show things like quick-infos, photos of the tools, tables of linked production parts or statistics of costs (watch video below).
Kurzvideo des interaktiven Prototyps
Regarding the company logo I slightly adjusted the graphic to better fit into the interface and look simplier. Talking about colors I orientated the design at the corporate identity but made the green lighter, more saturated and turned it more into a turquoise. Therefore it has a more modern and innovative character. Other elements are designed in a dark grey and white. To have a few highlights for special categories of industrial tools I'm using some accent colors. The returning gradient style gives the interface depth and a modern look. For a good readability I'm using the sans-serif font 'Roboto / Roboto Condensed' which is available for free via google fonts. My own icon-set of line-icons fits perfectly into the minimalistic interface. With the 'prototype-function' of Adobe XD I was able to connect the different screens and made it possible to experience the 'look & feel' of the future intranet application.
The interactive prototyp and the concepts of my bachelor's project are a good and extensive basis for the future implementation. I received a great feedback for my detailed concepts and modern and structured design works. With the implemenation a high amount of costs and ressources could be saved and the usability of the search for industrial-tools could be improved. It was really challenging and interesting to design an application in a complex and technical topic like this. Thanks to the project I was able to enhance my skills in the fields of project management, requierements analysis, conception, prototyping and UI/UX Design.
show interactive prototype ➞