© 2024 Saawan Ebe. All Rights Reserved.
In one year, Fieldwire has seen a 90% increase in locations created.
Users who interact with Location nesting have a much higher 30-day retention rate than users who do not. It shows a high engagement and value from the feature. 88% of the customers were able to successfully import locations which shows that the instructions were easy to comprehend.
User flow for selecting and searching for location levels in iOS.
Changing a previous behavior for importing locations.
A lot of project managers in the construction industry use Excel to do their work. The old UI was replicating the Excel UI and was asking the users to copy and paste the data from their Excel files. This seemed very unintuitive (the ‘Before’ image above). We conducted user research with Fieldwire’s customers and found
out that they find it easier to upload the CSV file as the changes were made in Excel locally and saved to the file. So, I came up with a new UI where the user can drag and drop their CSV file that was edited in Excel and upload their locations.
The team decided that we should follow the behavior of other task attributes and go with the dropdown even though the customers preferred the modal option.
Repurposing the modal for managing locations.
To give the user more space to edit the locations, I repurposed the modal UI for a new ‘Manage Locations’ modal where new locations with nesting can be created or existing locations can be renamed or deleted.
The user can create a new tier 1 location or import locations using the buttons at the bottom. He can create further tiered locations by clicking the ‘+’ icon agains each location.
User-testing dropdown vs popup modal UI for selection.
I noticed that the drop down UI was getting a little congested even after we increased its width to 270px from 180px. So, I created a popup modal UI which has more screen space for the
user. I also introduced the edit functionality in the modal. I made two separate prototypes for the dropdown and modal to test with users (the videos of prototypes can be viewed below).
The nested tree UI helps the user go through the path from top down and select the level.
I explored multiple options to represent the dropdown UI. Some of those options are presented in the above image. After testing with users, we chose to go with expanding and collapsing the location levels to see further levels under them.
Fieldwire’s large customers need to pinpoint locations to tie tasks on the job sites.
project where the location can be under several levels. They wanted to define a temporary address to send the workers to the exact location.
Before the location nesting feature was released, Fieldwire users were able to select and tag only one defined location to a task. It was hard for construction companies to define a location within a big
Location on a construction site includes a temporary address to the job site. In the above instance, location path to Unit would be Area › Building › Floor › Unit
fieldwire
Timeline
2020 - 2021
Responsibilities
User experience, User interface design and Prototyping
Fieldwire is a jobsite management tool for construction teams. It powers over a million construction projects worldwide and is used by companies like Clark construction, EllisDon etc.
I worked with the team on the design of Location Nesting feature to bring the ability to pinpoint a construction location in a task.
© 2024 Saawan Ebe. All Rights Reserved.
In one year, Fieldwire has seen a 90% increase in locations created.
Users who interact with Location nesting have a much higher 30-day retention rate than users who do not. It shows a high engagement and value from the feature. 88% of the customers were able to successfully import locations which shows that the instructions were easy to comprehend.
User flow for selecting and searching for location levels in iOS.
Changing a previous behavior for importing locations.
A lot of project managers in the construction industry use Excel to do their work. The old UI was replicating the Excel UI and was asking the users to copy and paste the data from their Excel files. This seemed very unintuitive (the ‘Before’ image above). We conducted user research with Fieldwire’s customers and found functionality in the modal. I made two separate prototypes for the dropdown and modal to test with users (the videos of prototypes can be viewed below).
out that they find it easier to upload the CSV file as the changes were made in Excel locally and saved to the file. So, I came up with a new UI where the user can drag and drop their CSV file that was edited in Excel and upload their locations.
The team decided that we should follow the behavior of other task attributes and go with the dropdown even though the customers preferred the modal option.
Repurposing the modal for managing locations.
To give the user more space to edit the locations, I repurposed the modal UI for a new ‘Manage Locations’ modal where new locations with nesting can be created or existing locations can be renamed or deleted.
The user can create a new tier 1 location or import locations using the buttons at the bottom. He can create further tiered locations by clicking the ‘+’ icon agains each location.
User-testing dropdown vs popup modal UI for selection.
I noticed that the drop down UI was getting a little congested even after we increased its width to 270px from 180px. So, I created a popup modal UI which has more screen space for the user. I also introduced the edit functionality in the modal. I made two separate prototypes for the dropdown and modal to test with users (the videos of prototypes can be viewed below).
user. I also introduced the edit functionality in the modal. I made two separate prototypes for the dropdown and modal to test with users (the videos of prototypes can be viewed below).
The nested tree UI helps the user go through the path from top down and select the level.
I explored multiple options to represent the dropdown UI. Some of those options are presented in the above image. After testing with users, we chose to go with expanding and collapsing the location levels to see further levels under them.
Fieldwire’s large customers need to pinpoint locations to tie tasks on the job sites.
project where the location can be under several levels. They wanted to define a temporary address to send the workers to the exact location.
Before the location nesting feature was released, Fieldwire users were able to select and tag only one defined location to a task. It was hard for construction companies to define a location within a big project where the location can be under several levels. They wanted to define a temporary address to send the workers to the exact location.
Location on a construction site includes a temporary address to the job site. In the above instance, location path to Unit would be Area › Building › Floor › Unit
fieldwire
Timeline
2020 - 2021
Responsibilities
User experience, User interface design and Prototyping
Fieldwire is a jobsite management tool for construction teams. It powers over a million construction projects worldwide and is used by companies like Clark construction, EllisDon etc.
I worked with the team on the design of Location Nesting feature to bring the ability to pinpoint a construction location in a task.
© 2024 Saawan Ebe. All Rights Reserved.
In one year, Fieldwire has seen a 90% increase in locations created.
Users who interact with Location nesting have a much higher 30-day retention rate than users who do not. It shows a high engagement and value from the feature. 88% of the customers were able to successfully import locations which shows that the instructions were easy to comprehend.
User flow for selecting and searching for location levels in iOS.
Changing a previous behavior for importing locations.
A lot of project managers in the construction industry use Excel to do their work. The old UI was replicating the Excel UI and was asking the users to copy and paste the data from their Excel files. This seemed very unintuitive (the ‘Before’ image above). We conducted user research with Fieldwire’s customers and found out that
they find it easier to upload the CSV file as the changes were made in Excel locally and saved to the file. So, I came up with a new UI where the user can drag and drop their CSV file that was edited in Excel and upload their locations.
The team decided that we should follow the behavior of other task attributes and go with the dropdown even though the customers preferred the modal option.
Repurposing the modal for managing locations.
To give the user more space to edit the locations, I repurposed the modal UI for a new ‘Manage Locations’ modal where new locations with nesting can be created or existing locations can be renamed or deleted.
The user can create a new tier 1 location or import locations using the buttons at the bottom. He can create further tiered locations by clicking the ‘+’ icon agains each location.
User-testing dropdown vs popup modal UI for selection.
I noticed that the drop down UI was getting a little congested even after we increased its width to 270px from 180px. So, I created a popup modal UI which has more screen space for the user. I also introduced the
edit functionality in the modal. I made two separate prototypes for the dropdown and modal to test with users (the videos of prototypes can be viewed below).
The nested tree UI helps the user go through the path from top down and select the level.
I explored multiple options to represent the dropdown UI. Some of those options are presented in the above image. After testing with users, we chose to go with expanding and collapsing the location levels to see further levels under them.
Fieldwire’s large customers need to pinpoint locations to tie tasks on the job sites.
the location can be under several levels. They wanted to define a temporary address to send the workers to the exact location.
Before the location nesting feature was released, Fieldwire users were able to select and tag only one defined location to a task. It was hard for construction companies to define a location within a big project where
Location on a construction site includes a temporary address to the job site. In the above instance, location path to Unit would be Area › Building › Floor › Unit
fieldwire
Timeline
2020 - 2021
Responsibilities
User experience, User interface design and Prototyping
Fieldwire is a jobsite management tool for construction teams. It powers over a million construction projects worldwide and is used by companies like Clark construction, EllisDon etc.
I worked with the team on the design of Location Nesting feature to bring the ability to pinpoint a construction location in a task.