Homepage job management system

Homepage job management system

Ukaea Job management Web App

A job management web app to gather everything in one place with backend automating power.

The app is part of Uk Authority and contains confidential sensitive data, you will see some pictures of designs with dummy data.

Understanding the problem

When I first started working at the UK Atomic Authority, I could see time being wasted trying to solve stakeholders’ issues over the phone, while trying to look for the project in question.

Essentially the problem is moving away from the waterfall methodology to a modern agile workflow that fits the pipeline of our projects.

Design Goals

I was commissioned to streamline processes for the organization like the job operations and create a simple but useful workflow. Based on findings from empathy interviews with staff across the organization, I defined the design goals as follows:

  • Reduce the effort in data collection.
  • Empower clients and managers to communicate through a unified system and reduce emails/phone calls.
  • Keep files organized for quick access
  • Create a throughout team collaborative way to effectively plan and execute upcoming new project requests
  • Promote transparency while maintaining one single source.
  • Automate mundane tasks like creating folders of projects, SharePoint files, sending notification emails, etc.

The solution

One system, with different views which depends on the role of the user. For example, the print room will have its own dashboard and print requests, while a stakeholder has its own view and related info. And so on for different kinds of jobs like Video production, Websites, and 3D.

  • Multiple dashboards, for the project managers, stakeholder, video manager, communications, and marketing team.

I used chrome lighthouse accessibility tool and successfully passed the web app with high score

Fully responsive for every screen

Design process


Research / Interviews

As a new employee, I had to adapt to the current workflow to understand the problem in depth. After that, I started interviewing my department and then the rest of them, communications, marketing team, and print room.

After each interview, I would synthesize the major findings and note them down.

Flow model

Once i had enough data, i drew a flow model to understand the people and the systems involved and to identify the merging and breaking points. This helped me to gain a better understanding of the entire process.

Job management work flow chart

Job management work flow chart

Personas and experience journey mapping

Interviewed with 5 key end-users with distinct titles making sure we are on the same page to define the actual needs. It also helped to document not only the interviewees’ business goals but also the personal goals like practicing my people skills to build empathy on a personal level. I created personas, user flows, and IA (Information architecture) to locate potential errors and how to avoid any pain-points.

User Experience Map

User Experience Map

Wireframing, from low-fi to high-fi

I kept wireframes as guides for myself and focused on more providing tangible high-fidelity prototypes in order to start testing about:

  • Clearly visible elements
  • Sufficient contrast and size
  • A clear hierarchy of importance
  • Key information that is discernable at a glance and more

I validated designs through each iteration and walked through the design catered to their needs by sending links through InVision or Adobe XD to receive constructive feedback.
After gathering all the feedback, I incorporated the changes needed.


Development & MVP

As soon as everything was confirmed I brought the designs to life using HTML5, CSS3, Javascript to have an MVP [Minimum viable product] in order to test the User experience with usability testing techniques.

The final stage and A/B testing

I was more than happy with the ending result, but my research never stopped. After finishing the project I backed up everything and copied the website to a subdomain with different designs and layouts, in order to initiate A/B testing.

Another great idea was to install a tracking tool like HotJar in both MVP to track users’ online behavior.

Both systems were handed over to different teams for testing to decide the best and final choice.

A/B testing

Job management homepage 1

Job management homepage 1

Homepage job management system

Homepage job management system 2

Last step

Automating tasks

The website was connected with Microsoft office 365.
After a client submits a job the data are transferred to a Microsoft Teams channel, which enables the team to collaborate on the project and work efficiently.
At the same time a folder is created in SharePoint with Job title or CPS Code [Special Id to identify the job].
Concluding to the last step a task is created in Planner with details of the project and notifies the manager of the studio that he needs to assign someone to complete the project.

What was achieved?

  • Improved efficiency
  • Organized data
  • Instant communication with stakeholders
  • Modern CMS Web App
  • Automated system in the backend
  • Effective collaboration on projects