UX and UI App Design for cataloging trees and their habitats

Category: App Design

Date: Summer 2018


HAFL, based in Zollikofen, Switzerland is a center of excellence in the
agricultural, forestry and food industries.
Their goal is for HabiApp to help them identify trees in Switzerland forests and catalog their habitats with required information and images.


Around 31% of Switzerland is covered in forests. There is a need to identify tree species that make those forests, assess their health and state, and catalog potential habitats present on them.
The application will be used by forest rangers, not tech-savvy users, therefore it should be as simple and straightforward as possible while maintaining strong visual contrast and large elements for ease of use in outdoor conditions. It should also be color-blind proof.
App functionalities include capturing the GPS position of a tree, its properties (live vs. fallen, habitat vs. healthy) and potential habitats (an entry based on a hierarchical order and an illustrated catalog), with photos of both trees and habitats. The user must be able to enter and view the data immediately, sync it to a server, and share the data via email.


The main UX challenge was to facilitate the entry process for habitats which are organized in a complex catalog system, and simplifying their display once entered in the app. This was solved by creating a clear visual hierarchy by using color, indentations, accordions and clear identification of steps in the process. This way, the user is provided with a clear overview of selected items and an easy way to navigate through them. The habitat catalog items were split into three groups, browsing through them is based on accordions and each item contains images and descriptive texts to ease the selection process.
The HabiApp UI is completely adjusted to outdoor use, with green as a dominant color referring to the botanical nature of the app, and large elements to reduce the possibility of error while working in outdoor conditions. The UI color scheme is tested and approved for color-blind use.