B-hyve app

Mobile App Redesign

In 2019 I redesign the B-hyve smart sprinkler timer app.

Role

UX Designer, UI Designer

Team

Eric Price: Product Owner

Jase & Michael: Mobile Developers

Timeline

3 Months

Tools

Figma

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 or android device.

PROBLEM

The B-hyve app was outdated and not on brand.

The app had a lot of inconsistencies: The backround of the app had "It was hard to see zones imagery, buttons and input text fields" according to users. The app didn't have a define hierarchy such Headlines (H1, H2, H3, H4, H5, H6, Subtitles, Body, Caption, Buttons and Overlines.

SOLUTION

I remove the image backgound of the app.

I designed a new version of the B-hyve app in light and dark-mode version. Both versions of the app are more legible for our users.

I remove the background image of the app because it decreased the legibility of labels, buttons, etc. I designed the app with a light gray background for the entire app in light mode. I also designed all the ui cards in white background to increase the legibility of the copy, labels, text fields, imagery, buttons. In addition, I use the B-hyve yellow color in for the buttons.

GOAL

Update the B-hyve app on brand.

To improve the overall B-hyve app look and feel.
Design the app in light-mode and dark-mode.
Bring the app up to date without changing existing user flows and features.
Make it easy for Home Owner's to see buttons, labels, input text fields, improve hierarchy and to design the app on brand (B-hyve branding).

The B-hyve app before the redesign.

Observations

The background image of the B-hyve app made everything difficult to see. Most small text throughout the entire app is not legible specially for our users, an older user base. The round images in the zones section didn't take advantage of the entire real state. The bottom navigation icons are not very consistent when it come to style and size.

User research

Understanding what users preference, what do they expect, and what feature they undestand. We conducted 8 user interviews to discover behaviors, frustrations, and needs when using the B-hyve app. public transportation. Our questions were framed around general travel via planes, buses, cars, trains, as well as Amtrak-specific experiences, and we found some underlying themes from our users:

In-person Users interview Insights

Most home owners do not actually install the underground sprinkler systems, they pay contractors to install the system.
Home owner's only install/replace the Smart Sprinkler Timer.
Home owner's love the B-hyve app but they wish the app would allow then to create and set more than 4 programs (A,B,C,D.

4. Home owner's want to save water.

5. Most home owner's don't actually use Smart Watering feature from the B'hyve app. They mentioned that Smart Watering did not worked well for them. (Note: This home owner's don't enter all the necessary information for Smart Watering to work)

6. Home owner's love the B-hyve app but they mentioned that is hard to see buttons, input fields, and the font is to small.

7. Some home owner's want to water all zones at once. (Note: Running multiple zones at once is usually not possible due water-pressure and flow limitations at residential properties.)

Competitive Analysis Insights

Not a single competitor supported dark-mode feature in 2020.
Most competitors used large imagery in the app: To display users lawns.
Some competitors actually used an existing design systems (google materials for android, Human Interface Guidelines for iOS ) to build their mobile apps.
Most competitors used white backgrounds to display users data in a legible way.
Most competitors actually use their brand colors in their mobile app.

Visual Design

I used the existing B-hyve packging branding for the mobile app redesign.

Mobile App Site Map

I designed a visual mobile app site map to help non technical members understand how the app flow works. In this case this home owner has 3 smart sprinkler timers and flood sensors.

Design Solution

I designed a new version of the B-hyve app in light and dark-mode version. Both versions of the app are more legible for our users.

Since the B-hyve app had background image which decreased the legibility of labels, buttons, etc, I remove the background image and I use white background on UI components and a light gray background for the entire app in light mode. Most labels (text) are black color in light-mode. Most buttons are B-hyve yellow color in light-mode and dark-mode.

The old B-hyve app used to display zones images in circles. For the redesign of the app I decided to display lawn images in squares, to use the app real-estate better.

In addition, I used google material design system for android and Human Interface Guidelines for iOS to design most of the B-hyve app.

Before

After

Bhyve app Onboarding

This onbording is use to onboard new B-hyve devices via Bluetooth or WiFi.

The main improvements made to this onboarding was: Clear user feedback for each step when onbording a B-hyve device. Legible titles, copy, input fields, buttons and direction's to take on each user interface. The onboarding process takes less time 1-2 minutes to onboard a B-hyve Timers compare to before 2-5 minutes.

Calendar

View all past and future scheduled watering programs.

Programs

Program Slots for users to scheduled watering programs.

Home

Rain Delay, Stop and Skip feature.

Zones

My Bhyve

Zone Details

Smart Details

My Devices

Program Details - Part 1

Program Details - Part 2

Program Slot

Calendar Day view

Manual Watering

Manual Watering - Run Time Selection

Starting Manual Watering

Active Manual Watering

Rain Delay, Stop and Skip feature.

Rain Delay options

Rain Delay feature: 12 hours, 24 hours, 2 days or more.

Rain Delay

Rain Delay feature: More than 2 days.

Push Notifications

Help

Soil type

Plant Type

Sprinkler Type

Sunlight

Rainfall

Slope

Schedule Adjustments

Feedback

For you

Soil Moisture

Henry Smith | Male | 62 years old | Salt Lake City UT

"This is a great tool! I like the ability to selectively turn zones on and off manually without having to be at the controller. This is really a time saver when working on a broken head. Sometimes, it's great to be able to pause or cancel a zone watering if it already got watered. I have a 4 port controller and a single hose controller. I wish the app would aggregate the different controllers so I can control all of the zones without having to manually switch between the controllers."

Harrison Le | Male | 35 years old | California

"This is a wonderful system with app control. I love the automation skip when rain detected. Compare to the old system (without wifi), it's super easy to program. I can program it at anytime, anywhere, at my convenience. The zone's picture is a big plus. I now know for sure which zone to water without guessing. The auto delay when strong wind detected is also a wonderful feature. I owned the system more than a year now. Highly recommended!"

Joe | Male| 65 years old| Dallas Texas

"It's great when your friends are over and you don't have to leave the party to have to tend and water your plants , instead you can just water with your phone! (amazing) 😍"

Richard Speakman | Male | 45 years old | Colorado

"I just installed this today the app is great, you can take pictures add them to the app we're each station is at trouble shooting sprinkler is easier I can turn section on make my sprinkler adjustment. The rain delay is money, literally, helping me conserve water and money."

Results

In May 2021, we launch a new version of the B-hyve app in light and dark-mode version. Both versions of the app are more legible for our users. Since I'm the only UX Designer at B-hyve, my responsibility was to redesign the entire B-hyve app using Figma. I used google material design system for android and Human Interface Guidelines for iOS.

After launching the new look and feel of the B-hyve app we saw lots of positive customer reviews on both the App Store and Google Play Store. The app rating on iOS and android increased from 3.8 stars to 4.1 within 3 months of launching the new design. Now, in 2023 the ios app has 4.7 on the app store and 4.6 on android.

In May 2021 the app had about 500,000 users, now the app has more than 1.7 millions active users in the entire world.

Reflection

The team was very happy with the B-hyve app redesign. Looking back to the entire process, I wish I had more time on this project to conduct more user interviews and user testing, specially for the Smart Watering feature.