User's couldn't find the "Water Manually" feature in the app.

Manually Watering Feature Redesign

In 2019 I redesign the Manual Watering feature of the B-hyve smart sprinkler timer app.

Role

UX Designer, UI Designer

Team

Eric Price: Product Owner

Jase & Michael: Mobile Developers

Tools

Sketch.

Firebase (analytics).

Constraints and Timeline

Do not remove the background image. Keep the same color scheme.

Timeline: 2 months

OVERVIEW

What's B-hyve?

B-hyve is a smart sprinkler timer app that allows you to control or monitor your sprinklers from anywhere in the world with the convenience of your iOS and android smart device.

PROBLEM

Home owners couldn't find the main feature of the app "Manual Watering"

User's couldn't find the main feature of the app "Manual Watering" feature on the iOS and android mobile app.

SOLUTION

Remove the Manual Watering from the bottom navegation of the app.

Place the Manual Watering feature in the home screen on the opposite site of the Rain Delay feature.

GOAL

To make it easier for B-hvye user's to find the "Manual Watering" feature.

User Interview Insights

I did in person user interviews with 12 users. During the interview I asked user's to use the "Manually Watering feature". I sat next to them and observed them, without helping them and 9 of the 12 users fail to complete the task.

User's couldn't find the "Manual Watering" feature which was hidden under the Home button.
The bottom navigation was confusing to user's: The "Home button" allow user's to get to the Home screen and when you're view Home screen the "home" icon switches into a remote icon.
To access to the "Manual Watering" feature user's would have to tap twice the Home button.

When viewing the Home screen a home icon would switches into a remote icon and when viewing Calendar, Programs or Zones the remote icon would switches into a Home icon.

Design Progress

I designed a few sketches and presented to the team product owner and developers. During the presentation I did a voting activity: Allowing each member of the team to picked a design (ideas).

We end up with two favorite sketches. A possible solution was to place the "Water Manually" feature in the home screen next to the "Rain Delay" feature (Option B).

Other solution was to put the Water Manually under a FAB Floating button (option A).

Option AManual Watering icon with "Water Manually" label in the home screen under the + floating button.

Option BManual Watering icon with "Water Manually" label in the home screen

Usability Test

I conducted user testing with 10 Users: 6 B-hyve users and 4 non-Bhyve users. During user testing I gave users tasks to complete. One of the given tasks to measure the new design effectiveness was to run "Manual Watering".

We sat next to each user to observed them and without helping them 10 of the 10 users were able to complete the task on the Interface "Option B".

Usability Results

Watering Manually on Option B effectiveness is 100%. Having the remote icon and a "Manual Watering" label under the remote icon is more effective and easy for Home owner's to find the feature.

Results

After launching the new design with the "Water Manually" feature in the home screen, the feature usage increase from 2% to 98% usage within the first week.

Our app rating on iOS and android increase from 3.1 stars to 3.5 within 3 month of launching the new design.

Reflection

Looking back at this project, I think we could have done more to improve the visibility of this feature. For example improving the legibility of the label "Manual Watering" by removing the background image.

Another way to increase the visibility of this feature could be by adding a floating button and put the label and icon inside the button.

In addition, the app iconography requires more consistency.