Useful Systems, Inc.
Product design
Ux/ui design
iconography
Design system
—
The Useful app was built for the field service industry (roofers, plumbers, electricians, landscapers, etc.) aimed at providing a mobile solution for a highly mobile workforce. Many apps in the space were built on old technology and weren’t mobile-first.
We came into the project in 2014. There was already an app in the market and the team had tripled it’s engineering staff so it was time to get busy with rolling out some new stuff.
Our approach throughout the project was to build on the initial concept. There wasn’t any reason to overhaul the entire app, but to provide new insights and continue to enhance the user’s mobile experience. The product needed to grow to support key features and new user goals, but also needed to continue to be something useful.
Art Direction + Design:
Jaron Jackson
Design + Illustration
Tyler Zenk
Where we started...
UI updates + establish a visual language
Original dashboard design:
• Map feature
• Activity stream
• Forms: Form count within a status
Updated dashboard design:
• Map feature (most used to gave it more real estate)
• Activity stream (moved content within cards below map)
• Forms: Created pop-out widget that overlays the map
• Cards: Added mini job cards for quick access to jobs in the map
new design pattern
Job cards
Wanted to allow the user to have quicker access to all their job related information vs digging through the forms. At a glance, a user can see the status and state of the job as well as the activities.
design update
Job forms layout/design
New visual language
Iconography
evolving the product
Understand the GAPPs
It was important that we took a step back and understand the users GAPs (Goals, Aspirations, Process and Pain-points). The eco-system for the product was evolving to a more sophisticated information distribution model. We conducted new user research, interviews and testing. After that, prioritized existing user feedback with our new data points and began our way forward. We built out new personas, flow charts, task/user flows and a permission model.
Build the 4-walls
Define who CAN see/do
After we understood the GAPPs, we could start to define what the user Content, Actions and Navigation (CAN). We built out a simple app skeleton to define the key interactions in the app to keep the experience consistent for all users, but would allow for additional content and actions depending on your permission and role.
MAPPING OUT THE DEPTH OF THE APP…
With this exercise we wanted to make sure we could facilitate any user’s core actions and understand how far they are away from them. In addition to this, the user would have other contextual actions depending on the view and the content displayed.
TEST, ITERATE AND TEST AGAIN…
Once we got this set up, we started to move content into the designs to see how and when our mapping would breakdown and when there should be exceptions.
data entry experience
Workflow forms
Much of the day-to-day is driven by data entry at any point in the workflow process. We went back to our previous form design and did additional testing on how to make things easier for our user. A lot of what we noticed is that in some instances, it’s better to have more than less. We couldn’t hide fields behind cool UI buttons or dropdowns. So based on our research we presented the fields that would be most relevant when the phone rings. We also tried to position the ordering to serve as an outline while taking the call for the new job/request.
We also wanted to improve the spacing for tappable areas. Much of the data entry is done out in the field so we needed to make sure that user with gloves on could interact with the fields and enter what they need.
applied design
UI Iterations
Using the framework we established, we started working through evolving the UI using different patterns. It was important that we understood the user’s content, actions and navigation so that at any point if design or technology trends changed, we could move the design forward.
