This project developed my understanding of how to redesign and prototype an existing app’s usability and UI. Using the double diamond approach I improved the user experience of three main user flows. Throughout the process my mentor acted as ‘the client’ giving feedback and accepting/rejecting deliverables.
Irrigation control systems can be very intimidating. Irrigation involves a lot of complexity ranging from:
- A network of hardware set up in your yard that needs to communicate with your phone via wifi.
- Confusing irrigation terminology
- Knowledge of weather terminology
- Setting up watering schedules based on parameters of the users yard (soil type, grass type, sun exposure)
The average person doesn't have this knowledge. The Hydrawise app manages to complicate things further by using poor microcopy, deeply embedded menu links, and fails to use common design patterns and UI elements/colors.
Using common design patterns, improved microcopy, and eliminating confusing processes the app is much easier to use. The use of a design system by way of the atomic design approach made the final UI consistent and professional looking.
Using the double diamond approach I set out to check and refine my problem statement and design the solution right. Using divergent and convergent thinking I was able to remove bad ideas and keep good ideas. I prefer the double diamond approach as design is an iterative process, not linear as seen in the illustration.
Understanding Irrigation Controllers
I started this project by gaining a base understanding of how these systems work and all the terminology involved. This research included: zones, programs, weather based watering, water scheduling, and more. I studied what these processes are and how their setup works.
I continued by tearing down the Hydrawise app and comparing to some competitors. Going through processes like, setting up a zone, I took screenshots of each step organizing them into work flows. I compared flows side by side with Hydrawise, taking note of how other companies do the same tasks.
Pain Point Definitions
Using convergent thinking I set out to define what work flows will be redesigned. Going through each flow with a fine tooth comb I listed every issue I saw. I ended up with 10 work flows and all their pain points attached with post it notes.
Problem Synthesis and Suggested Solutions
I then took all the pain point definitions and synthesized the data into high level problems. For each 'problem group' I brainstormed suggested solutions.
Using my brainstorm of problems and suggested solutions I started sketching wireframe ideas. This helped me identify which of my suggested solutions would work best. At this point I focused on three flows with the most issues: adding a controller, editing a zone, and adding a program. I chose my best wireframe ideas and organized them digitally using Sketch App.
Problem & Solution Wireflows
I ended up concentrating on three main flows: adding a controller, editing a zone, and adding a program. I made sure to create all flows following a ‘Happy Path’.
Global changes to the app included:
- Using common design patterns familiar to users
- Removed hamburger menu
- Improved and/or added microcopy
- Removed redundant ‘Prev’ and ‘OK’ buttons
- Cleaned up unnecessary whitespace
- Made CTAs easier to view and larger to tap
Adding a Controller Device - What Changed?
The main improvements of this process were as follows:
- Removed redundant setup processes zones and programs
- Added wifi setup to the wizard
- Added the ability to add a controller directly from home screen
Editing a Zone - What Changed?
The main improvements of this process were as follows:
- Ability to run zones directly from zone tab
- Add photo in wizard process
- Added dynamic updating
- Replaced hard to edit bar graph with common design pattern sliders
- Separated operations like cycle and soak and seasonal adjustment for easier viewing
- Ability to add time directly from counter when manually running zone
Adding a Program - What Changed?
This process improved by the following:
- Separted the programs setup from zones setup
- Replicated UI from zones setup as its already familiar to user
- Combined start time and program setup into one
- Added dynamic screen updating
- Ability to run program straight from programs tab
Low Fidelity Prototype
I demonstrated the design using a low fidelity prototype to my mentor who acted as the 'client'. Using this simple prototype we ironed out any issues with the proposed solutions.
High Fidelity Design
Once it was determined the suggested solutions were satisfactory I moved onto making the design high fidelity. Using the atomic design approach I set out to create a design system. First creating a baseline system of spacing, type/size, color, shadows, border radius/width, opacity, line width. Then auditing the original Hydrawise design I knew all components etc that needed to be designed. Using the baseline system and audit I could then create a library of components including: icons, containers, user input elements, hi-res photos, modals, and cards (see illustrations below).
Design System Baseline
Original design & wireframe audit
High Fidelity Screens
Using an 8px grid, the library created from my baseline design system and audit, I created the newly designed screens. Compare the new UI to the original below!
Newly designed screens
Using the double diamond approach of divergent/convergent thinking I was able to remove bad ideas and redundant processes while keeping good ideas. This project also taught me the importance of using common design patterns and good microcopy. With these principles complex operations can become quite intuitive.