Design Case Study: Watering Tracker. Mobile UI for Home

In all the diversity of applications fulfilling different personal, social, and business needs, the special place will always belong to the ones that become our everyday helpers in sometimes basic but necessary operations. Calendars, calculators, to-do lists or fitness timers, apps saving our menus, and reminding to take medicine along the schedule – all this simple stuff makes users’ lives much easier. The apps of this kind increase productivity as well as save time and effort for multiple challenges life prepares for us on a daily basis. Designers creating such interfaces become a sort of magicians activating the problem-solving potential of modern technology. Today we would like to share a new design case study telling about that kind of UI: welcome to check the creative flow for Watering Tracker App.

Project

User interface and interaction design for an iOS application tracking plant watering.

Process

Have you ever forgotten to water plants at home? Being busy with hundreds of tasks, we sometimes miss very basic things and then regret not doing them on time. With pieces of nature, the effect may be even more crucial as they can get sick or even die without proper care. The task for the interface concept of a mobile app was aimed at helping users having plants at homes or offices: first of all, it had to remind users of watering when it’s needed as well as keep the data about watering.

As we mentioned in diverse articles devoted to UX design, high-quality user interfaces should harmonically satisfy four basic aspects:

• usability: the app is convenient, clear, logical and easy to use
• utility: the app provides useful content and solves users’ problems
• accessibility: the app is convenient for different categories of users
• desirability: the app is attractive and problem-solving, it retains users and creates a positive experience which they are ready to repeat.

Based on that, Tubik designer Anton Morozov under art-direction by Ernest Asanov set the goal to make the application not only problem-solving but also informative to broaden its utility. Also, the appearance of the app was an object of thorough attention: as that was definitely the app for daily use, why wouldn’t designers add a pinch of elegance and sophistication to grow desirability and aesthetic satisfaction?

After the flow of UX wireframing, the designer planned the following set of basic functionality for the app:

• adding plants to the app
• reminders and notifications about watering
• getting information and recommendations about conditions and care for particular kinds of plants
• tracking stats of watering and plans for next week.

Let’s check how the layout was designed and what flows of interactions were planned for the mentioned goals.

Adding items to the app, a user gets his/her own directory of the plants which need to be watered now and then. The left screen on the picture below shows the collection of items that were added by the user: it is shown as a set of tabs. The title above the tab gives the name of the plant while on the tab users can instantly see the notification when the next watering is expected for this position. The icon of drops in the top right corner of the tab helps to set the visual association with water and informs a user that the plant on this tab will need watering soon. In contrast, the lowest tab on the presented screen shows the icon of a tick which means that this item has been recently watered.

This way of data organization lets the user quickly scan the state of things right from this screen if there’s no time or need to move to the screens of every particular plant. The background of each tab features an easily recognizable photo of a natural object. And to add a new item, users need just to take a photo, as it’s seen on the right screen below.

The tab bar is highly functional and simple: it includes three most demanded zones of interactions. “My Plants” opens the directory of the ones tracked for watering, “Add New” allows to create a new item and “My Profile” goes to all the history and stats data.

Adding a plant takes just short seconds. When a user has taken a photo with a smartphone camera, the application recognizes it and offers the data from the app catalog of plants: it includes the name, the background picture and the data of care conditions like temperature, humidity and light rates comfortable for this type. The user may add it to his/her set of tracked plants and it will get seen on the screen with the user’s collection. In case there is no data about a particular plant in the app database, the user can create a new item and add it to the app catalog. This approach has two big benefits: firstly, it will strengthen the app with the ability to add user-generated content; secondly, it will inform app creators and support which types of objects have to enlarge the original app database.

Here’s the animation showing the interactions described above.

Now let’s look into some details of watering tracking itself. When the date comes, the user gets a notification that the item needs to be watered. Opening the screen of that plant, users see:

• the name and the background picture of the plant in the upper part of the screen,
• the interactive zone with the tabs of other plants ready for watering,
• the contrast light tab in the lower part of the screen including information about the plant which can be pulled up to open.

The interactive zone with the tabs of other plants ready for the watering can also be extended. In this case, it opens the graph showing the progress – aka watering workload – for the current week. This zone is presented on the dark background which makes the graph look stylish and deep and also sets the good level of contrast with the information tab below presented on the light background. The information tab is grounded on light and airy solution: in combination with bold sans-serif fonts in the interface, it provides a high readability level and contributes much to the effective visual hierarchy of the layout.

When the plant is watered, the user just needs to tap on the icon with drops and it will transform into a tick.

Slight unobtrusive animation makes the interactions live and enhances the general usability of the user interface.

Working on the concept of mobile user interface aimed at solving simple but everlasting problems of everyday life, the designer made the screens informative, efficient, and stylish. First of all, the app of this kind could be helpful at home, taking over the responsibility of a reminder and tracker. Moreover, it could effectively help workers of the offices, public and private gardens or parks, landscape firms, and services – all those who are in charge of taking care of plants and supporting the beauty of nature around us.

Recommended Reading

If you are interested to see more practical case studies with creative flows for UI/UX design, here is the set of them.

Slumber. Mobile UI Design for Healthy Sleeping
Letter Bounce. UI Design for Mobile Game
Real Racing. UX and UI Design for Mobile Game
Manuva. UI/UX Design for Gym Fitness App
Cuteen. UI/UX Design for Mobile Photo Editor
Tasty Burger.UI Design for Food Ordering App
Home Budget App. UI for Finance
Upper App. UI Design for To-Do List
Health Care App. UI for Doctors
Toonie Alarm. Mobile App UI Design

Originally written for Tubik Blog