Firmware and mobile integrated cloud app ready for consumer release and mass production
The Scotts Miracle-Gro company embarked on a major initiative to develop a water-based plant growing system, Miracle-Gro® Twelve™, which successfully passed the Proof-of Concept phase. The Scotts Miracle-Gro team had a fully-tested product and wanted to release it to mass production.
Scotts Miracle-Gro needed to ensemble a team that could support their ambitions of scaling the product in the limited time frame.
The Team needed to create new features and stabilize the firmware before the devices went on sale. Moreover, the client needed to further develop a mobile iOS and Android apps. In terms of UX/UI, Scotts Miracle-Gro turned to Ciklum product design services to assist the user experience wireframes and team to finalize a fantastic user experience.
- Developed the Miracle-Gro® Twelve firmware and mobile integrated cloud app that was ready for consumer release and mass production.
- Conducted research and mapped the customer journey based on the collected insights. After creating wireframes and designing the user flow, the team created sophisticated and user-friendly visuals. The app was smooth, had a fluid interface, and robust functionality.
- Application Development
- Quality Assurance
- DevOps support
- Firmware Development
Application Development
The team developed enhanced the mobile application with partially reused code from another Scotts Miracle-Gro product.
Firmware Development
On the firmware side, the team added several features:
- Bluetooth OTA (over-the-air)
- Logging through UART (Universal asynchronous receiver-transmitter) and RTT (Real-Time Transfer)
- Advertisement mode for iOS through iBeacon protocol
In addition, some key parts of the firmware were modified to improve reliability and prepare the Miracle-Gro ® Twelve ™ for mass production
DevOps
The Team moved several Database solutions to AWS native PaaS solutions, and applications were redeployed as scalable and fault-tolerant solutions. AWS Cloud became more robust and ready to handle more capacity when demand goes up.
Software testing
Software testing was executed covering four areas:
Firmware testing
- Bluetooth provisioning for versions from 4.2 to 5.0
- Firmware functional testing
Mobile App Testing
- Android versions compatibility from 4.4 to 8.0
- iOS versions compatibility from 9.0 to 12.1
- Application installation and update testing
- Functional and usability testing
Hardware testing
- Device assembling and disassembling
- Filling with water and emptying the tank
- Water pump maintenance
- Light mode control by Cap-Touch
Integration testing
- The team ensured that all components successfully integrated and interacted without errors
- BLE 4.2
- Nordic SDK
- iBeacon
- Ionic framework
- IoT Cloud platform connectivity
- Python Django \ HTTPS (REST)
- BLE OTA FW upgrade – Nordic DFU
- Sensors: CapTouch, overcurrent, water level
- Actuators: PWM
- Infrastructure as a Code: SaltStack
The team delivered a fully fledged IoT solution including the device firmware, mass-production support, mobile app development, cloud and infrastructure. The Miracle-Gro Twelve Growing System device currently has very favorable ratings on the respective App Stores.
The partnership enabled the following:
- Increase the number of loyal users by empowering them with a brand-new mobile app to control Miracle-Gro Twelve Growing System devices;
- Validate the feasibility of producing an IoT solution on a large scale;
- Retune the IoT device for mass production;
- Accelerate digitalization inside the company.
- Jeremy Tiller
- DTC & Hardware Product Manager at Scotts Miracle-Gro
- Product design solution
- Research Wireframing
- Visual Design
Research
The following key insights about users drove design solutions:
- have little background knowledge on the product;
- no expertise in plant growing;
- might feel frustrated while assembling the device;
- can’t wait long to get started;
- need consistent experience between app and device.
Based on the insights collected, the Team mapped the ideal customer journey, that should include the following:
- balance between the many steps of the setup process and user’s attention span;
- guiding and educating users throughout all phases of interacting with the product;
- holistic user experience between app and device.
Wireframing
Guiding users through setup
The setup process included 15 steps. The goal was for users to get clear instructions and not feel overwhelmed.
Checking various solutions
Hallway testing with peers were conducted to receive feedback on various parts of this flow. The Team had to redesign the flow until it reached a spot where the content and order worked best for users.
Giving users control
One of the key features of the app is the ability to adjust the light mode remotely. In the designs the team received from previous iterations the status of the light mode wasn’t completely evident so a redesign was required to clearly show the current lighting mode and the possible options to choose from. Switching modes is initiated in 1 tap. Changes were made in the order of the content and functions according to the frequency of use.
Visual Design
Going with bold visuals
The visual approach was based on the Scotts Miracle-Gro brandbook. There was no chance to modify the bold yellow, so it was accompanied with a bold black font.
While defining the visuals of the app there was close collaboration with the marketing executive / Product owner to ensure that it reflected the brand’s identity established on the market.
Adding bright touches
The design was kept flat with the usual visual patterns that mobile users are accustomed to with the exception of some custom touches. Noise was also kept down throughout the app, using muted background colors but adding bright accents on some controls to maintain the upbeat feeling and keep users intrigued and engaged. Several new icons aligned with the brandbook style icons.
Illustrating device assembly
The setup process required clear visual instructions. Referencing the original schemes of the devices created clean illustrations to demonstrate each step of the assembly. Life-like illustrations were created in parallel perspective so the device looks the same from different angles and when zoomed in.
Guiding users through animation
To make the assembly process even easier for users instructions were displayed through animations. The challenge was to create short yet informative animations which would be clear for users, so colored pointers were added to focus attention on important details. This combination of illustrated and animated instructions supports a fun and engaging concept for the setup process.
Product design – Result
The Scotts Miracle-Gro / Ciklum team developed an app with a smooth, fluid interface and robust functionality
- After the app was introduced, Scotts Miracle-Gro users distinguished it as “sophisticated and user-friendly”
- The app allowed the company to spark up the interest of current users and increase customer loyalty
The app is available for download here:
