Project Overview
BlueClerk is a field service software product offering construction project management. I worked with and helped to enhance an existing design system. Some of my tasks included; creating flows and screens for invoicing, job requests, map search and admin functionality.
Outcomes: users gained a way to collect payment after jobs, quickly fulfill job promises and manage large quantities of work orders in vast regions with transient workers
Process: user flows, prototyping, competitive analysis, research, testing
Key Take Aways
strategic questioning, consulting and early alignment with stakeholders reduces investment risk
quick prototyping in the low fidelity design phase can build trust with the final interface choices
iconography can enhance functionality and add visual interest
creating table components for scalability and quick edits allow for ease with iteration
Challenges
the existing interface and navigation led to some user confusion presenting a need for consistency and simplicity
developing systems to avoid a disjointed or inconsistent user experience
integrating components and instances purposefully to strengthen the iteration process
Screen Highlights
Invoicing
Goal: design an invoicing process for users to create, edit and manage payments for completed jobs or purchase orders
Competitive Analysis: PayPal, QuickBooks
Testing: After user testing I learned that users needed a space for memos to populate from original purchase orders or service requests.
Challenges: Using the existing navigation pattern was overwhelming with the amount of steps and options. I wanted to offer a simplistic approach with the invoicing navigation and offer clarity with just two tabs, jobs and manage.
The flow starts with a report of completed field jobs. The user can generate invoices from a specific finished job, or create from scratch.
Once the user generates a new invoice, they still have the option to change customer assignment, add services or products and adjust details before they preview and finish.
Users can view and track created invoices in the manage tab. I wanted to implement a variety of visuals here to help with the dense information presented.
The user can save invoices as drafts and also preview during creation or in the manage stage. Editing and saving as a pdf was an important function added.
Job Mapping
Goal: Users needed a way to view job requests within a map, view the due date and assign to an employee.
Competitive Analysis: Google Maps, The Infatuation
Challenges: Users wanted to filter by date, customer and job type so they could properly assign to specific employees. I wanted to allow for multiple filters to be selected at once with the option to deselect, without it being too cumbersome.
When the user clicks on the due date button it will activate the filter for that specific day. They can hover and choose a specific date with the dropdown calendar, or use the arrows. After testing I realized there needed to be a reset button.
Users can click on a red map icon or card to view the popup. The “generate job” button allows them to assign it to an employee.
Admin
Goal: Create features within the admin tab so that users can add and edit employee profiles, with job visibility and assignment opportunity.
Challenges: The existing designs had too many screens and steps so it was important to execute a simpler and efficient admin experience. My first attempt involved cards but felt uncomfortable with even more steps. A table felt appropriate and I chose to use the ellipsis icon in the table to solve for a growing list of options.
This modal gives the user an opportunity to add or edit an employee profile, with a drag and drop image option.
In efforts to bring minimalism to the busy navigation and interface, I decided to incorporate actionable icons and tooltips. I realize it will be important to have a consistent presence with these throughout the system, but I found it to be a creative solution worth testing.
Email Preferences
Goal: Offer email settings and options for users to change the frequency of their email sends. The default setting triggers emails every time a new job is assigned to the user. The users communicated feedback that emails were sending too frequently all day long for the technicians and it can be annoying and disruptive while they are working.
Challenges: I weighed out whether to introduce a settings drop-down on the profile page or utilize the left side panel navigation that is part of the current design system. I also learned the user might need more options and preferences in future iterations, so the tab seemed to best solve the problem. I struggled with how to make the chosen preferences obvious to a user. I knew minimal copy would be most efficient and I wanted an at-a-glance visual of the current selection.
I ultimately decided to go with an email preferences tab for clarity and intuitiveness. The left panel navigation is part of the design system and an obvious step for users.
Original mockups for testing included toggles and an ellipses drop down menu. After testing and competitive analysis, check boxes seemed to be straight forward and concise. Once a change has been made, the save button can be clicked and validation pops up below.