Nexus
Internal staff app to start, complete jobs, submit and review timesheets.
UI/UX, App, Mobile Design
Introduction
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.
2025
1-2 months
Lead Product Designer & Front-end Developer
Myself, Team lead, Dev team
Overview
What is Nexus?
Nexus is an internal staff app designed to simplify and centralize how Field workers start, complete jobs and submit their timesheets. Managers can review submitted timesheets from employees and approve or reject.
Problem
Council currently utilizes multiple systems to manage field workers timesheets, leading to bloated and complex software for people to use when out in the field and at City hall.
It's important to solve this problem as the cost far outweighs the convenience of using external software and systems. Training, IT support, hours spent reviewing payroll, and more can be refined, streamlined and burden lessened.
Wireframing
With a month left on my internship, I started to do a lot of exploring in how this app might look and function.
I started with using the whiteboard to start creating screens to basically convey my understanding of the app and then how it would function. I would then ask the Team lead to give feedback and his thoughts on what I should improve or look at next. The Timesheet & Jobs flow was the most important to get created first.
Internal User Testing
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 need to see the current and previous month.
Team lead
Do you need to see that a timesheet was successfully approved on the calendar?
DevOps Engineer
Managers need to see who hasn't submitted a timesheet in the current cycle.
Team lead
Job costing codes need to be displayed in the job page and on the timesheets.
Team lead
Field workers need to be able to add allowances, jobs and breaks to their timesheets.
Team lead
After internally testing I've refined the wireframes and simplified where necessary.
Following the feedback on a few early wireframes where I was still building an understanding of the app the pages started to become much more focused. The homepage displays the weather and UV index, jobs list, and quick links. The job page started to take shape and its basically a form the user would have to fill out for each job. Lastly the timesheet page was starting to take shape and would undergo the most refinement and iteration.
Final Design
After many rounds of feedback and iteration the app design is in a happy place. Now I just have to go learn XAML and more.
During the final design phase mostly consisted of exploring color usage and creating a mini component library for Nexus as Council does not follow or use an internal design system. Keeping it consistent but light and quick plus easier light/dark mode.
Timesheet screens
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
expand calendar
submit a timesheet
Manager screens
Managers can review at a glance people who have unsubmitted, filter pending timesheets, and view miniature timesheets when reviewing and approve or reject.
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 filters timesheet status
Approve or Reject
Job screens
The job flow lets users understand the job, who their working with, directions to the job site, fill out their workplace health and safety forms, and upload images and add additional notes on completion.
This page doesn't have any real information as presumably there are many different types of jobs with varying information, forms etc. But this gives you the idea of how the user would be taken through the job flow.
Details screen
Prepare screen
WHS screen
Homepage screen
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.
Homepage screen
Outcome
The final design was presented to the executive leadership, CEO, and Mayor. In the future, Nexus, could be expanded to more Council employees.
My contribution to the project was this glimpse into the process that went into designing this app. Presenting the work to the dev team improving and iterating consistently to bring a complete app aiming to solve a real problem for Council. I've completed my part in the project and as I am aware it will be implemented in 2026 when I am no longer at Council.
Retrospective
Creating an app design & front-end from 0 -> 1 was not easy. But considering the outcome I've done reasonably well for my first app.
I came into Council and this project at a pretty decent time, although I still needed to move quick and iterate consistently. Every part of the project has been extremely valuable, especially the translating design -> code. Whilst I am happy with the project, in hindsight I do have some ideas or concerns with it.
Move quickly & adapt
Designing websites for uni courses is quite different to the real world. I understood that skipping over parts of the process was necessary to get stakeholders involved and onboard with the idea.
Working with developers
Talking with the front-end developers helped me understand the limitations with XAML. Helped me learn quickly with XAML and C#. But also crucially their experienced with creating apps & sites for Council.
Feedback & iteration
I spent most of my time getting feedback and then iterating on said feedback. But also managing the feedback and increasing wireframes.