SnapIt

Designing for IoT: using a bluetooth device to turn your camera into a Radar

Industry:

IoT / Automotive

Year:

2021

Team:

1 x Product Designer

1 x Business Analyst

1 x Project Manager

1 x iOS Developer

1 x Android Developer

Contributions:

Product Design, UI

Designing traffic technology at your fingertips

Project Overview

Client Website

arrow east

SnapIt is a traffic technology device created by AGD Systems that connects via Bluetooth to Android mobile phones to turn these into speed traps.

AGD Systems Limited create ITS (intelligent traffic systems) products. They had a new product “333 Radar”, a piece of hardware that detects movement speed that needed the software to pair with, creating a mobile speed trap.

While working as a product designer at Tappable, I was tasked with designing both the consumer app and the client-facing web apps.

Need for speed: designing for speed capture

App Features

​​The app functionality was simple and packed with minimal features. The user had to be able to connect to the device easily via Bluetooth, capture speed reports automatically (no input from the user), be able to view speed reports, as well as share and send these reports via email.

arrow east

Bluetooth-connected hardware

arrow east

Turns your camera into a speed trap

arrow east

View and send speed reports

arrow east

Download and delete speed reports

arrow east

Configure and update device settings

arrow east

Portrait and landscape function mode

Creating a speed trap out of a camera

The Challenges

SnapIt was never intended to be a feature-rich app with complicated hardware infrastructure. The app needed to do a few things correctly and swiftly, the most important one being able to integrate with AGD's 333 Radar via Bluetooth.

We had to consider a few things:

Challenge #1

#1

Configuration

Special consideration needed to configure the device correctly.

Challenge #2

#2

Updates

How to update the radar device through the app - OTA updates.

Challenge #3

#3

Web Portal

Giving users a simple web-based report portal.

Challenge #4

#4

Speed Data

Capturing and displaying - speed, dates, and photos.

The Solutions

I worked on this product with a project manager and the internal dev teams. Together we created user journeys, wireframes and figured out the proper hardware configuration to allow it to connect to mobile devices.

Solution #1

Solution #1

#1

Designing a smart connectivity system via Bluetooth

Internal IT teams at Tappable have rapidly analysed requirements and figured out a strategy to meet radar hardware connectivity challenges.

This meant, that as a product designer, I had to design the app closely with the developers to ensure the app aligned itself well with the dev solutions, as well as creating a seamless, easy-to-use interface for the user.

Solution #2

Solution #2

Updating the device through the app

#2

Together with the project manager and dev teams, we mapped out the process of how this would happen over the app.

I created user journeys and high-fidelity app screens to visualise and ensure a smooth UX update process for users.

Solution #3

Solution #3

#3

Adding value with web apps for the user and the client

Tappable added value to the client’s product by creating two separate web apps: one for the user and one for the client.

The user-facing web app consists of a simple dashboard and data table: all speed reports were collected, managed, stored and downloaded. It also informed users how many reports they captured, the total number of locations the app was used at and the firmware update version.

The client-facing web app was also simple. The client was able to view the total number of users using the radar device, the total number of reports, as well as being able to manage and upload and push hardware updates to the users’ apps.

Solution #4

Solution #4

#4

Capturing speed reports

Designing the process of capturing speed reports was made easy by establishing user journeys and requirements at the beginning.

Working closely with the project manager, we were able to design a simple and intuitive interface for users that allowed them to configure their devices, view and capture their speed reports.

Product Roadmap

As a lead designer working directly with the internal IT team, I made sure design deadlines were consistently met and assets were delivered efficiently and on time.

User Journeys

Before the app was designed, we created user flows and journeys in Whimsical to evaluate the users' precise steps and to understand how it could simplify their journey to help them capture speed reports easily and efficiently.

This helped reduce friction, as well as improve user flow for the user as well as guiding me to create detailed UI screens later on in the design process.

Wireframes

At the beginning of the ideation and design process, we created quick wireframes in order to understand the general flow of app usability.

These were designed into high fidelity wireframes and served the team to quickly asses what features and layouts we should adopt on the screen.

Deliverables

All UI and visual design assets were created in Sketch and uploaded to Zeplin for internal developers. This allowed easy access to all stakeholders involved to view, comment, inspect and download assets directly from the design file.

Personal Insights

SnapIt was my first Android and Bluetooth-connected device app, the lessons were comprehensive and contributed greatly to my skills as a product designer.

Working together with the internal IT team at Tappable, we were able to deliver a great product that worked great and that the client was very happy with.

Want to know more about my skills and expertise?hello@irinacsapo.co.uk

View my CV
Irina Csapo - Profile Photo - 2024

Thanks for being here!
Let’s work together.hello@irinacsapo.co.uk

Say Hello.