UX / UI Design
Designed Job Status Tracker and Dashboard View
Helping contractors track and update jobs, and the relationship between jobs and employee tasks
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
4 months
Summary
An electrical contracting company needed an efficient way to track a job life cycle from beginning to end, and the design had to be simple enough to read immediately but informative enough as to not loose any information.
Context, Goals, & Constraints
The company has historically used another proprietary application that was built on Filemaker for a small team with Apple computers. That design has become bloated with features that aren't needed and designed on a system that doesn't easily support large projects or operating systems outside of Mac OS and iOS. I was the UX designer on a small team of one designer, developer, and a scrum master.
Personas
In order to track jobs there are two types of users. The Project Managers are leaders in the field and the managers of the job, sometimes the entire face of the company for their customers. PMs are in the field training, managing, and supporting all of the field technicians they work with and prioritized their work over the paperwork.
Office Administrators effectively support the work of the Project Managers. Sometimes they create jobs, and other times they manage the lifecycle of them. Office personnel are always in charge of components needed for the job - licensees, restrictions, clearance, and any other type of paperwork.
With Parker the Project Manager and Aiden the Office Admin in mind, I had to design a functional and robust system to track jobs, which are the lifeblood of a contracting company.
Design Process
White Boarding
The first step was having a few different meetings with the primary stakeholder and my colleagues. I had worked at the company as a graphic designer so I understand the entire lifecycle of most of the jobs but I wanted to note specific constraints and use a fresh perspective of the process and capture if anything was changing.
From the meetings I mapped out everything regarding the job process. We were going to overhaul how jobs were built so we discussed all the details. Previously some steps during job creation were segmented into distinct steps, namely estimating and performing the actual job as separate entities. We streamlined the process into one Job window with many "Stages", with jobs migrating to different stages after different objectives were met.
I mapped out each stage of the job, as well as three unique statuses jobs could fall into (Closed, Cancelled, and Paused). The above image shows these stages in white. I then broke down what people would touch in different aspects of the job (charted out by different coloured squares - blue, purple, pink, and green). I wrote down what each person needed to do at that Stage in order for progression to happen.
Another major change to the process was utilizing an automated system that created objectives for users based on their permission levels and the stage their assigned jobs were in. This was labeled as the "Task Manager". With discussions with the stakeholder I mapped out every critical task that user types would need to complete in order to automatically move the job into the next stage.
Flow
I created a simple flow for reference. This was an easy way to visualize how the job would progress and a quick guide to aid in understanding.
Job Screen - Cards and Active Window
Next was the wire framing. There was some debate about how information would be presented in Jobs. The stakeholder initially wanted each stage to look completely different, with unique information displayed that was relevant to that change, but that was going to be confusing for users as they would have to learn a new layout every time. I created a system that displays relevant cards that acted as summaries, with and "Active Window" on the right that would display a detailed view of whatever card was currently selected. That way you would always have relevant information but not get lost in having too much displayed at a time. Throughout the process of Jobs moving to stages, different cards would "unlock" and start filling in with information - always there not always able to be selected.
Project Manager View and Office View
Different views were created depending on your user type to further condense the Jobs screens without leaving out information. Project Managers see cards that are relevant to tracking the amount of materials, time cards, and overall progress on a job. Office Admins see materials, contract information for customers, and more detailed time cards as they track both the customer and internal employees.
Creating Dashboard View, and Adding Customization UX
This project also ties in with a Dashboard view, as Jobs and Tasks were heavily featured in this space. The dashboard is the first screen that users view when when sign in, and often the first place they go for information. It's a condensed version of many of the important things you find within the application.
Alternative Approaches
Altering the Display of User Tasks
Before
After
User tasks are crucial steps in completing jobs so they are displayed on every user's dashboard. First I created a list-type view of all tasks, with highest priority tasks defaulted to the top of the list. I created three action buttons that users could press from the dashboard view for ease. When I presented this to users I received the feedback that the list looks cluttered with an unhelpful "wall of text" feeling. I believe the action button displaying different colours was also confusing as users would be uncertain as to what buttons actually do with no consistency.
I reworked the dashboard to feature buckets and cards in the style of a kanban board, with condensed but relevant information within. This allowed users to see all priorities and reduce the amount of tasks to a more digestible level.
Altering the Display of Jobs
Before
After
Another alteration, similar to that of the task list view, was after creating the My Jobs board in the dashboard. The main stakeholder brought up the same issue of a cluttered feeling for the jobs list so the view was revised into a kanban board with buckets for job statuses.
Outcomes & Reflections
Screen of Live Version
The final outcome is a Jobs screen for tracking entire job life cycle and a customizable dashboard with tasks, jobs, schedule, and more. Users use tasks to move through different job statuses in order to progress in their jobs.
Due to time constraints I have not been able to create the finalized UI the Jobs or Dashboard screens with the design system that I created. Sometimes it's a reality that time is not as abundant as one would like due to business resource limitation and you have to prioritize usability over polish. So if I had that extra time the first thing I would work on is finessing the responsiveness of the jobs screen, then overhaul the UI for it and the dashboard.
NOTE: Screens were anonymized to protect company information
More Projects
UX / UI Design
Designed Job Status Tracker and Dashboard View
Helping contractors track and update jobs, and the relationship between jobs and employee tasks
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
4 months
Summary
An electrical contracting company needed an efficient way to track a job life cycle from beginning to end, and the design had to be simple enough to read immediately but informative enough as to not loose any information.
Context, Goals, & Constraints
The company has historically used another proprietary application that was built on Filemaker for a small team with Apple computers. That design has become bloated with features that aren't needed and designed on a system that doesn't easily support large projects or operating systems outside of Mac OS and iOS. I was the UX designer on a small team of one designer, developer, and a scrum master.
Personas
In order to track jobs there are two types of users. The Project Managers are leaders in the field and the managers of the job, sometimes the entire face of the company for their customers. PMs are in the field training, managing, and supporting all of the field technicians they work with and prioritized their work over the paperwork.
Office Administrators effectively support the work of the Project Managers. Sometimes they create jobs, and other times they manage the lifecycle of them. Office personnel are always in charge of components needed for the job - licensees, restrictions, clearance, and any other type of paperwork.
With Parker the Project Manager and Aiden the Office Admin in mind, I had to design a functional and robust system to track jobs, which are the lifeblood of a contracting company.
Design Process
White Boarding
The first step was having a few different meetings with the primary stakeholder and my colleagues. I had worked at the company as a graphic designer so I understand the entire lifecycle of most of the jobs but I wanted to note specific constraints and use a fresh perspective of the process and capture if anything was changing.
From the meetings I mapped out everything regarding the job process. We were going to overhaul how jobs were built so we discussed all the details. Previously some steps during job creation were segmented into distinct steps, namely estimating and performing the actual job as separate entities. We streamlined the process into one Job window with many "Stages", with jobs migrating to different stages after different objectives were met.
I mapped out each stage of the job, as well as three unique statuses jobs could fall into (Closed, Cancelled, and Paused). The above image shows these stages in white. I then broke down what people would touch in different aspects of the job (charted out by different coloured squares - blue, purple, pink, and green). I wrote down what each person needed to do at that Stage in order for progression to happen.
Another major change to the process was utilizing an automated system that created objectives for users based on their permission levels and the stage their assigned jobs were in. This was labeled as the "Task Manager". With discussions with the stakeholder I mapped out every critical task that user types would need to complete in order to automatically move the job into the next stage.
Flow
I created a simple flow for reference. This was an easy way to visualize how the job would progress and a quick guide to aid in understanding.
Job Screen - Cards and Active Window
Next was the wire framing. There was some debate about how information would be presented in Jobs. The stakeholder initially wanted each stage to look completely different, with unique information displayed that was relevant to that change, but that was going to be confusing for users as they would have to learn a new layout every time. I created a system that displays relevant cards that acted as summaries, with and "Active Window" on the right that would display a detailed view of whatever card was currently selected. That way you would always have relevant information but not get lost in having too much displayed at a time. Throughout the process of Jobs moving to stages, different cards would "unlock" and start filling in with information - always there not always able to be selected.
Project Manager View and Office View
Different views were created depending on your user type to further condense the Jobs screens without leaving out information. Project Managers see cards that are relevant to tracking the amount of materials, time cards, and overall progress on a job. Office Admins see materials, contract information for customers, and more detailed time cards as they track both the customer and internal employees.
Creating Dashboard View, and Adding Customization UX
This project also ties in with a Dashboard view, as Jobs and Tasks were heavily featured in this space. The dashboard is the first screen that users view when when sign in, and often the first place they go for information. It's a condensed version of many of the important things you find within the application.
Alternative Approaches
Altering the Display of User Tasks
Before
After
User tasks are crucial steps in completing jobs so they are displayed on every user's dashboard. First I created a list-type view of all tasks, with highest priority tasks defaulted to the top of the list. I created three action buttons that users could press from the dashboard view for ease. When I presented this to users I received the feedback that the list looks cluttered with an unhelpful "wall of text" feeling. I believe the action button displaying different colours was also confusing as users would be uncertain as to what buttons actually do with no consistency.
I reworked the dashboard to feature buckets and cards in the style of a kanban board, with condensed but relevant information within. This allowed users to see all priorities and reduce the amount of tasks to a more digestible level.
Altering the Display of Jobs
Before
After
Another alteration, similar to that of the task list view, was after creating the My Jobs board in the dashboard. The main stakeholder brought up the same issue of a cluttered feeling for the jobs list so the view was revised into a kanban board with buckets for job statuses.
Outcomes & Reflections
Screen of Live Version
The final outcome is a Jobs screen for tracking entire job life cycle and a customizable dashboard with tasks, jobs, schedule, and more. Users use tasks to move through different job statuses in order to progress in their jobs.
Due to time constraints I have not been able to create the finalized UI the Jobs or Dashboard screens with the design system that I created. Sometimes it's a reality that time is not as abundant as one would like due to business resource limitation and you have to prioritize usability over polish. So if I had that extra time the first thing I would work on is finessing the responsiveness of the jobs screen, then overhaul the UI for it and the dashboard.
NOTE: Screens were anonymized to protect company information
More Projects
UX / UI Design
Designed Job Status Tracker and Dashboard View
Helping contractors track and update jobs, and the relationship between jobs and employee tasks
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
4 months
Summary
An electrical contracting company needed an efficient way to track a job life cycle from beginning to end, and the design had to be simple enough to read immediately but informative enough as to not loose any information.
Context, Goals, & Constraints
The company has historically used another proprietary application that was built on Filemaker for a small team with Apple computers. That design has become bloated with features that aren't needed and designed on a system that doesn't easily support large projects or operating systems outside of Mac OS and iOS. I was the UX designer on a small team of one designer, developer, and a scrum master.
Personas
In order to track jobs there are two types of users. The Project Managers are leaders in the field and the managers of the job, sometimes the entire face of the company for their customers. PMs are in the field training, managing, and supporting all of the field technicians they work with and prioritized their work over the paperwork.
Office Administrators effectively support the work of the Project Managers. Sometimes they create jobs, and other times they manage the lifecycle of them. Office personnel are always in charge of components needed for the job - licensees, restrictions, clearance, and any other type of paperwork.
With Parker the Project Manager and Aiden the Office Admin in mind, I had to design a functional and robust system to track jobs, which are the lifeblood of a contracting company.
Design Process
White Boarding
The first step was having a few different meetings with the primary stakeholder and my colleagues. I had worked at the company as a graphic designer so I understand the entire lifecycle of most of the jobs but I wanted to note specific constraints and use a fresh perspective of the process and capture if anything was changing.
From the meetings I mapped out everything regarding the job process. We were going to overhaul how jobs were built so we discussed all the details. Previously some steps during job creation were segmented into distinct steps, namely estimating and performing the actual job as separate entities. We streamlined the process into one Job window with many "Stages", with jobs migrating to different stages after different objectives were met.
I mapped out each stage of the job, as well as three unique statuses jobs could fall into (Closed, Cancelled, and Paused). The above image shows these stages in white. I then broke down what people would touch in different aspects of the job (charted out by different coloured squares - blue, purple, pink, and green). I wrote down what each person needed to do at that Stage in order for progression to happen.
Another major change to the process was utilizing an automated system that created objectives for users based on their permission levels and the stage their assigned jobs were in. This was labeled as the "Task Manager". With discussions with the stakeholder I mapped out every critical task that user types would need to complete in order to automatically move the job into the next stage.
Flow
I created a simple flow for reference. This was an easy way to visualize how the job would progress and a quick guide to aid in understanding.
Job Screen - Cards and Active Window
Next was the wire framing. There was some debate about how information would be presented in Jobs. The stakeholder initially wanted each stage to look completely different, with unique information displayed that was relevant to that change, but that was going to be confusing for users as they would have to learn a new layout every time. I created a system that displays relevant cards that acted as summaries, with and "Active Window" on the right that would display a detailed view of whatever card was currently selected. That way you would always have relevant information but not get lost in having too much displayed at a time. Throughout the process of Jobs moving to stages, different cards would "unlock" and start filling in with information - always there not always able to be selected.
Project Manager View and Office View
Different views were created depending on your user type to further condense the Jobs screens without leaving out information. Project Managers see cards that are relevant to tracking the amount of materials, time cards, and overall progress on a job. Office Admins see materials, contract information for customers, and more detailed time cards as they track both the customer and internal employees.
Creating Dashboard View, and Adding Customization UX
This project also ties in with a Dashboard view, as Jobs and Tasks were heavily featured in this space. The dashboard is the first screen that users view when when sign in, and often the first place they go for information. It's a condensed version of many of the important things you find within the application.
Alternative Approaches
Altering the Display of User Tasks
Before
After
User tasks are crucial steps in completing jobs so they are displayed on every user's dashboard. First I created a list-type view of all tasks, with highest priority tasks defaulted to the top of the list. I created three action buttons that users could press from the dashboard view for ease. When I presented this to users I received the feedback that the list looks cluttered with an unhelpful "wall of text" feeling. I believe the action button displaying different colours was also confusing as users would be uncertain as to what buttons actually do with no consistency.
I reworked the dashboard to feature buckets and cards in the style of a kanban board, with condensed but relevant information within. This allowed users to see all priorities and reduce the amount of tasks to a more digestible level.
Altering the Display of Jobs
Before
After
Another alteration, similar to that of the task list view, was after creating the My Jobs board in the dashboard. The main stakeholder brought up the same issue of a cluttered feeling for the jobs list so the view was revised into a kanban board with buckets for job statuses.
Outcomes & Reflections
Screen of Live Version
The final outcome is a Jobs screen for tracking entire job life cycle and a customizable dashboard with tasks, jobs, schedule, and more. Users use tasks to move through different job statuses in order to progress in their jobs.
Due to time constraints I have not been able to create the finalized UI the Jobs or Dashboard screens with the design system that I created. Sometimes it's a reality that time is not as abundant as one would like due to business resource limitation and you have to prioritize usability over polish. So if I had that extra time the first thing I would work on is finessing the responsiveness of the jobs screen, then overhaul the UI for it and the dashboard.
NOTE: Screens were anonymized to protect company information