Location indicators are now more visible
Improved location indicator visibility and user interaction, enhancing overall usability.
.png)
Role
UX/UI designer
Duration
1 week
.png)
Tools
Figma
Project overview
FieldBuddy is a field service management platform built to help technicians and service teams work more efficiently in the field. During the development, the design of important location indicators and guidance in the mobile app were hard for technicians to find and use.
Technicians often face uncertainty when navigating between job locations, which can lead to wasted time, inefficient routes, and delays in responding to service requests.
​With this update, the mobile app now automatically calculates and displays routes between the technician’s current location and their scheduled work orders. Clearer location indicators make it easy to see where they are and where to go next, helping technicians navigate with confidence, save time, and work more efficiently.
The scope of this feature includes:
-
Improving the visibility and usability of location indicators through targeted design and implementation updates.
-
Ensuring the current route remains highlighted and visible while scrolling, to maintain clear navigation context.
-
Making the indicator layout responsive by fitting as many indicators as possible within the device width and wrapping to new lines when space is limited, preventing overflow and improving interaction.
Design Process
I reviewed the existing design provided by the developer and analyzed its structure and logic to clearly understand the underlying issues before moving forward.
01
Problem Statement
02
Research
03
Ideate
04
Stakeholder feedback
05
Final design
Problem statement
From the current design, several potential issues stand out:
-
When a route is short, the grey clickable area becomes very small, making it harder for users to tap (for example, the 3rd or 4th route in the screenshot).
-
When routes wrap into multiple rows, it becomes more difficult for users to accurately select the intended route.
The screenshot of the current design:
%20-%20provided%20by%20Mert.png)
Research
Because of the limited timeframe, I reviewed examples from other companies to see how similar ideas are implemented.
I also discussed with internal team members, including the Product team, to better understand user pain points and any key requirements.
Main takeways
-
Instead of using a plain grey bar for routes, we can place numbers on it to clearly show the sequence of each route.
-
The length of the line can be used to visually represent the distance between routes.
Ideate
After gathering all the insights, I began exploring possible solutions and came up with 3 different concepts for this project.
1st idea
Idea: Display route numbers at the beginning and place all routes in a single horizontal row that users can scroll through.
What it solves: Users can easily see how many routes there are in total, and having them in one row makes selection easier.
Remaining issues: The small grey clickable area is still a problem, and users may still struggle to accurately tap the route they want.
2nd idea
Idea: Show route numbers directly on the grey clickable area and arrange all routes in a single horizontal row that users can scroll through.
What it solves: Users can more easily identify and select the route they want, and the single-row layout simplifies selection.
Remaining issues: The grey clickable area is still too small and remains hard to tap.
3rd idea
Idea: Replace the grey clickable area by giving each route the same size, and use the length of the connecting line to represent the distance between routes.
What it solves: Equal-sized routes make them easier to tap, and line length helps users quickly understand relative distances.
Remaining issues: Since all buttons share the same outline color, it’s still hard to see which route is currently active.
Final Decision
Idea: To address the earlier issues, I updated the routes to use a grey outline style with clear visual distinction for the active route.
What it solves: Users can now easily see which route is currently selected.
Stakeholder Feedback
After finalizing the solution, I presented it to the stakeholders and collected the following feedback:
-
Replace the briefcase icon at the beginning with a navigation icon.
-
Change the buttons to a solid style, where the primary indicator color (orange/blue) becomes the background, and the icon or number appears in white for better contrast and visibility.
Final Design
<5 work orders
>5 work orders
Retrospective
What I've learned
-
Understanding users’ pain points early is critical. Working closely with product teams helped ensure the design addressed real user needs.
-
Gathering feedback from stakeholders throughout the process was equally important, as it helped validate decisions and refine the solution.
Challenge
At the start, I couldn’t find comparable examples from other companies. Without clear references, I had to explore alternative approaches and adapt the solution using our existing product patterns.
Resolution
I put myself in the users’ shoes to think about what I would expect as a user, and I continuously looked for inspiration to guide better design decisions.