TrueSafe Connect


I designed wireframes for a home security android mobile application, TrueSafe Connect. TrueSafe is a series of IoT enabled gas leak sensors. Customers are provided with a mobile app to keep track of their sensor devices and be notified if an alarm is raised by the sensor. I delivered designs for the mobile app within a short timeline to publish it on Google Play Store.

My Role

I worked with Vighnaharta Technologies from August-September 2017 to design wireframes for a mobile application. I got involved in this project in the later stages when the team already had a sensor prototype, and the mobile application was ready to be developed. As a designer, it was my responsibility to deliver high-fidelity wireframes for an android mobile app.

Before beginning the work as a designer, I engaged with the primary stakeholders of this project – CTO and Project Manager to understand their requirements and vision for the product. In the initial meeting, we discussed deliverables and timelines for this project.

I asked a lot of questions, specifically to understand how the product is engineered and how exactly it works. My aim was to be able to define the role of mobile app in the product ecosystem.

Target Users

After asking about target users, I understood they are going to be homeowners, chefs in commercial kitchens, security guards in warehouses, etc. which implied that people with varying levels of technical expertise would be using this app.

Through stakeholder discussions, I realized that amongst all the features, onboarding new customers is a relatively complex workflow. Device registration was the most difficult yet crucial step of the onboarding process.

I decided to explore this workflow, that of a new customer buying a Truesafe product. I mapped the user’s journey when they register a sensor device for the first time, which helped me consider the glitches that could potentially occur. This process also brought clarity from a technical perspective.

journey map image

By visualizing the journey, it became evident that this process was not straightforward. Therefore, I broke down the device registration process into three simple steps with clear instructions that could be easily understood.

Device Registration Step 1
Device Registration Step 1
Device Registration Step 2
Device Registration Step 2
Device Registration Step 3
Device Registration Step 3

High Fidelity Deliverables

I identified the three functionalities that the app must accomplish:

  • Add and delete new sensors to the app, as you buy them.
  • Track whether the sensor device is active or not.
  • Be notified of alerts from the sensor device.

I sought to create simple and minimalistic designs. I created an interactive prototype using Google Material Design guidelines for mocking high fidelity screens due to its extensive documentation, and easy compatibility with android phones. I also designed icons to supplement the wireframes. I prepared visual specs design documents for developers that included all relevant color codes, measurement of components, and links that would guide the team.

Impact

By understanding the requirements of the client, I provided a tangible artifact to the developers, which helped them visualize and build the mobile app. My designs were well received, and the app was launched successfully. The app has been downloaded more than 100 times.

Reflections

  • I worked on this project, while still in grad school. It was very satisfying to apply design principles learnt in my classes to a "real" project, and then see the outcome. Also, to be able to do this for my father (as the client!) was a wonderful feeling.
  • If I can revisit the project, I would like to do some usability tests, and incorporate the feedback from these tests. I think that will further improve the app experience.
  • As a student still, I hadn't considered my responsibilities beyond handoff, initially. This experience was a good lesson in learning about design and spec documentation.