top of page

User-centric redesign of a smart home app 

A UX & UI design project aimed at understanding a powerful app that seamlessly integrates all of your smart devices. The beauty of both the device and the app lies in their minimalist design and intuitive user experience. In our updates, we focused on highlighting these features and improving the overall usability of the app.

Role

Product Designer

Scope

UX & UI Design for
Mobile Application

Client

Osaio

Year

2022 - 2023

Project Overview

Users who travel frequently often worry about the safety and well-being of their family and pets while they are away. Traditional security systems and smart devices can provide some peace of mind, but they often require manual operation and may not be accessible remotely.

To address this problem, we aim to redesign a mobile app that allows users to remotely manage and interact with their smart devices, including video and audio recordings. This app will provide users with an intuitive and convenient way to monitor their homes and pets, and stay connected with their loved ones while they are away.

Understanding the overall design thinking approach for this project

1

Who are the users of this product?

The main users of the app are typically homeowners or renters who want to control and manage their smart devices, such as lights, thermostats, and security systems, remotely from their mobile devices. These users may also be interested in monitoring their homes and loved ones, including pets, while they are away.

2

What is the ultimate goal of this product?

The ultimate goal of the app is to provide users with an intuitive and convenient way to control and manage their smart devices remotely from their mobile devices, including monitoring their homes and loved ones while they are away. The app should prioritise user-friendly experience with a minimalist design, to make controlling and managing smart devices as simple and intuitive as possible.

3

Where do we need to focus the most?

For the app to be successful for multiple countries, focus on localisation and accessibility for users of different languages and cultures. Consider user-experience, compatibility, reliability, personalisation, and innovation to meet evolving needs.

4

When do people require information/ support the most?

The app users require accessible support during setup, connectivity issues, and software updates. Clear instructions and responsive customer support can help ensure a positive user experience, particularly for global and remote users.

5

Why is this problem important to solve?

The need for a smart home app that enables remote management of smart devices is crucial for the safety and well-being of family and pets while owners are traveling. By creating an intuitive app with easy control and interaction, users can conveniently monitor their homes and pets through video and audio recordings. This also helps to maintain the app's reputation and drive innovation by meeting the evolving needs of users.

User feedback.png

User Insights

When I joined the team, the app had already been published on both the App Store and Google Play, with version 1 and subsequent upgrades. However, there were a series of negative user feedback that highlighted areas for improvement in order to enhance the app's user-friendliness.

Heuristic Analysis

I identified several issues with the app's information architecture during the heuristic analysis. To address this, we restructured and refined the overall information architecture of the app.
 

We also realized that the toaster notifications needed improvement to deliver accurate and appropriate messages to users. The interface required a redesign to improve its usability and clarity.

To cater to the diverse audience around the world, the app needed to support multiple languages. Therefore, we incorporated language translations into the app.

Furthermore, we developed new features without compromising the app's efficiency or loading time. We also made sure to keep users informed about what's happening by providing regular updates and messages.

Additionally, we provided users with more information about what to do in case things did not work out.

Finally, we addressed the legibility issue caused by the brand color, by proposing a new shade that made the letters more readable against a white background.

heuristic analysis.png

Information Architecture

When I was redesigning the app and doing design evolution, I focused on the user goals, inventoried the content, created clear navigation, grouped related information, and tested and refined the information architecture with user feedback.

Information architecture.png

Redesign to Home screen's User Interface

I conducted an analytics review and found that users had trouble locating their cameras on the home screen, despite it being the most frequently used device. To address this issue, we created a dedicated app tab exclusively for cameras and another for all other devices. We also added separate tabs for smart home devices (all), cameras, and routers (which appear only if the user has a router) in the Device icon.
 

To ensure that users were always informed about their camera status, we included information about connectivity status, battery status, and a status message indicating when the camera was last updated. These improvements greatly enhanced the user experience and made it easier for users to find and monitor their cameras.

Home screen.png

I aimed to enhance the user experience by redesigning the "add device" feature as part of the home screen redesign. The previous design had displayed all the cameras simultaneously, which had overwhelmed and confused users.

To address this, we restructured the design to categorize the cameras into four different types: indoor, outdoor, indoor camera with pan/tilt, and battery camera kit. By doing this, users could easily locate and add the specific type of camera they were looking for, resulting in a more seamless and efficient user experience.

Device list - add device.png

Enhanced Live Video Watching Experience with Added Functionalities

Based on user feedback, we made significant improvements to our live video watching feature. We added talk, record, photograph, and sound options, which helped enhance the overall user experience. We also addressed the usability issue by introducing a landscape version, in addition to the existing portrait option.

Audio & video facilities.png

Revamping the Cloud Purchase Page

As a product designer, we improved the cloud purchase page by simplifying the layout, reducing wordiness, and introducing cards for each pack. We conducted a thorough analysis of user behavior and streamlined the page to make it easier to read and select the best option.

The result is a user-friendly and efficient cloud storage solution.

Organised screen layout.png

Improved User Instructions and Navigation Buttons for Enhanced User Experience

We recognised that the app's copies and illustrations were not providing clear instructions to the users. To address this, we updated the copies and created appropriate illustrations to explain the features and actions required.

We also emphasised primary buttons for positive actions and secondary buttons for cases where the user needs help or instructions due to unexpected results.

English.png

Enhanced Notification System

We improved the notification system based on user feedback, adding the ability to select and delete messages, as well as implementing a color-coded system to differentiate between new and read notifications.

Messages.png

Improved Support System: Revamped Form and Future Help Center

We revamped our support form in response to user feedback, collecting additional information such as the user's name, subject, and brand, and media option for uploading screenshots. Our goal is to provide top-notch customer support and make the process easier and more efficient.

We also plan to create a comprehensive help center, including chat, messaging, and an extensive FAQ section, to further enhance the user experience.

Contact us.png

Legibility

I suggested changing the brand color to improve the app's overall readability problem. We implemented this on the main screens and plan to update the rest in the future.

Legibility.png

Design System Improvements for App Clarity and Consistency

To create a consistent user interface design and provide a seamless user experience, I've been reworking some of the design system components. This includes buttons, icons and colour schemes to create a cohesive visual language. Improving the design system will make it easier for users to navigate the app, enhancing their overall experience and confidence in using it."

Design system.png

Improving User Experience: New Features and Future Updates

We added a pop-up menu to collect feedback from existing users and prompt new users to rate the app after seven days. This feedback helps us improve the app and meet evolving user needs.

We're also developing a user tour to help new users navigate through the app and enhance their experience.

reviews and user explain screen.png

Multilingual Support and Version Updates: Enhancing App Accessibility

I have been closely involved in the redesign of our app, which has resulted in several app updates. Since my involvement in the project, I have contributed to the design of multiple versions of the app.

To make our app accessible to users from different language backgrounds, we created a key for each string and utilized Lokalisation software to translate the app into several languages including Chinese, French, Spanish, German, Italian, and Japanese. This effort enables us to provide a more inclusive and user-friendly experience for our global audience.

Version history and future.png

Takeaways

My role was to ensure that each app update improved the user experience and aligned with our overall vision. This involved collaborating with the team to discuss ideas and make decisions. Through our efforts, we were able to create a more intuitive and user-friendly app with enhanced functionalities and improved accessibility.
 

This project provided a valuable learning opportunity, as I had to keep files organized while collaborating with team members from China, the US, and India. Working in an Agile environment, I gained new skills and became adept at incorporating user feedback into the design process. This enabled us to continuously improve the app and ensure that it met the needs of our users.
 

As a team, we held regular meetings and worked closely with other designers and developers to ensure that every aspect of the app was optimized for the best user experience. The project was a great success, and I am proud to have been a part of a team that was dedicated to delivering an exceptional product.

Osaio_edited.jpg

User-centric redesign of a smart home app 

Our app has undergone significant improvements, including the addition of functional features and an aesthetically pleasing design, making it more enjoyable and user-friendly to use.

All the projects in this website are for informational purpose only. The work belongs to the offices/ clients that I worked for.

© 2023 by NagaHarshiethaD.

bottom of page