The Problem
The current mobile app homepage suffers from an outdated design, hindering user experience and efficiency. This outdated design contributes to critical issues such as technicians frequently forgetting to clock in and out, difficulty locating the timesheet, and excessive time spent on other screens due to the homepage's lack of efficient content. These problems hinder productivity, lead to inaccurate time tracking, and overall, negatively impact the company's operational efficiency.
Homepage
Timesheets
Three main issues arose
-
Frequently forgetting to clock in/out
-
Difficulty locating the timesheet
-
Homepage not providing efficient content.
There are two ways technicians can clock in and out, A button within the timescreen section of the homescreen which is located at the bottom of the screen, and within the navigation side panel. The current locations for the clockin and out are both very hidden which is understandable to why technicians frequently forget this interaction.
Homepage
Navigation Side Panel
According to both the project manager and a user interview, technicians rarely use the homepage. Instead, they primarily navigate to the Work Order screen where they receive and manage their assignments.
While ideating, I realized that since technicians primarily use the Work Order screen, what if I combine it with the homepage to enhance their workflow?
Work Order Screen
Ideation
Given that technicians primarily use the Work Order screen, I explored the idea of combining it with the homepage to streamline their workflow. This led to the creation of several low-fidelity design concepts, each aiming to address the identified issues.
A few examples of my low-fidelity designs
Final Product
Solution 1
Removing the clock-in/out button from the side panel and relocating it to the top of the page is a strategic move. As a crucial first step in a technician's workday, this button should be highly visible. To further enhance this, incorporating a timer and a timesheet button directly on the homepage can streamline access to time-related information.
Solution 2
Moving the Work Order screen to the homepage ensures that technicians' assignments are the focal point upon login. This minimizes tapas and creates a more seamless experience. Including a counter for assignments and a visible "Add New" text button to create a new assignment. Additionally, a modern filter design enhances the process of sorting and organizing assignments.
Solution 3
We've implemented a preview drawer for assignments. By long-pressing an assignment card on the homepage, technicians can quickly access essential details like the details on the assignment, customer contact information, and past service history. This feature reduces the number of taps required and ensures technicians are well-prepared for their tasks before traveling to customer location.
Solution 4
I've modernized the timesheet design for improved readability and user experience. Additionally, I've incorporated a graph to provide visual insights.
Impact
FieldEdge is developing a new mobile app to resolve backend issues; these designs are part of that process. The app is expected to be released in 2025.
98%
of participants find the new homepage to be intuitive
87%
of participants found the preview drawer to be a valuable feature
70%
Reduction of the number of taps
​​​
Other Projects
