A UX revamp of Codly’s AI chat workspace, where cloud teams create and manage AWS resources by talking to an agent.
My Role
Product Designer: UX audit, information architecture, interaction design, visual themes and developer notes
Engagement
Freelance / Client
Client
AllySense Technologies, the team behind Codly.ai
Surfaces
AI chat workspace, login and verification, settings, white-label and tablet views
Context
Codly calls itself an agentic Cloud OS. Specialised AI agents deploy, operate, secure and optimise a company’s cloud from one place, and a human approves the actions that matter. Its customers are mostly regulated Indian financial services, so the people using it are technical and careful.
Most of that work starts in a chat. You pick an account, tell Codly what you need, like a new EC2 instance, and it asks for each detail before acting.
Earlier chat workspace was trying to show everything at once. My job was to make the first screen calm, and the controls that matter easy to trust.
Design proposal · 47 screens
Screens across flows, use cases and tablet
Theme directions explored within the brand
Permission levels the interface adapts to
Panels on screen one, down to one focused chat
What was getting in the way.
In the version I inherited, everything was on screen from the first second: the sidebar, two account dropdowns, an empty parameter table and the chat, all at the same weight. First-time users had too many things competing for their attention.
OLD DESIGN
LOADER WHICH FAILS TO COMMUNICATE WHAT’S HAPPENING
SETTINGS OR OPTIONS OPENING IN ANOTHER TAB
INTERIM UPDATE
ACCOUNT SETUP
Easy to skip, costly to miss
The provider and account dropdowns sat quietly in the sidebar. People could carry on with the defaults and only notice mid-chat that they were in the wrong account.
NAVIGATION
Modules without icons
FinOps, Incident Management and OS Management were plain text links, so nothing helped people recognise them at a glance. The interim update added icons, but some repeated.
PARAMETER SUMMARY
An empty table on day one
The summary only fills up once a chat is underway, but it showed from the start, adding a third column of nothing.
COPY
“Type a message for account undefined”
A small thing, but the input told people the product wasn’t sure where they were. It became “Type a command…” with the account name filled in.
The design objective: focus first, detail on demand.
Codly’s users are cloud and platform engineers working on production systems. They need to see who they’re acting as and what will happen, without wading through panels they don’t need yet.
FIRST VIEW
Only what it takes to start
Who you’re acting as, and what you want to do. Everything else waits.
AS THE CHAT GROWS
Detail when it’s useful
The parameter summary, chat history and environment details appear once there’s something to show.
Nine looks before choosing one.
Before reworking the layout, I explored how far the visual style could move from the existing portal while staying inside AllySense’s brand colours: orange, green and blue. The client picked the light, chat-first direction, with its dark twin kept for later.
MINIMAL · DTO 1 TO 4
Close to the existing portal
A white workspace with black, orange or coloured accents. Familiar for current users.
COLOURED · DTO 5 TO 7
Bold and branded
Dark or coloured sidebars, including a warmer, Slack-like curved workspace.
TWIN · DTO 8 AND 9 · PICKED
Light first, dark ready
Close to ChatGPT or Perplexity, and a natural fit for a product that works through conversation. DTO 8, the light version, was picked. DTO 9, the dark version, can follow later so users can switch to whichever they prefer.
A first screen with one job.
The new first view strips everything back to a greeting, the account you’re acting on, and a box to type in. The sidebar can expand to show every module with its name.
Account up front
Platform, environment, cloud and account sit right above the input, with the default marked, so nobody starts in the wrong place by accident.
Suggestions that follow the account
Prompts like “Create an EC2 instance” change with the environment selected.
A collapsible sidebar
Icons only by default, so the chat gets the room. It expands with tooltips on hover.
Room for a client logo
The top-left slot is ready for white-labelling, and account details and log out live under the profile.
The screen changes with what you’re allowed to change.
Not every user can switch environments. Showing them controls they can’t use only adds noise, so the interface adapts to each user’s access.
CAN CHANGE THE ENVIRONMENT
CAN’T CHANGE ANYTHING
If even one setting can be changed, the Account Management block stays. Only when nothing can be changed does it disappear, and the edit icon goes with it.
Detail shows up once there’s something to show.
As soon as the first command goes in, the screen reorganises around the conversation.
Environment, folded away
Account details shrink into a card in the sidebar. The edit icon starts a fresh chat with new settings.
Parameter summary
Appears with the first answer, fills in as the chat goes on, and can be copied or hidden.
Chat history
Recent chats sit under the modules, with options to pin and rename.
Creating an EC2 instance, one answer at a time.
Codly asks for each parameter in turn: region, vCPUs, instance type, operating system, AMI, networking and tags. I redesigned that flow so every step is quick to answer and easy to check.
Common answers sit above the input as chips.
Each answer lands in the parameter summary.
Architecture diagrams open right inside the chat.
Most replies are one click
Suggestion chips for regions, vCPU counts and similar answers save typing and typos.
Check before it’s created
The summary builds itself, so people can review the whole request before Codly acts.
A loader that explains itself
I asked for the loading state to say what Codly is doing and why it’s taking time. People wait longer when they know what’s happening.
The chat stays centred, whatever opens around it.
Panels open and close around the conversation without squeezing it. I annotated the layout rules for developers, like the chat taking 57% of the screen width and staying equidistant from both edges.
SUMMARY HIDDEN AND ADAPTABLE
TABLET VIEW OF THE DESIGN
Panels that make room
When the sidebar or summary opens or closes, the chat re-centres instead of getting squeezed.
A fixed input, scrolling panels
The input stays put, while modules and chat history scroll on their own.
The smaller screens count too.
Login, settings and profile got the same treatment, along with a white-label version for companies that want their own logo and colour.
Login and authenticator verification, on brand.
Theme, language and accent colour in one place, ready for the dark version when it ships.
Loader that explains the undergoing process.
Settings & options opening in the same window as modals/pop-ups
Same layout, three moods.
Alongside the green default, I proposed a blue version that feels cool and simple, and a black one that feels bold and premium.
BLUE VERSION WITH WHITE-LABELLING OPTION
BLACK VERSION
What this project demonstrates.
Reducing cognitive load
Cutting a crowded first screen down to one clear action, without removing anything people need.
Designing for permissions
An interface that changes with what each user can do, so nobody sees controls they can’t use.
Progressive disclosure
Detail like the parameter summary and history appears only when it helps.
Working inside a brand
Nine theme directions and three colour variants, all within AllySense’s guidelines.
Codly asks people to trust an agent with their cloud. My job was to make the screen quiet enough that they can see exactly what it’s about to do.