Arboreal

Web design of the landing page of Arboreal - AR-based app for measuring trees

Arboreal

Overview

Arboreal is a startup company that developed tools for measuring trees. Their first app - Arboreal Height measures only the height of the trees and it is using AR elements. The second app - Arboreal Forest also includes this option but has additional features like taking samples from the trees. Their main target group are forestry workers who can do their job without carying a lot of heavy tools. My role was to create the design of the landing page and later several animations for their second app.

Landing page

In the beginning Arboreal’s site was just a blog with several posts about the main milestones, based on Wordpress CMS. The company needed a redesign and a new way to show their MVP app - Arboreal Height. On the first meeting with the client we decided the layout. I had the freedom to choose colours and other images.

I approached the task by a quick research of other companies that work in the same field. Most of them were using shades of green so I tried to find the right shade which is not “too bright green”. The first version of the design looks really light with transitions from the white background to the images.

image

On the next meetings we agreed that the colours should be different and instead of regular photos there should be some illustrations similar to the popular micro trend, posted by uxdesign.cc. Those meetings resulted in several iterations focusing on the style of the images - from just a simple line through something with more colours to another version with photos.

image

After a short pause, the client showed me some hand-drawn illustrations and asked to do something with them, trying to avoid photos as much as possible. Unfortunately, none of them was appropriate for design but their backgrounds had some watercolor-like splashes which I used around the page, together with mockups that show the product. This is the last suggestion from my side.

image

Animations

The company focused on the development of the products - they aimed to make their app available for Android devices too. Therefore, the landing page was left for a later stage.

The controls of the app were deferent from the natural ways to measure something with or without a phone - mark a starting point by tapping on a button and second tap for marking the end point. That is why there was a need to show the user how to use the app properly. It is well-known that users don’t like to read boring explanations and if an app has onboarding, they just tend to skip it. I suggested that the texts could be replaced by short animations that visualise the steps.

The video below shows 3 suggestions on how the gestures “tap” and “drag while still holding the button” could be animated.

Here are all of the steps that the user needs to go through in order to measure the height of a tree:

  • Step 1 - The user has to go near to a tree and put a mark on it by pressing the button
  • Step 2 - The user has to go several steps away from the tree but try to keep their phone in upright position
  • Step 3 - Point the camera down and mark the lowest visible point of the tree
  • Step 4 - Mark the top of the tree

And this is a screen recording of my phone, showing the animations, implemented in the app.

Apart from those, I created several more which are also implemented part of the app but they are shown in different places, like the ones below.

image

After the first marked tree, the app creates a virtual circle around it. If the user gets too far away from the center (i.e. the tree), the app will remind them that they might accidentally cross the border which might affect the results

image

After measuring all of the trees in the area and taking samples from them, the user has to press the ‘next’ button to continue using the app

Time frame

December 2018 - July 2019