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:
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 PDFSelect Parts of the 36 page book:




Download Brand Guidelines PDFDesign 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 StagingWho 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.
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.
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.
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.
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