Improving service route planning.

Legacy processes and IoT don't mix. Or do they?
I was hired to help define how to create an all-in-one suite of asset tracking solutions using Internet of Things.
Their customers were old established organizations with outdated systems using excel and pen and paper for large tracking systems.
My job was to understand the end-user and deliver a solution they found usable, while significantly improving the accuracy and efficiency of their operations.

Project Type

Full Time

My Role

Product Designer

Duration

6 Months

Client

IoT Start-up

My Contribution

-> Discovery
-> User Interviews
-> Roadmap
-> Wireframes & Hifi Mockups
Written & Illustrated by Seth Roberts & Brian Hawes
There was a lack of design process.
As the only designer, it was my job to establish timelines and communicate across team functions.
I needed to find a way to find common ground and come up with a design strategy and timelines that everyone could agree on.
To understand more of the problem space, I interviewed target users.
This included the use cases of the different users of the app and how they interact with each other.
From this I created a system map to better understand the interactions and goals of each user.
This allowed us to understand the user flows within their domain. We can map this to the software.
Ex. We saw a consistent relationship of service requests, operators and drivers.
Example Guiding Questions
Combining ideas from user research & stakeholder meetings.
I used these guiding questions to break down the current process.
The goal was to discover new opportunities by exploring customer problems.
We started by understanding the conceptual model they had of their current process.
Ex. Users consitently said their main tools were spreadsheets and google maps.
I worked closely with the stakeholders to understand their perspectives.
I collaborated with engineering and the execs to balance the features with our resources.
I proposed a phased approach, where the most important elements would be tackled first, and then additional features would be added later.
Ex. Let's build out manual routing first, then add route suggestions and automations.
Feature Value Mapping
Feedback warning: only maintenance trips can be added.
Improvement through user testing.
I worked closely with our test users to identify areas where our features weren't clear and why they were hard to use.
This uncovered areas where we needed to add more signifiers, feedback and correctly display element affordance.
Ex. Truck space is restricted when building a route. The user needs to know this.
Results:
I combined information from generative research, business objectives and the engineering team.
This resulted in a solution that was buildable, while matching the users conceptual model and current way of doing things.
Ex. Our customers were already using maps and tables to track their data.
Create service requests and dispatch drivers.

Other Projects

Consumer Protection & Reviews

Designing for mobile and desktop across all business units.
UI
UX
View More

Cafe Operator Dashboard

UI/UX Design to bring data insights to cafeteria operators.
UI
UX
Dashboard

Doppl

7 design sprints across brand, web, product, mobile
UI
UX
Mobile
Web
Branding
View More

eComm Product Discovery

Supported the Rounds Marketing with UX and web design.
UI
UX
Webflow

Products Display UX

UI/UX Design to educate consumers on how The Rounds service works.
UI
UX
Mobile
Website
View More

Company Background

Doppl Inc. designs & manufactures smart sensors while providing all-in-one Internet of Things (IoT) SaaS to accompany their family of products.

Lead Product Designer

Role Summary

I completed various job roles while working across teams as needed.
This included UI/UX design, web design, development, graphic design and MarTech integrations.
Redesign and develop website
Refresh brand and create reusabale assets
Design main desktop dashboard
Design 3 mobile apps for driver, installation crew and customer
My work consisted of 7 design sprints:
Brand Book
Design System
New Website
Desktop App
Driver App
Customer App
Installation App

Design Process

I used the well known double diamond process during this project.

Design SPrint #1

Brand Refresh

I started by refreshing the Doppl brand assets and implementing a design system to create resources quickly in Figma.
The company had very little design resources and once a system was put into place, new ideas could be tested quickly.
  • Who is interacting with Doppl?
  • What assets are required and for what devices?
  • What are the competitors doing?

Summary

The current Doppl brand gave off a start-up feel while they were trying to attract enterprise level clients. The tech is there but the story being told about it was not up to par.
  • I worked directly with the marketing team to understand what their users were like, what mediums they were hoping to put their brand on etc.
  • With this information I crafted a new brand and story for Doppl to tell
  • Along with the brand I created a design system to maintain consistency across advertising all the way to the internal platform.
Download Brand Guidelines PDF
Select Parts of the 36 page book:
Download Brand Guidelines PDF

Design SPrint #2

Website Design & Dev

By using the design system I created, I was able to quickly put together a website that followed a consistent look.
The website was developed in React and I used a custom boilerplate used in some of my other projects to speed up repeatable components.
View Website Staging
  • Who is visiting this site?
  • What are we trying to get the user to do?
  • What are the competitors doing?

Current State

The current Doppl site was a one page website with little detail about their range of products, no information about the company or sections to ask for help.
  • I worked directly with the CEO to understand what content they had and thought they should include.
  • With this information I mapped out the site and the place of each piece of information about the products, company, team member etc.
Site Map:

Site Wireframe

After understanding the sections of the site required I began wireframing the layout of each page. This gave a better idea of reusable layouts I could use to speed up the dev process.
  • By using the sitemap created, I was able to quickly layout the website and test user navigation.

High Fidelity Mockup

After understanding the layout of the site, I began creating content with the CEO and marketing team to place into the site.
  • By using the design system I created I was able to quickly put together a high-quality visual design for the new website.
    View Website Staging

Design SPrint #3

Main Dashboard

Doppl's main application is a dashboard app for dispatch teams to monitor their pick-ups, drop-offs, service routes, customer invoicing & scheduling.
  • Who is using this app?
  • What are we trying to get the user to do?
  • What are the competitors doing?

Understanding the Problem

Keeping track of service, pickup, drop off and maintenance drivers is a complicated task and is performed with paper and pen systems in a lot of cases.
Information about the assets involved is unknown and details such as tank fill level, asset quality, estimated life etc. are unknown. Processes are very static and unresponsive to changes on the fly.
  • The challenges encountered when servicing customer requests.
  • Understand how admins manage fleets of drivers.
  • Design a desktop & mobile platform that for admins to see a birds-eye view of operations

Understanding the User

During the research phase of the project, I met many times with the VP and CEO to gain a better understanding of user challenges and motivations.
  • Understand how admins currently manage their driver routes
  • Understand how admins create trip routes
  • Uncover tools already in place for service driver planning
  • Learn how users feel about each tool and what are their motivations
  • Create a list of actionable features and feature sets to help users with their main problem

Feature Evaluation

A Value vs. Difficulty matrix was created early in the project to help with feature prioritization and to provide a MVP version of the application.
  • Features were categorized by technical difficulty and value to the user / business.
  • This allows us to isolate out which features have the highest value and can be implemented in a timely manner.
  • The Auto route generation feature is an example of something left out of the MVP.
  • This is something that is nice to have but will be left as a future roadmap item

Sitemap & Features

A sitemap was created to group features into where they’ll exist in the application. This allows us to have a better understanding of where elements might go to complete these operations.

Hifi Mockups

From these wireframes I prototyped the screens required.

Similar Project

I followed the same process to create a PowerBI Dashboard for Enbridge
Example Wireframe:
Example HiFi Mockup:

Project Takeaways

  • We are often lured by attractive, eye-catching designs. But, it is important to always remember why a design is being created.
  • The primary goal is to understand the user, their problems and then come up with a design that delights them with a solved problem, everything else is secondary.

Doppl IoT Solutions

Role Summary

I excelled in the start-up culture of having an all hands on deck approach to completing tasks.
I learnt that my engineering degree applies to many different roles as the main objective is to solve problems, however possible
Branding and design system
Lead UX and UI Design
Webflow designer & developer