UX/UI Design for Ecological Platform

Project Plan


The design implemented in the functional product after two months of work


2 Stakeholders, 3 UX/UI Designers, 2 Business Analysts


2 months


170 hours, 32 screens, mobile responsive, documentation


The design implemented in the functional product


Ecologists worldwide have been keeping track of species, biodiversity, and habitats on our planet for a long time. Traditionally, observation and data have been logged in notebooks. With the appearance of various technologies, data logging has become easier in the field, and entering numbers directly reduces error in the transfer from paper to spreadsheet or database.

Ecosulis has been working for some time to automate data collection and analysis in the field to reduce the costs and time for surveys. Their biodiversity quality calculator and habitat valuation assessment tool both started as spreadsheet-based tools to analyze biodiversity and habitat in a variety of sites and conditions. They needed assistance from Cieden to cross-walk these tools to an easy-to-use online platform that was intuitive and efficient.



  • A project that makes a difference in the world
  • Field professionals on the client’s side
  • Trust in our design decisions from the client’s side
  • Access to actual processes


  • Client’s main engagement is not in tech
  • No access to end users
  • Lack of time for research
  • The backend was done but not completely functional

Discovery Phase

As a start, we got access to the functioning product. However, only the backend was still in progress, so figuring out all the functionality was a challenge. At this point, we needed more answers from the client.

Cieden realized that Ecosulis had enough knowledge in the field to describe the user's usual process and needs. His answers plus an excellent brief gave us a good start. We were able to provide a detailed estimate of our work and provide a roadmap.

UX/UI Design for Ecological Platform

As they say, planning is 90% of the job. Having a good plan, we can sprint really fast into the results we want to achieve.

The product consists of three parts – 3 different calculators of similar style but different functionality. We agreed to start with the first one, finish it from A to Z and then move on to the other two. Thus, by the time we approach the other two sections of the application, we would already have a design library and basic flows to build from. Using the atomic design approach, we saved a lot of time on the other two calculators.


UX/UI Design for Ecological Platform


We agreed to start with a small trial concept of Ecosulis to see if we understand the challenge at all and if we can translate the requirements into design. This task served as our first wireframe and a style guide of some sort that defined the direction we moved forward to.

UX/UI Design for Ecological Platform: Wireframing

UI Concepts

On the one hand, coming up with the style so early in the design process is not recommended. However, the branding had already been done before we entered the
project, and as we build a library of components, that were used from now on to build any components. We had to change it only once slightly, to match all three calculators together.

UX/UI Design for Ecological Platform: UI concept
UX/UI Design for Ecological Platform: Color and Typography

Gamification Techniques

Being a product of actual ecological significance, Ecosulis offered a great opportunity to develop gamification techniques. Following Yukai Chou’s Octalisys framework, we had a small brainstorming session with the stakeholder. As a result, we realized that no black-hat techniques were needed, just like for Wikipedia, for instance.

Monitoring the changes in real-life ecological processes creates a feeling of empowerment and control, not just as a ‘game’ but as an actual influence.


UX/UI Design for Ecological Platform

Katya and Cieden were great to work with and very responsive to changes in the project. They were especially good at the over design and taking our apps to an easier-to-use level.



start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent