ecoplanet: Ember AI Agent - designing a Key Interface to interact with energy data

About the project

Client
ecoplanet
Scope & Deliverables

Ember AI Agent 0-1 design + Brand Identity, Analytics Hub 0-1 design: ready-for-dev mockups, dev handover docs, Figma components & styleguide. Platform UX/UI enhancements.

Timeline

01 Context

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

02 Problem

How might we turn complex Energy Data management into a smooth and efficient process with the help of AI?

03 Target Users

While building Ember AI, we wanted to specifically empower Energy Managers, Sustainability Managers & Energy Procurement Specialists

04 Collaborative Goal

To integrate an AI Agent into the platform, to improve platform UX/UI, enhance product with new features and establish an efficient design - to dev process

05 Outcomes

Ember AI became a key interface, changing how users interact with Energy management platform.
New Analtytics hub feature empowered users to run complex analysis with ease
Optimized UX Architecture and UI decreased time-to-value & increased customer satisfaction

What we did

I've led & execute the design of Ember AI Agent Ecosystem and Analytics Hub feature from scratch, also made IA & UX/UI improvements on the existing AIP.

Ember AI Agent

Why we've built it

It was late 2023, when AI Agents just started to appear. Our goal was to design an AI agent that can be smoothly integrated into the existing SaaS ecosystem.It should help users to interact with energy data , make suggestions based on their needs, and leverage the platform's functionality potential.
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

How we've built it (design perspective)

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.

Market Research

Desk Research

02

Strategic Design

Once identified the best practices on the market and how Ember AI can potentially empower ecoplanet users, together with stakeholders, I’ve worked on the main value proposition and usage scenarios.

JTBD workshop

Product Strategy

ICPs/Personas

User Journey maps

03

UX/UI Design

Here, I transformed user flows based on the defined JTBD and transformed them into hi-fidelity mockups. Additionally, developed a UI Styleguide and Components library to integrate Ember AI smoothly into the existing Ecoplanet platform.

Wireframes

UI styleguide

Hi-fi mockups

04

Ember AI Brand Identity

After the strategic and UX/UI design phases, my task was to come up with the Ember AI brand Identity. From the very beginning, I've 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 Strategy

Brand Identity

06

Design QA, User Testing and Optimization

We went through multiple iterations with front-end developers, and user testing before shipping to the public. After public release, we continued to collect feedback from our users and improve Ember AI User experience.

What we've eventually built 

We've launched an Agentic User Experience - a Conversational UI that became a key point of interaction between the user and ecoplanet Saas platform.

* Due to IP rights the main platform interface is blurred

Main Design Decisions

To consider Ember AI as ''Product inside the Product'' from the very beginning and not as an Ecoplanet platform feature
To introduce the Insights Tab
Including Live data widgets in the conversation and an option to interact with them

Main Learnings

Even though LLMs are a relatively new technology and are still evolving I I believe the next SaaS UX Era is already here! Soon, AI agents should handle most user interactions, making complex B2B software smarter and more intuitive

Main Challenges

Lack of trust in AI Agents, especially among non-digital-native users
Lack of data on conversational scenarios in B2B software context
Solutions:
An explicit onboarding process to Ember AI
User interviews, user testing to better understand how and why users are using Ember AI

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
Anna has achieved a masterful blend between Innovation, Product, and UI/UX Design. We worked together when she was part of ecoplanet as a Product Designer and I really enjoyed our mutual collaboration in the workspace building our next-gen Energy Management System. She brings a lot of fresh and powerful ideas, concepts, and methods; and she is very knowledgeable in what she does.
Javier Silva Ortiz,
CTO @ecoplanet

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