I led the design of an internal staff app for Council field workers to streamline their experience when creating and submitting their timesheets.

An early figma design of my new portfolio
An early figma design of my new portfolio

Overview

Nexus

I led the design and front-end efforts for Nexus, along with whiteboarding/wireframing, internal user testing/feedback, prototyping key features & interactions, contributing to presentations, and successfully delivered my work for the project with help from experienced developers & my Team lead.

Role

Product Designer & Front-end Developer

Timeframe

1-2 months

Team

Myself, Team Lead

Tools

Constraints

The council didn’t have a digital design system, and the only existing brand guidelines were a graphic design PDF — mostly focused on print materials, colours, and typography.

To create consistency and scalability, I began building a small UI library. This helped me translate the council’s print colours into digital palettes, define typographic hierarchy, and develop reusable components in Figma.

For the internal Nexus app, this mini design system became one of the most valuable parts of the process. It not only improved consistency across screens but also helped me learn how to structure components and variants properly — a skill I’ve carried into later projects.

Problem

The council currently relies on multiple disconnected systems to manage field workers’ timesheets and schedules. This creates a complex, inconsistent experience — especially for staff who need to log hours or update tasks while out in the field.

Over time, these overlapping systems have increased workload rather than reduced it. Staff need additional training to use them, IT teams spend more time troubleshooting, and payroll reviews become slower and more error-prone. Simplifying this process would save time, reduce confusion, and help teams focus more on their actual work instead of managing admin tools.

Solution

To simplify how field staff manage their timesheets, the focus was creating a unified, mobile-friendly interface that could replace the need for multiple external systems.

The goal was to design an experience that felt clean, direct, and consistent across devices. Each screen was designed to minimize steps and reduce the mental load of repetitive admin tasks.

Because the council didn’t have an existing design system, I built a small UI library in Figma for this project. This included reusable components, a colour palette adapted from the council’s print brand, and clear typographic hierarchy for accessibility and scalability. This not only helped maintain consistency across pages but could also be used as a foundation for future internal products.

The end result was a lightweight internal tool that aimed to make timesheet management more intuitive for staff, while reducing support overhead and training needs for the organization.

Wireframing

This was a long and exhaustive process to refine and understand how the app, its features, the problem it solves and how it all pieces together to be a streamlined user friendly experience.

I had about at this point 1 month left on my internship and so time was of the essence. I would talk with the Team lead about it to get a better understanding as the idea for this app was already established. Majority of my time was wireframing and understanding the flow for timesheets. There were many drawings on the whiteboard before exploring the app with a more solid understanding in Figma.

Internal Feedback

Getting the wireframes to a reasonable state I showed my progress in the daily standups and got individual feedback from others in the team.

From feedback I improved the main flows, direction and structure of the app which was starting to become more solid. Getting feedback not only from a user perspective but also from developers who could also talk to what's possible and what isn't with .NET MAUI was very insightful.

When reviewing timesheets they only need to see the current and previous month.

Do you need to see that a timesheet was successfully approved on the calendar?

Managers need to see who hasn't submitted a timesheet in the current cycle.

Job costing codes need to be displayed in the job page and on the timesheets.

Field workers need to be able to add allowances, jobs and breaks.

Final Design

Many rounds of feedback, iteration and this is how the app turned out. The core features below with examples of their intended interactions.

This is the phase where I did the most experimenting with color, learning, and understanding. Further refining the components and tweaks to the flows as I built prototypes and had people test specific flows etc.

Timesheet Screens

Core Feature

Users can manage their timesheets, add items to it and, submit for review.

Users can add items manually to their timesheet like allowances, breaks and jobs. They can also look at their previous days with the calendar component which was key to this page. Lastly the ability to of course submit their timesheets waiting for their manager/supervisor to review.

Add an item to their timesheet

Add an item to their timesheet
An early figma design of my new portfolio
An early figma design of my new portfolio

Expand calendar

Expand calendar
An early figma design of my new portfolio
An early figma design of my new portfolio

Submit a timesheet

Submit a timesheet
An early figma design of my new portfolio
An early figma design of my new portfolio

Manager/Admin Screens

Core Feature

Managers or supervisors could view who is unsubmitted, filter by status, and review multiple days approving or rejecting.

Admins have three screens and can open up the full timesheet if needed for closer review. They can easily tell who hasn't submitted their timesheet yet for whichever previous or current month. Finally when reviewing an employees timesheet/s they are provided with a miniature view for each submitted timesheet along with allowances and the approve or reject button. If need be the manager could click the timesheet to open the full view and time etc.

Manager approves a timesheet

Manager approves a timesheet
An early figma design of my new portfolio
An early figma design of my new portfolio

Filter timesheets by status

Filter timesheets by status
An early figma design of my new portfolio
An early figma design of my new portfolio
An early figma design of my new portfolio
An early figma design of my new portfolio

Completing Jobs

Concept

This would be another core feature, the user could understand the details of the job, if their working with anyone, directions to the job, fill out WHS forms, and any other additional information Council might need.

I understood the purpose of this feature but there was still some information I would need to truly understand how this would best suit the user. For one understanding who exactly would use it, the information they need to input etc would be needed to then understand the UI. So this would of most likely been in the final app, but at the time I was more so designing blind relying on my Team lead to best describe how it should work.

Job overview

Job overview
An early figma design of my new portfolio
An early figma design of my new portfolio

Prepare

Prepare
An early figma design of my new portfolio
An early figma design of my new portfolio

WHS

WHS
An early figma design of my new portfolio
An early figma design of my new portfolio

Homepage

Users are greeted with a weather card providing useful information, alerts in their area, and a list of jobs, and quicklinks for important information.

The weather card information is very useful for those working outside, understanding how the weather will be in the future and planning their jobs around such. The alerts here are just placeholder but would or could display information like a dangerous animal or person in the area. Below the jobs list is also a quick link section which leads to important information within the app or to external Council sites.

An early figma design of my new portfolio
An early figma design of my new portfolio

Outcome

The final design for Nexus was presented to the executive leadership team, including the CEO and Mayor. While the app is planned for implementation in 2026, my work focused on shaping the design direction, building its core user flows, and creating a scalable foundation for possible future use across Council.

Throughout the project, I collaborated closely with developers, presenting progress regularly and refining the design based on feedback and technical input. This experience taught me how to balance real-world constraints — like limited resources and existing systems — with creating a product that’s still intuitive and adaptable.

Even though my internship ended before launch, the project gave me valuable hands-on experience designing an internal tool from the ground up, and contributing something that could make a lasting impact within the organisation.

ALL RIGHTS RESERVED © 2025 MITCHELL ZELLER
ALL RIGHTS RESERVED © 2025 MITCHELL ZELLER
ALL RIGHTS RESERVED © 2025 MITCHELL ZELLER

Create a free website with Framer, the website builder loved by startups, designers and agencies.