Embedded Files
Mobile App Redesign
Mobile App Redesign
In 2019 I redesign the B-hyve smart sprinkler timer app.
Role
Role
UX Designer, UI Designer
Team
Team
Eric Price: Product Owner
Jase & Michael: Mobile Developers
Timeline
Timeline
3 Months
Tools
Tools
Figma
OVERVIEW
What's B-hyve?
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 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 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.
IMPACT
The app rating on iOS and android increased from 3.8 stars to 4.1 within 3 months of launching the new design.
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.
GOAL
Update the B-hyve app on brand.
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.
The B-hyve app before the redesign.
Observations
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
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
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
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
Visual Design
I used the existing B-hyve packging branding for the mobile app redesign.
Mobile App Site Map
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
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
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
Calendar
View all past and future scheduled watering programs.
Programs
Programs
Program Slots for users to scheduled watering programs.
Home
Home
Rain Delay, Stop and Skip feature.
Zones
Zones
My Bhyve
My Bhyve
Zone Details
Zone Details
Smart Details
Smart Details
My Devices
My Devices
Program Details - Part 1
Program Details - Part 1
Program Details - Part 2
Program Details - Part 2
Program Slot
Program Slot
Calendar Day view
Calendar Day view
Manual Watering
Manual Watering
Manual Watering - Run Time Selection
Manual Watering - Run Time Selection
Starting Manual Watering
Starting Manual Watering
Active Manual Watering
Active Manual Watering
Rain Delay, Stop and Skip feature.
Rain Delay options
Rain Delay options
Rain Delay feature: 12 hours, 24 hours, 2 days or more.
Rain Delay
Rain Delay
Rain Delay feature: More than 2 days.
Push Notifications
Push Notifications
Help
Help
Soil type
Soil type
Plant Type
Plant Type
Sprinkler Type
Sprinkler Type
Sunlight
Sunlight
Rainfall
Rainfall
Slope
Slope
Schedule Adjustments
Schedule Adjustments
Feedback
Feedback
For you
For you
Soil Moisture
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
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
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.
Page updated
Google Sites
Report abuse