Sky Farm IoT Kiosk App Design & Publication

Portfolio Introduction

Skyfarm leverages IoT technology to provide smart plant management solutions. This project showcases the design and publishing of a kiosk app that effectively displays the current status and comprehensive information of plants based on Skyfarm's IoT sensors. The core of this project is to provide users with visual information that allows them to quickly grasp the plant's condition and take necessary actions.

Scope of Work

The scope of this project was structured in the following stages:

Requirements Gathering

We thoroughly analyzed the customer's requirements to establish the functions and design direction to be implemented. Key requirements included real-time data reflection, enhanced user accessibility, and an intuitive interface.

Storyboarding

Through consultations with the client, we created a storyboard outlining the overall app flow and key screens. The storyboard visualized the layout, function placement, and user interactions for each screen, serving as a crucial step in the planning phase.

Design

Based on the storyboard, we proceeded with UI/UX design. We carefully designed the colors, icons, and graphic elements to visually communicate the plant's growth status. High-quality graphics were created using Adobe Photoshop and Adobe Illustrator.

Publishing

This phase involved actual implementation using web technologies to bring the designed screens to life. We developed the user interface with HTML5, CSS3, JavaScript, and jQuery. To effectively convey data visually, we utilized libraries like Chart.js to create various charts.

Key Features

The main features of this kiosk app are as follows:

Real-time Data Display

The app updates the plant's status based on real-time data collected from IoT sensors. Users can monitor temperature, humidity, and soil moisture levels in real-time.

Diverse Chart Representations

To convey data intuitively, we implemented various types of charts. Line charts, bar charts, and pie charts were used to visually represent changes in the plant's condition.

Alerts and Notifications

The app provides alerts and notifications when certain conditions are met. For example, if the soil moisture level drops below a certain threshold, a warning is displayed, prompting the user to water the plants.

User-friendly Interface

Considering a wide range of users, we designed an intuitive and accessible interface. Large icons and clear text were used to ensure that anyone can use the app easily.

Technologies Used

The following technologies were utilized in developing the kiosk app:

Frontend Technologies

• HTML5: The latest HTML standard was used to structure the web page and include various multimedia elements.
• CSS3: The latest CSS standard was employed to implement the design and apply responsive web design for optimal display across various devices.
• JavaScript: Used for dynamic functions and interactive elements, with AJAX for real-time data updates.
• jQuery: This library was used to simplify JavaScript usage for DOM manipulation and event handling.

Design Tools

• Adobe Photoshop: Utilized for graphic design and image editing to create high-resolution images and design UI elements.
• Adobe Illustrator: Used for vector graphic design to produce high-quality icons, logos, and graphic elements in vector format.

Conclusion

Through this project, Skyfarm has demonstrated new possibilities in plant management using IoT technology. By providing intuitive design and real-time data, we have offered users the convenience and efficiency of plant management. The visual representation of data through various charts has maximized the user experience. Skyfarm will continue to develop innovative solutions incorporating the latest technologies to provide an even better user experience in the future.