Utilisphere App Redesign
Explore a more efficient and collabarative workflow for field operations
Client
Irth Solution
Role
Product Lead
Background
On Janurary 2022, I got the opportunity to work with Irth Solution to update their app Utilisphere.
Utilisphere is a SaaS platform for protecting critical network infrastructure, which is trusted by the largest energy, utility, telecom and media companies in the United States and Canada. UtiliSphere enables information and work processes to flow together seamlessly, digitizing critical information and automating complex field, plant and office operations.
The app serves more than 15 organizations and hundreds of teams, but different organizations have various workflows and use the app in different ways.
The biggest challenge of this project is how to balance consistency and flexibility, complexity and simplicity, solve common problems and empower all the teams and organizations.
Kickoff
Picking up the pieces
When we were asked to update the app design, there is no original design file to base off. We then found that the project scope needs to turn from “Optimization” to “Redesign”. Without pre-existing insights, I partnered with one of our product managers to explore how the field workers use the app.
Early Insights from the Field
We conducted two onsite observations with 6 field workers and 2 field supervisors, and found that their daily routine is like this:
The current app can only work at a very basic level.
Users started to give up using the app due to:
-
Chaotic structure, navigation, and user flows
-
Hard-to-read content and difficult-to-find desired information
-
Difficulty in getting up-to-date information
-
Difficulty in getting help when they have issues with tasks.
Discovery
Customer Insights
We conducted several interviews with both clients and customers from different organizations to drive our planning phase. The discovery phase was a quick and high‐intense effort that allowed us to define project milestones, audit the existing app, understand our client's vision, and begin research into user needs, behaviors, job duties, working environment, and pain points.
Based on the research, here are the key insights we defined:
Decided to focus on field workers and field supervisors for the mobile app, and move all the configuration to desktop platform.
Let’s start with the solutions
Starting from the user needs and pain points, I tried to find solutions to solve them and introduce new features to improve the user experience. The goal of the mobile app is to solve common problems and provide a solid foundation on that field workers and supervisors can efficiently and accurately finish their daily work. So I decided to move all the customization to the desktop platform, which is for organization admins to customize the configuration based on different organizations’ needs.
01
Optimize Information Architecture
The information architecture is my top priority while starting this redesign. Instead of the side menu, the bottom navigation bar can provide easy navigation across screens. Therefore, I prioritized the core features, and then resurfaced all of them behind 5 tabs at the bottom navigation.
Home
A dashboard that has some widgets and quick access for users to start their day.
Notifications
Notification: Get notifications on the tasks that users are assigned or following in real time. Easily track tasks’ progress and identify blockers, and never misses urgent tasks.
Outbox: All the actions that are done offline will be saved in Outbox and auto-sync once back to connectivity.
Chat
Instantly message, and share locations, tasks, and attachments to individuals or a group to improve productivity and enhance team collaboration.
Tasks
Toggle between the list and map view and customize the map and pins with ease. A cleaner and more intuitive interface help users quickly decode content hierarchy and find the key information.
Settings
Settings to cutomize display & languages, push notifications, sync option, etc.
02
Redesign for a Seamless Experience Between Map and List
I tried to optimize the task list and map so users can easily toggle between map and list, also built up information connections by adding a task card carousel that allows users to tap on each pin and easily view the previous/next by swiping.
-
Users prefer using the map view to the list view, but the map view doesn’t provide much useful task information.
-
Users feel difficult to find the corresponding tasks on the map.
-
Poor discoverability of Search, filter, and sorting functions.
-
Provide different views for users easily to toggle between map and list in various working scenarios.
-
Number the pins to create an association between pins and task cards, and also reflect the sorting results.
-
Put Search, filter, and sorting altogether and upfront of the screen instead of hiding and separating them into the menu and the action button.
Add Alternative Pin Display
Considering users want to quickly identify urgent tasks and their locations, I added a functionality that users can choose different pin displays to customize their map view. It allows users to view more key information on the map and quickly get an overview of their tasks and determine the priority to improve productivity and efficiency.
For Risk Score and Due Day, I color-coded the labels and pins into three tiers, which allows users to quickly prioritize their to-do-list and better plan their day.
Address
Ticket Category
Due Time
Risk Score
Redesign Task Card
Due to the diversity of the organizations Irth Solution serves, what information puts on the task card is always a controversial topic.
How to provide enough key information and take the best advantage of digital real estate is the biggest challenge of this part.
I spent a lot of time gathering voices from different organizations, brainstorming, prioritizing, and mapping out content to user goals. To achieve users' goals, the five fundamentals “what”, “where”, “who”, “when” and “how” determine what information will reserve a winner spot on the task card.
Ticket Card
Work Item Card
-
Not enough effective information.
-
Poor distinction between tickets and work items.
-
Inconsistent information structure between tickets and work items.
-
Hard to scan.
Ticket Card
Work Item Card
-
Remove the known and default info to improve effectiveness and the usage of space End users are always assigned to serve certain areas. “City and state” is the known information for them.
Some organizations work with task folders while some assign tasks to individuals. “Ticket Folder” and “Assignee” has been defaulted and pre-setup when the end users get the task list. In this case, showing “Ticket Folder” and “Assignee” may make no sense to some of the organizations. I moved these two attributes into the filter so users can still get access to them if they are interested.
-
Add “Task Status” and “The Number of Attached Work Items” for users easily tracking the progress and identify the blockers at the first glance.
-
Add icons for tickets and work Items upfront the card to create a better distinction between the two.
-
Unify the first line to “Address” to build a better association between the list and map, and also create a better experience when using route planning.
-
Use variations of type sizes, colors, and icons to optimize information hierarchy and helps users quickly decode the content.
03
A helpful, more intuitive way to search, filter and sort
Searching, filtering and sorting in the current Irth App was a confusing and frustrating experience due to the difficulty in accessibility, decreased user engagement, time consuming and lack of information availability. The goal of the optimization is to help users navigate the app and find the content more efficiently, leading to a better overall experience.
Users get no help at any stage of searching.
Typing on phones is hard, and with no aid to accelerate the process of search, users had to type entire queries and get no hint during typing.
Filtering and sorting was a rudimentary and disjointed experience.
As tickets and work items all merge together, there is no way to see only one specific type of task and some of the filter or sorting criteria is pointless for one specific type of task. There is no support for filtering by work type, ticket category, status, etc, but which is very critical for prioritizing the to-do-list. Also, there is no way to clear the filter criterion to go back to the default settings.
Old Search
Old Filter and Sort
New Search
-
Clear and visible search bar
The search bar is prominently displayed on the page and is large enough to be easily seen and accessed by users.
-
Current Location and Recent Searches as quick access
The current location and recent searches will be listed in the search zero query. This can be helpful for users who need to search for the same information frequently.
-
Auto-Complete and Suggestions
Typing on a small keyboard can be challenging, so auto-complete can be especially useful on mobile devices. While typing, we want predictive suggestions to help accelerate the process so that users can search faster without typing a lot. The searching results will fall into corresponding categories (Location, Tasks, zip code, Task ID, etc) based on what users are typing.
New Filter and Sorting
-
Easily switch across task types
Since we have two different types of tasks: tickets and work items. The filter allows users to switch across “All”, “Tickets” and “Work Items” and the criterion change correspondingly. After applying the filter, the sorting will change correspondingly as well.
-
Group filters logically
Group related filters together in a logical and intuitive way, which can make it easier for users to find the criterion they need and reduce clutter on the screen.
-
Add more useful criteria and prioritize important filters
Added in work type, ticket category, status, etc. Use collapsible and expandable menus to save screen space while still providing access to all filters
-
Allow for flexibility
Allow users to save their filter settings for future use, and also provide a way to easily reset filters to the default settings.
04
Provide Route Optimization for better Team collaboration and resources management
Field workers’ daily routine is all about driving to the site and do the job. Creating and prioritizing tasks is crucial for both managers and field workers on resources and risk management
Currently, users have to manually enter each task’s address on Google map and get route. A powerful in-app routing feature is urgently needed.
-
Too much manual work
Managers send the to-do list to field workers by email or print materials. Then workers create their route based on the addresses manually.
-
No way to create a to-do list and prioritize the emergency ones.
-
Everything goes digital and increases the cross-platform integration
Managers can create a to-do list and send it to field workers on the web platform, which will sync on the field workers’ mobile app.
-
Customizable route preferences and multiple route options
Users can create the routing plan and sort the list (by distance, due time, risk score, task categories, etc) to get the most effective route based on users’ specific needs. Users can also easily customize the order anytime during the process.
Receive to-do list from the managers
Create route plan and customize it if needed
Impact
We've received a lot of positive feedback from Irth Solution and their clients during user testing and after the alpha version has been launched. The trust we built with Irth led to a couple of new opportunities for my company.
But it never means the end of the journey, we will keep gathering feedback and data, and continue to refine the app's design to ensure that the app remains intuitive and user-friendly.
