AI and satellite data used in Forestry Calculations

From Material UI components to a custom Design System and Component Library.

The Linda Forest AI web SaaS was in a so called “proof of concept” phase and had been validated by customers and investors. The customers had adopted the app in use and governments officials in the nordics were taking the app into daily use.

The app was originally built using Google Material UI front-end library. It was missing some key features due to restrictions set by the existing library. My task was to create new design language for the SaaS and to start building new component library that met the complex requirements set by the data displayed on the app.

Simple UI Design is rarely enough to create a working SaaS design - a deep context understanding is required for a successful outcome.

A rough user testing had been done with the existing developed version of the SaaS app and feedback had been collected. This is quite often the case when a project for developing a pivoted version of an existing app is carried out.

1. Design Props

Used for knowlledge trasfer from experts to design and development team. Used as a tool for deriving component and wireframe designs.

2. Wireframe Design

Understanding complex information architecture requires creating a blueprint of the digital service. This blueprint follows along the whole design process.

3. Design Language

App Design language defines the used colors, images, fonts and other design tokens that define the look and feel of the app. This process is commonly mixed with brand projects but usually means creating content that supports the existing brand.

4. Finalised Components

The component library is built to support the development team and to pass design knowledge to developers. Components act as a touchpoint between designers and the developers.

UX Design: Aleksanteri Heliövaara & Miko Hiltunen

Development: Anh Pham & Kyryll Vynokurov

Project Lead: Janne Järnstedt