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 RASS 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 and specs for an Android mobile app to the developers.

Stakeholder Discussions

Before beginning the work as a designer, I engaged with the primary stakeholders of this project – CIO 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 does it work. My aim was to be able to define the role of mobile app in the product ecosystem. As a designer, I was concerned about the target users. I found out that the customers would be home owners, chefs in commercial kitchens, security guards in warehouses etc. which implied that people with varying levels of technical expertise would be using this app.

Workflow to Onboard New Customers

Through the stakeholder discussions I realized that onboarding of new customers is a complicated workflow. Device registration was the most difficult yet crucial step of the onboarding process.

To draw more context of use, I decided to explore the use case of a customer when they buy 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:

I sought to create simple and minimalistic designs. I created an interactive prototype using Google Material Design guidelines for mocking up high fidelity screens due to its extensive documentation, compatibility with Android phones and easy integration with Adobe XD. I also designed icons to supplement the wireframes. Explore the interactive prototype on the left.

After sharing my designs with the developers, I realized that they could not translate the designs into code (due to Adobe XD’s limited features). Therefore, I prepared a visual design document for them that included all relevant color codes, measurements of components and links that would guide the development team.

Impact

As a designer, I brought the client’s vision to life. By understanding the requirements of the client, I provided a tangible artifact to the developers, which helped them to visualize and build a mobile app. My designs were very well received, and the app was launched successfully. The app has been downloaded more than 50 times.

Reflections and Takeaways