Designing UX/UI for a Smart Collar App

The interface combines native design elements with non-standard functionality

The client is a pet startup that wanted to develop a safe pet monitoring system using a smart dog collar.

Case Highlights

We designed the interface that:

Makes complex functionality easy to understand
Considers real user scenarios
Allows new features and elements to be added
Helps grow the app user base

Problem

Our UX/UI design team was tasked with creating a mobile interface for a pet-tracking IoT solution we developed for the client.

One of the project stakeholders from the Halo side was a UX consultant who provided a design brief. It contained references and key characteristics for the app interface they wanted to create, including colors, shapes, styles, and benchmark apps. The client referenced the world’s best services, like Uber and Life360.

The main challenge derived from the functionality—the app would serve as a remote for the IoT collar. Managing the device with a smartphone would require a large amount of information to be displayed. Our design team had to place all the elements so they were clear for the user without cluttering the interface.

Solution

Arranging the Workflow

Softeq had to reconcile the customer’s vision with UX/UI guidelines and best practices.

We started from the business analysis stage so that we could foresee possible development limitations. The project architecture meant there were many inner dependencies and integrations to consider. To avoid any errors, we decided to render all screens throughout each iteration.
Any further interface ideas from the customer were analyzed by our UX/UI team. After that, we considered some other options to choose from internally. At the client approval stage, we presented 2–3 choices, pointing out the one we recommended.

Making App Navigation Simple and Clear

The app has a complicated architecture that includes back-end, hardware, and firmware integrations.

The interface includes lots of non-standard elements that allow users to navigate through the app. The “Pet profile” is the most complex screen—it took the most iterations to make it look smooth yet informative.

Designing-UX-UI-for-a-Smart-Collar-App-1 — The Pet profile screen displays real-time connections and up-to-date statistics on each pet

Improving UX and Adding New Features

The solution began as an MVP a few years ago and has now become a whole ecosystem.

The app is constantly evolving, and new features are added from time to time. Our UX/UI team provided an interface that was suitable for functionality updates and alternative scenarios.

New design iterations have been based on 24/7 alert monitoring, feature analytics, and user reviews. Softeq works together with the client to bring improvements to the user experience.

Designing-UX-UI-for-a-Smart-Collar-App-2 — The current “Map View” makes it easier for the user to find their pet and take action

Designing-UX-UI-for-a-Smart-Collar-App-3 — In the last UI update, we added the “Watch on another device” feature

Increasing User Referral Activity

The customer discovered that current app users were not sharing referral codes as much as they would like.

The referrals were being given by the same people, and the customer wanted to increase the number of unique referrers.
The customer came to us with this problem. The Softeq team suggested changing the referral code-sharing interface for end users. Previously, the generated code had to be manually copy-pasted.

Designing-UX-UI-for-a-Smart-Collar-App-4 — With the new flow, the unique link with referral encrypted code can be shared easily via the device’s default “share via” function

Once implemented, this UX and UI improvement increased the number of referral codes used by 3x in one month.

Looking to Elevate Your User Experience?

Discover how our UI/UX design services can transform your digital presence Learn more

Joel-Carter-cta-banner-transparent-back — Joel CMO

Result

Softeq delivered a smooth, intuitive, and adaptable UX/UI design for the Halo app. The engaging user experience is helping our customer grow their client base, which now has more than 120,000 users.