Client dashboard – EcoTree

About the company

EcoTree is an European provider of nature based solutions that benefit the environment. Individuals and companies can contribute to the development of forestry and biodiversity projects.

The project

Redesign of the website’s client dashboard. This is where people will see their trees, biodiversity projects they’ve contributed to, subscriptions and also have all the options related to their account: update their information, choose notification settings etc.

The main problems that we needed to solve were:
– outdated UI, various visual inconsistencies, various colour & alignment issues. Needs to be consistent in terms of visuals & interaction principles with the Design System
– Redundancies in the way it was set up. Many ways to do the same tasks and access the same info
– Non intuitive sitemap, people had a difficult time finding what they were looking for

The team

The design team was composed of two full-time product designers, including myself, and a student designer who supported us during the research phase. We collaborated mostly online, as the two were working from the office in Paris while I was working from Copenhagen. We didn’t “feel” the distance at all, thanks to Figma’s excellent collaboration features and the harmony in the team.

Research

We’ve began the project, by doing a benchmark of what are the most common user expectations from this type of dashboards and best design practices. Followed by competitor analysis, a survey, testing and an UX audit of a current version of this dashboard.

Sitemap, wireframes & idea testing

We concluded from the testing, that the menu was not intuitive enough to find everything that the users needed. So, we’ve made a new sitemap and re-organised the information.

In order to see if we made the right decisions, we’ve done a cart sorting test and created wireframes to do prototype testing. We iterated until we reached good results in the tests.

The UI design followed the Design System we’ve established a year before, giving the screens consistency and a “feeling” of the design being more connected to the one of the landing pages. This was one of the requests from the brief and also an objective we wished to accomplish. It’s a breath of fresh air when the pieces of the puzzle come into place and we could see a final product that we could be proud of.

Thank you for your attention!