ROLE

LEAD PRODUCT DESIGNER

Project Overview

Building A cloud-based technology Mapp® allows companies operating in physical domains to make more informed decisions based on multiple variables at a large scale and complexity.

Mapp's simulated reality engine enables autonomous car manufacturers to run thousands of different scenarios based on various geographic locations and driver behaviors. Mapp® provides a realistic canvas with fully compatible with AR/VR engines.



The product simulated realities replicate real-world locations in real time, bringing clarity to complex visual and spatial data. This helps the user to make smarter, faster and safer decisions based on real world information.
THE PROJECT GOAL

"To make smarter, faster and safer decisions based on real world information."

Achievement

• Creating an platform replicating real world
• MVP - SAAS Product
• Wins TechFest award
• Funded 4.5 Million
• WIRED Live Demo
Platforms

• Desktop
• Tablet, Mobile and AR
• TV
• VR Headset

SENSAT MAPP

MAPP

Mapp is an intuitive and easy-to-use, cloud-based digital twin platform that enables you and your team to visualise and interact with multiple types of dataset. Easily access, share and collaborate on projectsto accelerate decision making.

Mapp produces highly detailed 3D terrains from satellite, plane or drone data. Powerful algorithms allow us to then add your designs and live environmental information, giving you the most comprehensive digital view of your site.

Take a closer look.

Two sizes. Four finishes. Stainless steel and glass design.

Data capture

the UK’s largest drone data provider for large complex infrastructure projects, that conduct survey-grade topographical surveys using autonomous mapping drones. This allows us to gather your data faster, safer and more environmentally friendly than traditional surveying methods.

Data visualisation and interaction

The cloud-based platform Mapp® allows teams to interact with a simulated reality of there site. The intuitive software enables designers, consultants, surveyors and project managers to assess the site in real time and discuss plans in a visual and intuitive sense.

UI - TOOLS

WHERE TO START?

When I started at Sensat, we had around five different industry that was using Mapp.0 which was a measurement 3D tool. My role was to research the user and potential user to see what new features we should develop. From this research, there was a lot of collating need from the users.

The main features for MVP:

New measurement tools - Height profile and volume tool (I explain below)
Some way of collaboration - Share and work together with other departments.
Monitoring/Planning - Tasks, People, IoTs, Zones and Time Management
Change detection - see changes in real time
Earthworks - Manage and track the movement of the earth.
CAD, BIM, OBJ, FBX integration
Object recognition - Identifying objects

MAPP.0 Navigation and interaction issues:

From the testing I found that user found it hard to navigate around Mapp and was painful to create measurement as they could not edit, save or share them.

As you can see from this IA flow it was an incredibly difficult challenge to design an build this platform, but is is why i picked this role. No one has build a platform in 3D that show city's in real time with real events and thats has a accuracy of 5 millimeters.

UI - TOOLS

UX TOOLS

Our simulated realities replicate real-world locations in real time, bringing clarity to complex visual and spatial data. This helps you to make smarter, faster and safer decisions based on real world information.

Couple of things to think about when understanding 3d and how to create a measurements. Deigning UX and interactions flows in 3D is very different then in 2D. You have to thing in with three-dimensional in mind, meaning it has to work form any angle the camera of user is facing. The angle is a big factor for the users and can create optical allusions are some angles. Distances is another factor, some user find it had to factor in how big an object can be so giving context will help a user understand the magnitude.

Creating and editing Measurement

I started but creating the hole user flow and pinpointing the areas that have issues and need UX fixes. All the elements in red are significant issues, and orange are Issues that could be confusing for a user.

Depending on the angle of the camera some measurements are not valid so how do we show this? In a easy and digestible way?

Measurement INFORMATION 3d Example

Here is an example of the UX and interactions of how to creating an area in 3D. i took a lot of inspiration from games and how they visualize items in 3Dlater on your see a demo of how to create an area.

Measurement Details

Showing the details of a measurement and giving the user context of what that means is not an easy thing to portray. Some of the measurement are very complex from so its all about showing the right information at the right time

How do we show that the user they can  play with and edit the measurements?
In this mock up this shows the volume of this area

Measurement INFORMATION 3d Example

In this UX flow the user has a lot of information to take in. so the challenge is to give the user context of an area but without over loading them with information.

UI - TOOLS

UX INTERFACE

Here are some Wire-frame examples of the product. Designing for this product had its own challenge, how to wire-fame in a 3d world. A lot of my experiment where mocked up but then i used C4D to test them out before prototyping them.

ZONES

In this wireframe i was trying to see how i could create a layout that would show zoning of an area and IOT's.

This wireframe show details of an IOT

basic UI

Here is an example of the 2d layer on top of the 3d layer. I did this so we could show more information about the 3d

Here is an example of the information. a lot of the information is complex and mathematically based.

DASHBOARD

The Dashboard is where Management can have an overview of events and manage the site in real time.

Here is an example of how the data could be layed out. As you can see on the left is a 2D map of the area where they can view Zones and IoT. on the right is a mix of analytics and tasks.

This example shows there is can action that need to take care of. The idea is that managers can make decisions without being on the ground which give them an holistic view of the site to make more informed decisions.

In this wire-fame show the users booking machinery so the user can plan a task and organizes all the details that are involved in that task

Menu

In this iteration the dashboard show more detail about the zones and tasks. when user testing the user need to be able to make changes to zones and tasks quickly.

From user testing mangers told us they need to be able to add/remove user quickly. They also need to know details about what machines and qualifications user have to plan tasks with eases

As a business we are building new feature that we wanted user to be able to try and then subscribe to for some extra revenue. This make the product more sicky, retention, revenue and help users understand features better.

UI - TOOLS

WIRE FRAME OF THE FEATURE PANEL

A lot of the information in the Feature Panel is complex and mathematically based.

UX FLOW

In this flow show you how a user interact with the interface

UI - TOOLS

Measurement INFORMATION 3d Example

Here is an example of how a user can create an area of a physical surface and how to edit an area. This also shows how to collaborate with other users and teams.

Measurement INFORMATION 3d Example

Here is an example of how a user can create an area of a physical surface and how to edit an area. This also shows how to collaborate with other users and teams.

UI - TOOLS

UI - TOOLS

Helping users understand a physical surface Better and more accurate

Click to measure

Calculate dimensions, volumes, and slopes of any physical surface or object for more accurate planning.
​
Through location based messaging you can quickly share information with team members for more efficient working

LINE TOOL

The line tool is used to draw straight lines on a physical surface. This shows a user the distance between two points.

AREA TOOL

Area tool allows a user  automatically measure/calculate the area without being on the ground and with an accuracy of 5 Millimetre which means less mistakes are made.

A user can also calculate the volume of the area, this helps user understand how dense an area is. This mean user can make informed decisions on what to do with an area of interest.

Height Profile TOOL

Height Profile is a configurable graph used to display the elevation profile for a selected feature or a line.

This Tool uses the Profile geoprocessing service to generate the elevation values along the profile.

This is used to help identify issues of a physical surface area. for example how flat a road is, how much earth is left in an area. all these actions cost construction millions.

ANGLE TOOL

Angle shows the geometry of an section of the mapp, This helps users understand, check and plan an area of interest.

These are the angle types that are classified by their size: Acute Angle: Less than 90° and more than 0 ° Right Angle: 90° Obtuse Angle: Greater than 90° but less than 180° Straight Angle: 180°

CROP TOOL

Crop tool means that the user can selected an area where they need to work. The user can switch the crop area on and off to see there work in context.

PROTOTYPES

PROTOTYPES

Here is a demo of the Feature Panal and how a user interaction with measurements.Also a first look at the dashboard.

Adding FEATURES

In this demo I show how a Mapp is split into sections, how a new user can add features to there Mapp and the next iteration of the dashboard

CAD & BIM INTERGRATION

CAD - TOPOGRAPHICAL

Adding CAD (Computer-aided 3D models) to a users Mapp Help architecture, engineering, and construction professionals visualize their models in there 3D Mapp.

It has revolutionized topographical land surveying by bringing unparalleled speed, accuracy, cost-efficiency, and safety to the process of producing topographical CAD survey data.

BIM

Like CAD, BIM (Building Information Modeling) Adds another layer to the users Mapp. With BIM models we can allow the user to create risk assessments and Simulate hazardous.

BIM is an intelligent 3D model-based process that gives architecture, engineering, and construction (AEC) professionals the insight and tools to more efficiently plan, design, construct, and manage buildings and infrastructure.

What does this mean

this means there is a magnitude improvement in achievable scale, cost saving, time efficiency, and safety over traditional techniques for are users.

This represents a step change in providing universal and usable data in the construction and civil infrastructure space - allowing for better decisions to be made more quickly.

ANNOTATION AND SHARING

ANNOTATIONS

a note by way of explanation or comment added to a object of interest in there Mapp. A user can add files and share with groups or other users

User can attach groups to a post or can set the annotation as privet to there account. If the annotation is public other user can comment and add to the annotation.

3D View

3D models such as this one are great to visualise a city or site. But you can do any accurate measurements or accurate change detection over time. So that's why we have both point-cloud and 3d models.

3D POINT CLOUD

3D models such as this one are great to visualise a city or site. But you can do any accurate measurements or accurate change detection over time. So that's why we have both point-cloud and 3d models.

ZONES

Zones are an area of interest for a user. this ranges from Danger zones (Que the Topgun music) to Safe zones. The user can customize the zones and add features to them. we know that an area can change so they can be easily adapted when needed.

Military Demo

In this demo we show how the platform could be used to help keep tack of situations in real time and receive real updates to act on.

Construction DEMO

The users need to see a live feed in 3d of the site and be able to manage what is happening in real time. This is a demo for the Kent county council reconstruction from there cathedral

Earthworks

Earthworks are engineering works created through the moving or processing of parts of the earth's surface involving quantities of soil or unformed rock. The earth may be moved to another location and formed into a desired shape for a purpose. Much of earthworks involves machine excavation and fill or backfill.

We help user understand progress of a site and give them real updates to there roadmaps. so they can make fast,safe and accurate decisions on the go.

VIDEO FEEDS

LIVE ACTION FEEDS

a note by way of explanation or comment added to a object of interest in there Mapp. A user can add files and share with groups or other users

OBJECT RECOGNITION

What is Object Recognition

Object recognition is a computer vision technique for identifying objects in images or videos. Object recognition is a key output of deep learning and machine learning algorithms. When humans look at a photograph or watch a video, we can readily spot people, objects, scenes, and visual details.

GIS LAYERS

GIS LAYERS

A geographic information system (GIS) is a system designed to capture, store, manipulate, analyze, manage, and present spatial or geographic data.

TYPES

Spatial data, describes the absolute and relative location of geographic features.Attribute data, describes characteristics of the spatial features. These characteristics can be quantitative and/or qualitative in nature. Attribute data is often referred to as tabular data