The current UKG set up involves logging in, arriving at this landing page (left), then clicking on “Time & Attendance” which leads you to an extremely wide and spacey timesheet (below) in a new browser tab.
The current UKG set up involves logging in, arriving at this landing page (above), then clicking on “Time & Attendance” which leads you to an extremely wide and spacey timesheet (below) in a new browser tab.
Intuitive
Ease of
Use
Consistent
Organized
Inclusive
Accessible
I began creating task flows to determine how to make this process simpler.
On this task flow (right), I was able to reduce the current flow from 5 steps to 3.
I began creating task flows to determine how to make this process simpler. On this task flow (below), I was able to reduce the current flow from 5 steps to 3.
CURRENT FLOW
(5)
REVISED FLOW
(3)
Click on
My TS
Click arrow
to open up form fields
Click
Add Work
Type in field
forms
Click day
to open up
form fields
Type in form fields
Click
SAVE
KEY
WINDOW
Action:
CLICK
Action:
TYPE
TASK
END
New Tab/
Window
MY TS
(Scroll)
Click
Submit
Let’s circle back to the current users I interviewed earlier and complete user testing to see if these adjustments improved the pain points mentioned above.
Current Timesheet: I used this as reference to view the forms which were required to be completed in order to submit hours, such as “start time, end time, hour type". The width of the current design is nearly twice the size of a typical desktop frame, resulting in additional scrolling and difficult-to-find information.
Current Timesheet: I used this as reference to view the forms which were required to be completed in order to submit hours, such as “start time, end time, hour type". The width of the current design is nearly twice the size of a typical desktop frame, resulting in additional scrolling and difficult-to-find information.
Low Fidelity Wireframes: I adjusted the design to be more cohesive with the current landing page instead of opening a new tab/URL. This also reduced the visual field and width of the frame to fit comfortably in a typical desktop frame.
Low Fidelity Wireframes: I adjusted the design to be more cohesive with the current landing page instead of opening a new tab/URL. This also reduced the visual field and width of the frame to fit comfortably in a typical desktop frame.
High Fidelity Wireframes: I began incorporating UI Design Principles to create a clean and simple design, utilizing the current fonts and colors to help users feel more comfortable with the new layout.
THE EVOLUTION
THE EVOLUTION
High Fidelity Wireframes: I began incorporating UI Design Principles to create a clean and simple design, utilizing the current fonts and colors to help users feel more comfortable with the new layout.
Let’s circle back to the current users I interviewed earlier and complete user testing to see if these adjustments improved the pain points mentioned above.
Accessible
Consistent
Organized
Intuitive
Ease of Use
Inclusive
CONCLUDING THOUGHTS
I faced challenges with deciding what to focus on. Initially, I was going to focus on adding a feature to the mobile app, but then had to shift my attention to pain points my interviewees described involving the desktop design.
I learned how to restructure and redesign a current product to improve user experience based on real data and research
To improve this project, I would consider altering a few UI elements in areas of typography, stroke size, and spacing.
I am most proud of the positive feedback and results I received which confirmed I had achieved a more efficient design 🙂
I faced challenges with deciding what to focus on. Initially, I was going to focus on adding a feature to the mobile app, but then had to shift my attention to pain points my interviewees described involving the desktop design.
I learned how to restructure and redesign a current product to improve user experience based on real data and research
To improve this project, I would consider altering a few UI elements inures of typography, stroke size, and spacing.
I am most proud of the positive feedback and results I received which confirmed I have achieved a more efficient design 🙂
All 5 participants were able to complete the 3 tasks: add start time/end time, edit hours, and delete hours without support or errors.
The average level of ease was reported as 4.7 out of 5 (5 being easiest). Over a whole point higher than initial reports!
Revisions were made to alter the “trashcan” icon color, a pop up confirmation after deletion, and spacing on the drop down menu.
All 5 participants were able to complete the 3 tasks: add start time/end time, edit hours, and delete hours without support or errors.
The average level of ease was reported as 4.7 out of 5 (5 being easiest). Over a whole point higher than initial reports!
Revisions were made to alter the “trashcan” icon color, a pop up confirmation after deletion, and spacing on the drop down menu.
“Simple”
“Wow that is way easier than the way we do it now”
“That was easy”
“I would say its pretty straightforward now”
FINAL PRODUCT
FINAL PRODUCT
Login + Find Timesheet
Complete timesheet form
Edit times
Delete timesheet entry
Initially, I wanted to work on UKG’s mobile app as the “clock in/clock out” feature does not exist here. However, after speaking with a group of DesignLab students and doing more research, I discovered the feature does exist and simply my company decided not to make it available for their users. Therefore, I decided to pivot my idea to the desktop version as it also pertained to my research.
The UI needs a re-vamp; Basic functions are not easily achievable for users. The outdated design was causing employees to take a longer time to clock in/out, leading to frustration with how to navigate basic features. PLUS needing to seek additional support from others for help.
Focus on current users feedback and UI Design Principles to create a more intuitive design to reduce users level of frustration and time spent completing daily timesheet.
GOALS
PROBLEM
!
!
!
Create flows/designs
Complete User Testing
Iterate a lot!
Conduct research Analyze data
Prioritize findings
ROLE: UI/UX Designer
TOOLS: Google Forms, Figma
TIMELINE: 10 weeks
SKILLS
UKG is a cloud-based software created for HR. It allows users different levels of access that can be customized based on business needs. At the time, UKG was the program my employer used for payroll - The timesheet and clock in/out features are used daily by employees to determine their biweekly paychecks.
“Takes too much time”
“Difficult to navigate”
“Tedious”
RESEARCH METHODS
RESEARCH METHODS
Surveys
Card
Sorting
Task
Interviews
HMWs,
POVs
Comp.
Analysis
Feature
Priority
List
User
Personas
Affinity
Map
Interviews with current users revealed:
All 5 participants had needed support at some point to complete their timesheet (TS) correctly.
4 out of 5 participants were not sure how to delete hours on the current desktop TS.
All 5 participants knew how to edit hours on the current desktop TS.
The average level of ease was reported as 3.57 out of 5 (5 being easiest).
YIKES, these users are struggling. They already work in healthcare, keeping track of hours shouldn’t be adding more stress to their day! Let’s get started on the wireframes and see what users are thinking about a new design.
“When I run into a problem it seems to take forever to fix”
“The font is tiny”
“I get lost about what I need to do”
Tanya K.
Age: 31 years old
Occupation: Physical Therapist
Location: Orlando, FL
Experience with the product: 11 months
Uses: Desktop version (Note: mobile TS unavailable)
Features used: Pay, Clocking in/out
Remote work: 50%
In-clinic work: 50%
Ease of Use TS Rating: 3
Pain Point: Visual Design
Goal: To create meaningful visuals so tasks can be completed with clear understanding
Emotion Evoked:
Confusion
The font is so tiny and there are a lot of boxes I don’t use or know why they are there.
