Tech Used

- React
- Gatsby
- Lottie
- Adobe XD, and Illustrator, After Effects
- Cloudinary Integration
- Sendgrid for automated emails

What is Alarm Tech Tester?

Tech Tester is a mobile and web-based utility for alarm companies to integrate with their Central Station. Easily configure access limits, permissions, and change-logs for your team of technicians. The testing utility makes it easy and intuitive to see what sensors and points have communicated. When done testing, with a single button press, send a beautiful report of the testing details to your office or directly to the subscriber. Utilize work-queues and in-app messaging to manage your team. Tech Tester makes your day-to-day security and fire system servicing easy and secure.

What I did?

Took application use cases and turned them into designed mockups in Adobe XD for both web and mobile. Use cases were just a bullet point list of features that needed to be included. My job was to make the application look good and be user friendly.
After we had mockups of the application and it’s features, I started designing the marketing site. This can be found at dev.alarmtechtester.com (If that link is dead, the owner must’ve taken it down sorry.) My job was to make the application look appealing to prospective users and make the feature set understandable to anyone. I designed all of the custom graphics you see, as well as made the animations.
We used Gatsby for the Static Site Generation of the marketing site.
We utilized the ‘create react’ side of Gatsby to make protected routes for the application side of the website.
I set up the scaffolding for the application as well as the scaffolding for the UI and where components were going to go in different parts of the application. I built the dashboards, and sidebar and top menu navigation. Everything needed to be designed for a ‘mobile first’ web. I assisted in setting up user authentication and JWT expiration checking.
Designed and built settings pages that interfaced with an api that our supervisor was responsible for. We didn’t want to deal with uploading photos directly to our database, for customer photos, I utilized Cloudinary upload. When photos are uploaded to cloudinary a url is returned that give use the location of the photo in Cloudinary. I used that to update the users photo uploads records in our database.
Designed the logo through lots of iterations!