Our work
ClevAir
UX & UI design for global SaaS platform

Design for ClevAir’s world leading SaaS-based solution that uses IoT, AI and machine learning for energy optimisation of HVAC (Heating, Ventilation and AC) in commercial buildings.

The ClevAir platform

ClevAir has been named by Ernst & Young as one of 30 “Accelerating Entrepreneurs” globally and named Europe’s most innovative in construction technology in the “BUILT WORLD Innovation Contest 2020 Europe” competition.

In 2021 our Norwegian client, ClevAir approached us to work on a complete redesign of both the UX and UI of their award winning platform.

“Wagile” methodology

We can work in a variety of project management methodologies, but we found a combination of Waterfall and Agile to be the best for this project. We call this approach “Wagile“.

Working first in a waterfall process, getting the overall direction right, the bigger picture, and establishing design usability principles. Then once the initial interface had been designed this moved to the ClevAir development team to implement. We then worked in shorter Agile design sprints around specific features and functionality. With our design team working one sprint ahead of the in-house development team.

Setting solid foundations

Our discovery phase ensured that we understood the product, the audience’s needs and the sector it operates within. Our discovery included:

  • ClevAir product demo
  • Competitor review
  • Scope of existing functionality
  • Creation of use cases
Mood board

The second part of our project was to explore best practice of what others were doing in the sector, and how design solutions from different sectors approached similar challenges. We collected a library of visual examples, that we discussed with the client before any original design was started. This increased the speed of the design in the later stages, as we could compare and contrast potential design solutions early on with ClevAir. Our mood board covered the following:

  • Competitors
  • UX: Industry standard interfaces
  • UX: Navigational approaches
  • UX: Sidebar navigation
  • UX: Gamification
  • UX: Date pickers
  • UX: Progress indicators
  • UI: Bright and playful
  • UI: Rigid and professional
  • UI: Hybrid of the above
UX sketches and wireframes

Once the use cases were finalised and initial approaches discussed, we started creating high level paper sketches and wireframe prototypes. These wireframes could then be shared across multiple stakeholders for quick iterative feedback. High level design tasks included:

  • Navigation and general interface / grouping of similar tasks
  • Building pages
  • Comparing buildings functionality

Once the high level design was completed we moved onto more detailed functionality inside the platform including:

  • Date variations
  • Onboarding process from email, first login, set up and tutorials
  • Settings
  • Reports, help and feedback
UI design

Once the key functionality and layout had been agreed, we moved onto the creative UI design stage that included:

  • Multiple initial concepts
  • Concept refinement to an agreed concept
  • UI rollout to wireframes
  • UI component library
  • Loading animations
Developer handoff

During the design process, the development team were involved at key stages, to give feedback and to influence the design. At the end of the design phase we were able to export inspectable assets using Adobe XD, that enabled an efficient transition into the development process.

What our client says…

As a SaaS company our focus is on developing our quite complex software with focus on technology and features. Unfortunately, that did not take into account the UX/UI needed for our end-users.

When developing our latest version of ClevAir software, we finally realised we needed help. Through common contacts we turned to Made with Maturity and found them to be responsive, competent, easy to work with and helpful in making our somewhat unclear thoughts and wishes materialize into exciting human centric designs. We enjoy working with the team at Made with Maturity as they help us, guide us and do the bits we don’t do well ourselves. It’s that simple.

Bjørn Gabrielsen – CEO – ClevAir – Norway

Coming soon…

The ClevAir platform is currently due for release in Q2 2022. For more info, please take a look at the ClevAir website.

Contact
Let us help you with your next digital project
Why the trees?
So what does a forest of trees have to do with UX web design? It’s not that weird – take a look at how we see it.