UX / UI Design
Created a Clock In System For Desktop and Mobile
Designed a system for all users of a contracting company to clock in their time, with both minimalism and flexibility
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
1 month
Summary
An electrical contracting company needed a way to clock employees in and out of jobs, track the materials that they were purchasing for jobs, and an option for employees to request internal time cards as they didn't have the permission level to do so.
Context, Goals, & Constraints
Personas
There are two major groups of users for this project - those with the permission levels to see the entire application and those that can only log time and materials. Field Techs, or the persona Terry, only have the ability to see the Time and Materials (T&M) portion of the application. Office Admins (Aiden) and Project Managers (Parker) can see the desktop version and access it from a dedicated button as well as the mobile-only T&M portion.
Both the web version and the mobile screens had to be very simple and yet hide the complexity of time cards. As adding time is the only way employees get paid it's crucial for this data to be accurate.
User Flow
I started this challenge by understanding the nuances of how a user clocks in their time. What makes a time card application simple? What is the crucial information that you need to add and what can be left out for most users? Who needs to be notified if there are errors, and how does the approval process work? I wanted to tackle this design in a straightforward approach to prevent anything from bloating the screens to be designed. I built the above flow diagram as a simple reference map of what I could build.
Design Process
I started with the mobile version. If the small, more widely used version could contain everything that Terry the Field Tech needed then it would be the best starting position for a desktop version. The company had a working application that included time cards so I based the first drafts on what was working in the design first - easily navigable calendar buttons, optional toggle between yearly weeks, different views of summaries and the scheduler. The old version had a lot of extra information in what it displayed on the calendar days (Per Diem, hours logged) that created a lag by loading extra information to display these values. With every employee using this portion of the application daily it needs to be as fast as possible.
I worked through the entire flow of the clock in/out screens by building what was needed, but adding optional checks for things that could be relevant to different jobs based on the feedback and experience I received by working with the current users.
After the mobile version was completed I created the desktop version with some modifications. I retained most of the design in order to retain the consistency of both.
Alternative Approach
Adding Tags
Before
After
The largest needed change was an introduction of a Tags system in the time card creation process. The main stakeholder wanted a way for Field Techs to label things they learned that day with tags because the stakeholder wants to create a training process based on daily learned feedback. Project Manager roles could created the tags in a different section of the application and Field Techs and Project Managers could fill out tags as needed every day.
Outcomes & Reflections
Live Application
As shown above the clock in system was added into the live version of the internal application. It's not currently released to the public.
The UX that I designed created structure to the overall flow. It's excellent to see it come together as a complete process. A major change I would love to do for the project is to design the materials portion - I was constrained on time and wasn't able to create but the bare minimum mostly based off of the old system.
NOTE: Screens were anonymized to protect company information
More Projects
UX / UI Design
Created a Clock In System For Desktop and Mobile
Designed a system for all users of a contracting company to clock in their time, with both minimalism and flexibility
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
1 month
Summary
An electrical contracting company needed a way to clock employees in and out of jobs, track the materials that they were purchasing for jobs, and an option for employees to request internal time cards as they didn't have the permission level to do so.
Context, Goals, & Constraints
Personas
There are two major groups of users for this project - those with the permission levels to see the entire application and those that can only log time and materials. Field Techs, or the persona Terry, only have the ability to see the Time and Materials (T&M) portion of the application. Office Admins (Aiden) and Project Managers (Parker) can see the desktop version and access it from a dedicated button as well as the mobile-only T&M portion.
Both the web version and the mobile screens had to be very simple and yet hide the complexity of time cards. As adding time is the only way employees get paid it's crucial for this data to be accurate.
User Flow
I started this challenge by understanding the nuances of how a user clocks in their time. What makes a time card application simple? What is the crucial information that you need to add and what can be left out for most users? Who needs to be notified if there are errors, and how does the approval process work? I wanted to tackle this design in a straightforward approach to prevent anything from bloating the screens to be designed. I built the above flow diagram as a simple reference map of what I could build.
Design Process
I started with the mobile version. If the small, more widely used version could contain everything that Terry the Field Tech needed then it would be the best starting position for a desktop version. The company had a working application that included time cards so I based the first drafts on what was working in the design first - easily navigable calendar buttons, optional toggle between yearly weeks, different views of summaries and the scheduler. The old version had a lot of extra information in what it displayed on the calendar days (Per Diem, hours logged) that created a lag by loading extra information to display these values. With every employee using this portion of the application daily it needs to be as fast as possible.
I worked through the entire flow of the clock in/out screens by building what was needed, but adding optional checks for things that could be relevant to different jobs based on the feedback and experience I received by working with the current users.
After the mobile version was completed I created the desktop version with some modifications. I retained most of the design in order to retain the consistency of both.
Alternative Approach
Adding Tags
Before
After
The largest needed change was an introduction of a Tags system in the time card creation process. The main stakeholder wanted a way for Field Techs to label things they learned that day with tags because the stakeholder wants to create a training process based on daily learned feedback. Project Manager roles could created the tags in a different section of the application and Field Techs and Project Managers could fill out tags as needed every day.
Outcomes & Reflections
Live Application
As shown above the clock in system was added into the live version of the internal application. It's not currently released to the public.
The UX that I designed created structure to the overall flow. It's excellent to see it come together as a complete process. A major change I would love to do for the project is to design the materials portion - I was constrained on time and wasn't able to create but the bare minimum mostly based off of the old system.
NOTE: Screens were anonymized to protect company information
More Projects
UX / UI Design
Created a Clock In System For Desktop and Mobile
Designed a system for all users of a contracting company to clock in their time, with both minimalism and flexibility
Tools
Figma, FigJam, Jira
Roles
UX Designer
Client
EQS, Inc (StreamLine)
Project Duration
1 month
Summary
An electrical contracting company needed a way to clock employees in and out of jobs, track the materials that they were purchasing for jobs, and an option for employees to request internal time cards as they didn't have the permission level to do so.
Context, Goals, & Constraints
Personas
There are two major groups of users for this project - those with the permission levels to see the entire application and those that can only log time and materials. Field Techs, or the persona Terry, only have the ability to see the Time and Materials (T&M) portion of the application. Office Admins (Aiden) and Project Managers (Parker) can see the desktop version and access it from a dedicated button as well as the mobile-only T&M portion.
Both the web version and the mobile screens had to be very simple and yet hide the complexity of time cards. As adding time is the only way employees get paid it's crucial for this data to be accurate.
User Flow
I started this challenge by understanding the nuances of how a user clocks in their time. What makes a time card application simple? What is the crucial information that you need to add and what can be left out for most users? Who needs to be notified if there are errors, and how does the approval process work? I wanted to tackle this design in a straightforward approach to prevent anything from bloating the screens to be designed. I built the above flow diagram as a simple reference map of what I could build.
Design Process
I started with the mobile version. If the small, more widely used version could contain everything that Terry the Field Tech needed then it would be the best starting position for a desktop version. The company had a working application that included time cards so I based the first drafts on what was working in the design first - easily navigable calendar buttons, optional toggle between yearly weeks, different views of summaries and the scheduler. The old version had a lot of extra information in what it displayed on the calendar days (Per Diem, hours logged) that created a lag by loading extra information to display these values. With every employee using this portion of the application daily it needs to be as fast as possible.
I worked through the entire flow of the clock in/out screens by building what was needed, but adding optional checks for things that could be relevant to different jobs based on the feedback and experience I received by working with the current users.
After the mobile version was completed I created the desktop version with some modifications. I retained most of the design in order to retain the consistency of both.
Alternative Approach
Adding Tags
Before
After
The largest needed change was an introduction of a Tags system in the time card creation process. The main stakeholder wanted a way for Field Techs to label things they learned that day with tags because the stakeholder wants to create a training process based on daily learned feedback. Project Manager roles could created the tags in a different section of the application and Field Techs and Project Managers could fill out tags as needed every day.
Outcomes & Reflections
Live Application
As shown above the clock in system was added into the live version of the internal application. It's not currently released to the public.
The UX that I designed created structure to the overall flow. It's excellent to see it come together as a complete process. A major change I would love to do for the project is to design the materials portion - I was constrained on time and wasn't able to create but the bare minimum mostly based off of the old system.
NOTE: Screens were anonymized to protect company information