TrakKING Adventure - iOS & Android Apps
After building the stolen motorcycle tracking system Datatool TrakKING Adventure, we were then asked to build a mobile application allowing their customers to access information and configure their tracking device on their app.
We designed and created a mobile application on Android and iOS platforms. The features include everything available on the customers dashboard with the view for mobile only features to evolve upon customer feedback.
iOS, Swift, Android, Kotlin, API, PHP, UX, Sketch
Login, Search Field & Navigation
The Login button takes users to the home screen. The top navigation bar includes the Menu Button and Search for Vehicle Field - The user can search via Alias or Reg - Notification Indicator - Map filters i.e. show traffic / satellite map.
When logging in, the user is presented with a map view showing the location of the vehicles on their fleet. Initially they will see a zoomed out view which collates vehicles in the same area and presents them as a number. By zooming in on the numbered bubble will filter down and show the individual vehicles. Within the app ONLY X number of vehicles (based on performance) is visible at a time. They can view for more vehicles by searching for a vehicle. By clicking a vehicle the user will be taken to that vehicle on the map with the vehicle highlighted.
Map View with Indicators
These are the same as on the website. The vehicles indicators (key) is :- Green: Ignition – ignition ON engine NOT running. Yellow: Idle – Ignition and engine ON. Blue: Parked – Engine and ignition OFF. etc.
By Default the speed is not shown and the ‘M’ indicates the vehicle is moving to show the speed in the icon they can change this in the settings if they wish the speed to be displayed. When the vehicle is moving and the show speed has been selected in the settings, it will show its direction of travel and speed depending on settings. When the user wants to see more details on a particular vehicle they can do so by pressing on an icon.
A vehicle details card will also show from the bottom of the screen :-
Alias (or driver name), Vehicle Registration, and when information was last updated. The Odometer information can be updated manually in the further vehicle details section. Clicking on the more button on the vehicle details screen, the user has a choice to: Get directions to vehicle - (this opens Google maps to provide directions), Ping Vehicle, Follow the Vehicle - (this allows the map to move along with the vehicle if it is moving). The last known vehicle location is also shown - it will show the road name, town /city, and post code.
Vehicle Details, G Sense, Message TrakKING Adventure, Modes, Text alerts, Subscription
When users are on the main vehicle details screen by clicking on the alias name section opens up the menu. Users can select from the menu to see further details: G Sense, Message TrakKING Adventure- (Opens new screen for the user to message them) Modes, EWM text alerts, Subscription & Vehicle Details - For 2 weeks after sign up the user will be able to edit their vehicle details after that by contacting support.
For the editing of G Sense - This uses the same layout for the EWM text alerts. Any updates made within the app updates the website details at the same time.
Messaging TrakKING Adventure support is where users can type their message in the relevant field and select whether they want a copy of the message sent to them via email for their own records. The message that TrakKING Adventure support receive will have the account details i.e. name and contact details associated with the logged in account.
The user can access the side menu using the burger icon in the top left of the navigation bar. To access their account information they can do so by clicking their name under the app logo. Here are the rest of the available sections to navigate to:
-SOS - opens screens with numbers to call in case of emergency
The section of the app the user is in will be highlighted in Red when in the side menu.
These are dependant on how the user has set up alerts on their web dashboard:
-Geofences Entry/Exit Alerts
-Engine hour limit
-Vehicle Battery Low
-Movement without ignition
-Aux High - Aux Low
-Invalid / No Driver ID
Users can view the journeys done by their fleet. By default the calendar is visible but the user has the option to toggle the calendar view- this will be helpful when the user has many journeys on that day - by toggling the calendar off, the screen will fill with the journeys for that period. Red border circle - Highlights that a journey has been made on that day, Grey filled circle - is Current date.
Journey details show :- Driver/Vehicle Start Time & Location - End Time & Location and Distance shown. By clicking on the journey details it will show the journey on a map view with further details. Clicking ‘select date range’ opens the calendar in a light-box style. The user can select between 2 dates, i.e. over a few months swiping through the calendar months. The vehicle will ping its location every 30 Seconds and it’s at these points where the journey indicators appear. The user will be able to see the vehicle’s Idle time, whether parked, its speed, direction, distance, overall journey time, average speed, top speed. By clicking on a journey indicator, the user can see more information about the vehicle and journey at that point i.e. Ignition Status, Engine Status, Sats & HDOP, Bearing, Vehicle Type, and Aux 0.
Unlike on the website users can only generate reports for journeys or Geo Fences through the app. Users select if they want a daily, monthly or individual report. What type of report - journey or Geo fence. The date range - by clicking on the ‘from’ or ‘to’ fields will open a calendar to pick dates manually, when this is done the date range field will change to “user defined” same as on the website. If the user has defined groups on the web dash they will be available in the drop down. If the user has not defined any groups the field will remain as ‘entire fleet’. Selecting a vehicle will show the vehicle screen where users can search for a particular vehicle. The user can select if they would like the report to be grouped by drivers or vehicles and can choose which format they would like to receive their report, PDF or .XLS format. By pressing the ‘generate report’ button the report will be sent to their account email address.
When setting or editing a Geo Fence the user can see it set on the map. The user can increase or decrease the size of the geo fence by pinching the screen on the highlighted area. The user names the geofence and can edit the name and also the type of alert.
Users can select the different options and once completed they can go onto schedule times and select when to receive the alerts for the geo fence. View Vehicles shows the list of vehicles applied to the geofence.
To Enable the crash detection feature the user must first subscribe. When subscribing the user must give details to complete the subscription. This is the information sent to the medical emergency services in the event of a crash, along with their location at the time of the crash. After subscribing they will see a screen when navigating to ‘Crash Detection’ from the side menu. The user gets a further breakdown of how the function works and what to do in the event of a crash. Pressing the ‘record’ button will begin the feature and show the crash detection recording screen. A red icon will have an animation to show the feature is active. Pressing the Pause button will pause the feature while the user is on their journey.
If the user has a crash the app will vibrate and show the ‘incident detected screen’. The user can then decide to cancel the alert before emergency services are contacted. If the user does not cancel the alert the Medical Emergency Services will be contacted. The timer will countdown showing the user how long they have to cancel the alert.