Creating a card that is easily editable

Alyoop
Jun 6 · 5 min read

Hydrawise, the innovative hybrid app to remotely water your garden. A much more complex project than you might think!

Hydrawise combines the irrigation hardware with bespoke software to help users maintain and schedule their watering system, saving them money and buckets of water (pardon the pun). But we aren’t talking a simple on and off switch. The application can manage complex timing scenarios, multiple locations and users (such as for irrigation contractor businesses), and can even react to locally collected weather data. While the features of Hydrawise were pretty new age, the user interface of the application had become a little dated and the user experience needed some careful consideration so users didn’t get lost in all the options and functions. That’s where we came in…

One of the main components (and notoriously tricky bits) of their products was their Zone Card. Basically, a Zone is an area assigned in one’s garden, field, oval etc which contains a sprinkler or some other sort of irrigation device. This Zone Card held all the necessary settings where a user could control how and when their zone was watered, AKA the primary function of the application.

Before Card

Before

This card fits in a thirds grid system on a desktop screen, showing three cards per row. On mobile it is stacked in a standard way. From a hierarchy perspective, the card starts from the title of the Zone (defined by the user earlier on in the flow) and then flows through to the settings and output data. At the bottom, there is the interaction bar for the user to delete the card, edit settings, or change the title icon.

Before: Objective Problems

Issues — Objectively Speaking

A few of the more objective design problems were:

  1. The icon, although attempting to assist the user to understand where they are, isn’t actually related to the Zone name. The handful of icons a user can choose from are arbitrary and difficult for a user to associate with real-life locations, particularly if they have a high number of locations to consider.
  2. The setting icons don’t do a lot to explain what each setting does. For example, without the title next to them, the icon for Frequency could be just about anything and the icon for Sensors looks as much like a target as a sensor. The icons become visually distracting and taking up unnecessary cognitive load, especially when the titles are short and relatively easy to understand simply as text.
Before: Subjective Problems

Issues — Subjectively Speaking

A few of the more subjective design problems were:

  1. The way the information has been displayed has 2 sections. 1) Title of the zone and 2) the settings. This is normally fine, however, it would seem to the user that the settings presented all have a connection with each other, this is not the case. Once the user clicks the edit icon and the settings page appears, the user will realise the settings do not relate in sequence.
  2. The titles of settings have taken a prominent parent position in relation to the output data (the child in this case). However, as there is limited data under each title, users looking to quickly scan the page would be more interested in the data than the headings.
  3. The titles and data of each setting are not clickable. With all interactive elements sitting at the bottom of the page, it is less intuitive and immediate for a user to change individual settings.

After

Our updated card design uses images instead of icons to visually identify a Zone, has introduced more sections to improve taxonomy, and removed icons to avoid visual distractions.

After: Objective Improvements

Improvements Objectively Speaking

  1. The addition of an image, which users can upload from their smartphone, makes the card more personalised and tailored, while allowing users to have a literal photo of the zone the card is referencing.
  2. Icons have been removed from both the title and the settings. The card is less busy in terms of graphical elements, allowing users’ attention to be drawn to the data that is the primary focus of the screen.
After: Subjective Improvements

Improvements — Subjectively Speaking

  1. The addition of multiple sections allows users to edit settings from the same place on the screen where they see the setting title and output data, through an edit link in each individual section.
  2. The text size of the settings titles has been decreased, and the text size of the output data has been increased, putting more emphasis on the data as the primary focus of the screen. For the product to be effective, users would be engaging with the application on a regular basis and learning where components live on this very common screen. This will eventually make the titles a little more passive, with the data being much more important to be quickly understood in a scan of the screen.

Result

Success! Some positive user testing showed that the majority of users understood and were able to effectively use the new design. While not all elements of the overall design have been rolled out yet, it’s looking promising that the UX and UI overhaul will lead to increased engagement and more delightful user experience for Hydrawise customers.

If you want to know more about how we redesigned their full product, please read the full case study here.


Hey there, we are Alyoop 🏀
A small UX/UI agency who think big. If you would like to know more about us and our work, please check out our website 👉 Alyoop

Follow us on Instagram | Dribbble for more design work.

Alyoop

Written by

Alyoop

We are a small Melbourne based design agency ✌️ serving up thoughtful, beautiful products that make users happy. 🏀

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade