Tree Matrix is a tree preservation web app that uses a predictive analytics engine and mathematical algorithms that gives you the ability to predict the impact of a tree’s root zone with survivability scores for each tree before and during the construction process.
- Created preliminary wireframes for client for testing and validation by using Adobe XD.
- Established visual pattern and branding language according to client's style guide.
- Converted wireframes to HTML/CSS code and delivered to developer to wire up the backend elements.
- This site is powered by Drupal.
I worked with an illustrator to compose these drawings. These diagrams had to have the correct ratio and proportion. Since the website performed mathematical equations and algorithms, the relationship between the tree size and its roots had to be represented accurately.
I integrated CAD drawings into the web app and layered vector elements using CSS z-index properties.
I performed a number of user tests as we developed the backend flow of things. I used a Wizard type of approach for the user to upload their landscape plans for the engine to calculate.
Another screenshot of one of the steps in the landscape plans upload flow.