Web UX Design: Internal KPI and Search System

Employee Portal for Manufacturing Company

Designing a User Experience Architecture mixed with Metric Analyzation


For this project, I was tasked with being the UX Architect on an important internal dashboard. Our client had an outdated system of inputing and searching for key performance indicators and metrics that were collected at manufacturing sites around the world. Our design team was tasked with the creation of this dashboard system, and I specifically was tasked with drilling down through these graphs in a logical search pattern to find metrics that were valuable to users.

These mockups and PDF were made in Adobe Illustrator, which were eventually made into a clickable prototype in Adobe XD. Because this was internal client work I have stripped all visual stylings and client information, and input mock data/graphs/names where it is necessary. The dashboard can be broken up into six logical areas: Personal Dashboard, Search Patterns, Metric Drill Downs, Threaded Alerts, Report Views, and Module Definition.


The full PDF of the mockup can be found here. Below are key examples from the mockups that provide a good enough outline to understand the context of the document.

Personal Dashboard

This personal dashboard can be created and accessed by four different persona types: Executive, Reviewer, System Admin, and Data Entry. Through out our discovery process we interviewed multiple people in the company with these positions. Judging by their level within the company, they are privy to certain types of information collection and input. The dashboard seen below is the Executive level dashboard, and this persona has the ability to review all data at a global level.

1 Artboard

Search Pattern

This is an example of the search results page with multiple key words and indicators searched. The results return both bundled dashboards and individual metrics that a person may be able to find, including the type of graphs available in the search which can limit results further.

2 Artboard

Metrics Drill Down

This drill down system was one of the biggest undertakings of the project for myself, and I worked closely with the data science team in order to organize it accordingly. Below you can see an example of the drill down at a site level for percent change within a year.

3 Artboard

This structure was created from the hard work that I and the data science team found in our discovery of the system in current use by the company. We gathered all the potential metrics that were measured at the manufacturing level and how data reviewers could manipulate that data to present a graph system in a certain way. If you click on the images below you can see a rough mockup of our final ‘drill down formula’.

Threaded Alerts

There are certain times problems arise in a global industry that affect manufacturing output and progress. Because of this, it is important to have a solid line of communication within the web application to show how that gets resolved. This threaded alert system can be sent out to multiple users, and can provide a valuable system of contact.

4 Artboard

Report Views

For each global site, there is an individual dashboard page that can be seen from a high-level perspective. This global map can show at a glance where problems can occur and track how the company is doing from a geographical standpoint.

5 Artboard

Module Definition

Lastly, there is module definition within the main page of the dashboard. This allows a user to customize what they see when they enter the platform, and also updates with real-time data entered into the backend system. This provides a valuable decrease in time and effort, especially for those who only enter the system once a month to check in on data.

6 Artboard

Final Result


The project was received well by the client with huge success and is in stages of development. From a design perspective, I think this system is both visually appealing and works appropriately with their analytics demands. This will help the company in future review processes and track their goals of measuring the highs and lows of their product output. However, there were definitely struggles on the design and discovery phase of this project. It was not easy working with the data scientists and data discovery team, and I had to expand my role into understanding corporate manufacturing processes I wasn’t aware of previously. In the future I hope to dive deeper into designing for the major differences between persona roles and their abilities.

The full PDF of the mockup can be found here: Internal KPI and Search System




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s