Gardena - Smart Garden System

Refine the user flow and experience of smart garden system on Android platform

Together with two senior UX designers at Designit, we worked two weeks to refine and test the interaction flow of Gardena Smart System, a German manufacturer of smart gardening tools, based on Android platform.

I was involved in the project from refining typical user flows on Android platform to defining design regulations to detailed wireframing to creating interactive screen prototypes.

You can find the final work at Google Play Store.

Personal contribution:Defining & mapping user flows; Android regulation documentation; Wireframing; Mobile interactive prototying

Team: Damion Bailey (former Senior UX Designer at Designit), Burcu Arsoy (Senior UX Designer at Designit)

07/2015

Responsive image
Responsive image
Responsive image
Responsive image

The video is on Youtube


See the process supplement file for the whole project here

User Journey and Architecture

Gardena approached Designit to develop its first version of Smart Garden System, which consist of the smart irrigation system with water computer and sensor, the mower, the gateway which is in control of the network connection, and the smart application to monitor and control everything in the system from a distance.

The first part of the project was establishing personas, mapping out the customer journey based on considerations of different personas, defining main features in the mobile application, generating UI flows and information architecture quickly based on the customer journey for each feature needed in the application.

Gardena-UXflow1
Gardena-UXflow2

Click to view the full customer journey

Click to view the full customer journey

. . .

From Logic to Wireframes

The draft version of wireframes was generated fast, without fully consideration of the design regulations for different operation systems, i.e. either IOS system or Android system. The design focus was more about mapping user flows across screens, defining key features and components in each flow. The initial draft version of wireframes was created by previous interaction design intern YeDan Qian, who was invovled in the project at an early stage.

Responsive image
Responsive image

Click to zoom in more details


Extra attention was given to the consideration of product details, such as the different start/park options for the mower.

Gardena-mower1

Gardena-mower2

Gardena-mower3

Gardena-mower4

As in schedule, considerations were given to various situations of time conflicts. As shown below in the wireframes.

Gardena-time1

Gardena-time2

As for various connection and system problems, the app should have distinguished visual notifications.

Gardena-connection

. . .

Android-focus Design

As a german company with big domestic market share, Gardena decided to open its initial product market in Germany. According to the desk research at Designit, more than 70% of smartphone owners in Germany are based on Android operation system. Designit thought it was more efficient to firstly develop and refine the mobile application based on Android platform.
Taking full consideration of the user behaviour and design regulations on Android platform, our team have refined the interactions and UI elements in the user flows. Detailed wireframes under Material Design regulations were developed. In order to demonstrate the key features and design regulations, we picked four main user flows to create interactive prototypes with motion effects. The four flows are:
1. Adding water computer and pairing (selection button, back arrow, progress bar, pairing);
2. Mower details: Frost warning, connected partners, battery status, whether to remove product from the system (snack bar, dialogs);
3. Sensor data (humidity, luminance, temperature) and action overflow button (buttons, swipe motion);
4. Navigation menu (covers page);

Gardena-flow1

Gardena-flow2

Gardena-moisture.gif
Gardena-sun.gif

Gardena-temperature.gif
Gardena-NV.gif

As a supplement of our design deliverables as well as for a better discussion between the in-house designers from Gardena and our team, we decided to create a document, in which all the changes with consideration of Android regulations were given. What’s more, app samples from Google Play store and Material Design were clustered as interaction examples.

The documents served as further explanation for each detail we developed in the user flows. The documents resulted in a sound effect to engage design discussions from both sides with enough evidence and live examples.

Sample pages from the supplement document

Gardena-supplement1.png
Gardena-supplement2.png

View the full document here