Ember: AI Agent
for energy management platform.

About the project

Ember AI is an AI-Agent that helps Ecoplanet platform users to take the most out of the data insights provided by the system.

Client
ecoplanet
Duration

Nov 2023 - Feb 2024 (incl. multiple product optimizations)

Project Deliverables

20+ screens designed, Brand Identity Design Styleguide, Continious Usability testing and UX/UI optimization rounds

01 Context

With Ecoplanet platform small- and medium-size businesses (SMBs) can make informed decisions to optimize their energy consumption and enhance cost efficiency.

02 Problem Statement

How might we design a UX for an intuitive AI agent, that streamlines work with energy data on the Ecoplanet platform?

03 Collaborative Goal

As we began this project, we defined our goal: making Ember AI Agent integral to the Ecoplanet platform from both UX design and look and feel.

04 What we did & My Role

We started this project from scratch. My role was to define Ember AI UX strategy, (in a close collaboration with the CPO and Product Manager), to lay down the brand identity, the whole Ember AI UX, to integrate it nicely into the existing Ecoplanet online platform, to develop the UI and UI components library.

05 Main Challenges

When we started in late 2023, AI Agent integration in B2B services was new. Our main challenges: 1. Helping non-digital-native users trust AI.
2. Covering all conversational scenarios for optimal UX.
3. Predicting how users will engage with Ember AI.

06 Solution to Main Challenges

After Ember AI public release we:
1. Created ''How it works'' demos for our existing and prospective customers
2. Keep observing, testing and optimizing Ember UX
3. Keep defining usage scenarios and corner cases in UX to make the general experience with Ember AI as smooth as possible.

* Due to IP rights the main platform interface is blurred

Collaborative Process

01

Research & Exploration

We started with understanding the landscape of conversational AI Agents and copilots and how they can be integrated into the complex B2B online services. Together with the Product Manager I’ve done a comprehensive market research documenting the best practices related to our use case.

Market Research

Desk Research

02

Strategic Design

Once we’ve identified the best practices and potential needs of our users , I’ve run a Jobs-to be-Done workshop to structure all the information about main usage scenarios. After the workshop, we had all the necessary information to formulate a clear value proposition.

JTBD workshop

Product Strategy

ICPs/Personas

03

UX Design

At this stage, my goal was to create user journey flows based on the defined JTBD and transform these flows into mid-fidelity wireframes afterwards. After several design iterations, I’ve finalized the mid-fidelity Figma mockups that are supposed to cover all the relevant user flows

User Flows

Wireframes

Mid-fi mockups

04

Ember AI Brand Identity

After the strategic and UX design phases, my task was to come up with Ember AI brand Identity. From the very beginning, we considered Ember AI as a ''product inside the product'' rather than a separate feature of the Ecoplanet platform. Therefore, my main goal was to establish a unique brand identity that is also well-integrated into the existing Ecoplanet brand guidelines.

Brand exploration

Brand design

05

UI Design

In the UI design stage, I’ve come up with Ember AI UI Components & UI elements that could be integrated well into the existing Ecoplanet platform.  I've applied this final UI on the mid-fi wireframes.  As a final step, I’ve prepared the Dev Handover documentation & necessary for the successful implementation of the suggested prototype.

UI styleguide

UI components library

Hi-fi mockups

06

Implementation & Design QA

I see the dev implementation audit as an important stage of the design process. During the Ember AI implementation, I went through multiple interactions with front-end developers to ensure that whatever we envisioned and designed was implemented properly and according to the documentation.

06

User Testing and Optimization

Before releasing our first Ember AI version to the public I've ran a set of  internal testing sessions where we have collected and categorized feedback on the UX/UI and technical issues. After the public release, we continued collecting feedback from our users and implementing incremental optimizations on the UX/UI and technical side.

---

Main Learnings

When we released Ember AI, Ecoplanet users were really excited with their new AI agent streamlining their work and assisting with complex processes like advanced data analysis. While LLMs are a relatively new technology and are still evolving, their capabilities improve with every release and user interaction. I strongly believe AI agents are set to become an integral part of sophisticated B2B interfaces, bringing increasing value and efficiency over time.

Ember AI now a key interface for users to interact with energy data and insights. It’s becoming a core layer in how people navigate and understand our product
Thomas Pokorny,
Head of Engineering @ecoplanet

Main Views

New Chat
A view once user calls out Ember by clicking on the icon in a bottom right on the interface
Chat View
A sample chat with visual content generation
Visual content_detailed view
What user sees after clicking on Expand icon from the chat
Insights Tab
Daily AI-generated insights based on platform data

Next project

Arrow

MVP Design

UX/UI

UX Research

MVP design for Genetic Analysis Platform

0→1 Product Design for an AI-driven genetic analysis platform