Redesigning a Mobile App for Smart Water Monitoring
Redesigning a Mobile App for Smart Water Monitoring
Enabling homeowners and property managers to manage multiple water monitoring devices across properties and customize alerts for better efficiency and scalability.
Enabling homeowners and property managers to manage multiple water monitoring devices across properties and customize alerts for better efficiency and scalability.
Project overview
Project overview
Our client offers smart water monitoring devices that help homeowners track usage and detect leaks in real time. Initially, the app only supported a one-device-per-location setup. As the company looked to scale and support more complex use cases, the app needed to evolve. Our goal was to enable device grouping by location and integrate a new device into existing workflows, without disrupting the experience for current users.
Our client offers smart water monitoring devices that help homeowners track usage and detect leaks in real time. Initially, the app only supported a one-device-per-location setup. As the company looked to scale and support more complex use cases, the app needed to evolve. Our goal was to enable device grouping by location and integrate a new device into existing workflows, without disrupting the experience for current users.
🙋🏼♀️ My role
🙋🏼♀️ My role
As the UX Designer in a two-person team, I was responsible for:
As the UX Designer in a two-person team, I was responsible for:
Conducting the initial discovery session with the client to understand project goals, scope, and initial design requirements
Defining user flows for key tasks such as device setup and management
Creating wireframes to explore and validate structure and interactions
Supporting the creation of final designs by applying defined UI guidelines
Conducting the initial discovery session with the client to understand project goals, scope, and initial design requirements
Defining user flows for key tasks such as device setup and management
Creating wireframes to explore and validate structure and interactions
Supporting the creation of final designs by applying defined UI guidelines
I collaborated closely with a UI Designer, especially during the final stages of the design process.
I collaborated closely with a UI Designer, especially during the final stages of the design process.
The design process
The design process
🔍
Discover
Discover
Conducted a discovery session with the client to gather insights on project goals, requirements, and user needs.
Conducted a discovery session with the client to gather insights on project goals, requirements, and user needs.
📌
Analyze and define
Analyze and define
Audited the existing app, defined user stories, and prioritized key features and workflows.
Audited the existing app, defined user stories, and prioritized key features and workflows.
✏️
Ideate
Ideate
Translated user stories into user flows and wireframes to validate structure and interactions.
Translated user stories into user flows and wireframes to validate structure and interactions.
🎨
Propose
Propose
Created final UI designs aligned with the visual style for client validation and implementation.
Created final UI designs aligned with the visual style for client validation and implementation.
Understanding the challenge
We started the project with a discovery session to align with the client on goals and requirements. We were tasked with redesigning the app to support multiple devices per location.
The update also needed to integrate a newly launched device into key workflows like setup, installation, and alert configuration, while keeping the experience smooth and intuitive.
Understanding the challenge
We started the project with a discovery session to align with the client on goals and requirements. We were tasked with redesigning the app to support multiple devices per location.
The update also needed to integrate a newly launched device into key workflows like setup, installation, and alert configuration, while keeping the experience smooth and intuitive.
Project planning
Based on the information gathered from the discovery session and an app audit, we defined and refined user stories with the Product Manager to guide and prioritize the design work.
Project planning
Based on the information gathered from the discovery session and the app audit, we defined and refined user stories with the Product Manager to guide and prioritize the design work.
User Flows & Wireframes
I created detailed user flows to map out the new journeys for device owners, which helped us validate the structure, and navigation across key workflows.
User flow sample
Main flows included:
Main flows included:
Add new location
Add new location
Allow users to create and name a new location to organize and manage their devices based on where they are installed.
Allow users to create and name a new location to organize and manage their devices based on where they are installed.
Add a device to a location
Add a device to a location
Enable adding new devices to an existing location for accurate monitoring and management.
Enable adding new devices to an existing location for accurate monitoring and management.
View location overview
View location overview
Display a summary of all devices within a location to quickly assess status and activity.
Display a summary of all devices within a location to quickly assess status and activity.
View device detail
View device detail
Show device details and alert settings for monitoring and customization.
Show device details and alert settings for monitoring and customization.
User flow sample
Scroll right to explore user flow sample 👉🏻
User Flows & Wireframes
I created detailed user flows to map out the new journeys for device owners, which helped us validate the structure, and navigation across key workflows.
Scroll right to explore user flow sample 👉🏻
UI designs
UI designs
After the wireframes were approved, I supported the creation of multiple screens by applying UI design guidelines, ensuring screen-level consistency across old and new components, and collaborating with the UI designer and developers to fine-tune the interactions.
After the wireframes were approved, I supported the creation of multiple screens by applying UI design guidelines, ensuring screen-level consistency across old and new components, and collaborating with the UI designer and developers to fine-tune the interactions.
Adding a location
Adding new device to an existing location
Device settings
Alert states
Alert states
All alert statuses for the new device were defined and implemented as variants of the corresponding UI component, ensuring consistency.
All alert statuses for the new device were defined and implemented as variants of the corresponding UI component, ensuring consistency.
Project update
Project update
In a more recent design iteration, we introduced an alert acknowledgment feature that allows users to provide feedback on smart alerts, helping improve accuracy and relevance over time.
In a more recent design iteration, we introduced an alert acknowledgment feature that allows users to provide feedback on smart alerts, helping improve accuracy and relevance over time.
UXUI Design・IoT, Home Automation Industry
UXUI Design・IoT, Home Automation
2023
2023
Project planning
Based on the information gathered from the discovery session and the app audit, we defined and refined user stories with the Product Manager to guide and prioritize the design work.
Understanding the challenge
We started the project with a discovery session to align with the client on goals and requirements. We were tasked with redesigning the app to support multiple devices per location.
The update also needed to integrate a newly launched device into key workflows like setup, installation, and alert configuration, while keeping the experience smooth and intuitive.
Related Projects
Related Projects
This project builds on previous work with the same client, where I designed a web app for property managers to manage devices across housing units and redesigned the Customer Support Dashboard to incorporate the new device and features.
This project builds on previous work with the same client, where I designed a web app for property managers to manage devices across housing units and redesigned the Customer Support Dashboard to incorporate the new device and features.
Smart Water Monitoring for Property Managers
Customer Support Dashboard