Admin Panel Desktop Design

PROJECT OVERVIEW

COMPANY:
Mana Farms

ROLE:
UI/UX-Designer

DURATION:
3 months (part time)

CONTEXT

Indoor Farming made easy

Mana Farms developed an indoor farming system for the hospitality and gastronomy industry. The farms, used by several German Fortune 500 companies, are analyzed and monitored by Mana. They need to update, observe, and adapt settings to the the farms to ensure optimal and smooth operations.

THE PROBLEM

The current tracking process couldn’t be done by every team member and required coding skills.

With their current setup only their CTO, the only team member with coding skills, was able to set up and manage the farms.

Besides that, there wasn’t a organized system, which empowered them to keep track of all the farms, their locations, and company owners. To simplify the process and empower other team members to have access, the company wanted to have an Admin Panel that kept everything in one place, and had a UI that every team member could intuitively use.

THE SOLUTION

Creating an Admin Panel, to simplify the tracking process and make it accessible for every team member.

Together with the stakeholder and the developer, I designed an Admin Panel for the company’s internal use.

It’s intuitive and self explaining, so that every employee will be able to work with it. For example, instead of modifying the farms through coding alone, they can now easily change the settings of every farm. The table format also gives a neat overview for each of the views and works intuitively as well.

Mockup

MVP
(Minimum Viable Product)

The given MVP was to design the “Farms” and “Owners” overview screens, with a product detail screen. And additionally to design a simple solution to add and remove users.

For the product detail screen the company needed a creative and intuitive UI solution for laying out and updating the settings of the Farms.

Key Features

  • Login/ Logout
  • Add new user/ remove user
  • Add new farm
  • Add new owner

User Flow Diagram

User Flow Diagram

THE PREVIOUS TRACKING SYSTEM

…required coding skills and was therefore only possible to use by a single team member.

To simplify the process, a new, more accessible, and intuitive solution was needed.

FIRST IDEAS & SKETCHES

First ideas were already drawn by the CTO of the company.

These gave me some insights on how some parts needed to be laid out, as well as, an understanding of the technology behind it.

Based on these examples, I drew some more sketches to find the best possible solution for both layout and functionality.

Low-Fidelity-Wireframes

I decided for a dashboard design, as this will give the project the best structure and also leaves room for future improvement and expansion, as the project was projected to grow more complex over time.

Low Fidelity Wireframes

Mid-Fidelity-Wireframes

TESTING & FEEDBACK IMPLEMENTATION

In this stage the design and it’s functionality went through a few rounds of testing and feedback implementation together with the stakeholder and the developer.

Mid Fidelity Wireframes

Style Guide

I applied the branding guidelines from the company and implemented the colours as well as the font and the buttons according their corporate identity.

I searched out and matched icons to how I interpreted their style, approving it with their Brand Marketing Owner, as they made the design more accessible and intuitive.

Style Guide

Layout and Grid Sytems

To ensure consistency and organization, I layed out my screen in 3 main sections:

  • Sidebar
  • Headerbar
  • Main content section


Throughout the whole screen, I applied an 8px grid system which helps maintaining consitency in spacing and structure.

Screenshot Grid System

High-Fidelity-Wireframes

TESTING & FEEDBACK IMPLEMENTATION

In the high fidelity stage, we again went through a few rounds of testing and design improvements together with the stakeholder and the developer.

The whole project evolved smoothly over time and was built together with the team.

High Fidelity Wireframes

Mockups

Mockup

NEXT STEPS

As soon as the developer is finishing coding the project, the Admin Panel will be used by the company internally. Together with the developer, I will get to give every team member an introduction to their new system.

This UI implementation will make the company’s process of working with and monitoring the devices much easier and more accessible and intuitive.

Changes will continue to be implemented while testing the project internally and future improvements will be done along the way.

For the next iteration we plan on implementing a dashboard screen for a detailed overview / snapshot of their products.

THANK YOU

Let’s connect

Privacy Policy

© 2025 Doreen Thurm