Redesign of MVP for GreenTech startup IVY
A cloud-based SaaS that helps architects, developers, and council officers evaluate project documentation for environmental compliance using AI
My role
My role
Founding product designer
Founding product designer
Product
Product
SaaS, GreenTech, B2B, Desktop
SaaS, GreenTech, B2B, Desktop
Timeline
Timeline
August 2024 – August 2025
August 2024 – August 2025
Design focus
Design focus
UX/UI design
UX/UI design
AI integration
AI integration
design review
design review
information architecture
information architecture
brand experience
brand experience
usability testing
usability testing
Old design VS new design
Problem
Problem
The existing interface lacks structure, consistency and a user-centred approach. The role of the AI assistant is unclear and underutilised
Although this feature has strong potential, it is currently not helping IVY startup to be seen as an innovative or attractive solution for investment
The existing interface lacks structure, consistency and a user-centred approach. The role of the AI assistant is unclear and underutilised
Although this feature has strong potential, it is currently not helping IVY startup to be seen as an innovative or attractive solution for investment
Goal
Goal
Redesign the MVP to support a first investment round, delivering a cohesive, professional, and investor-ready interface that clearly demonstrates AI capabilities and usability
Redesign the MVP to support a first investment round, delivering a cohesive, professional, and investor-ready interface that clearly demonstrates AI capabilities and usability
01.
Project background
IVY is an early-stage GreenTech startup aiming to simplify ecological compliance for construction and planning projects
The platform uses AI to analyse planning documents and flag project parameters that are incompatible to regulatory ecological standards in the UK
At the time of the project, IVY was preparing for its first investment round and needed an MVP that appeared polished, credible, and investor-ready, despite limited development resources
IVY is an early-stage GreenTech startup aiming to simplify ecological compliance for construction and planning projects
The platform uses AI to analyse planning documents and flag project parameters that are incompatible to regulatory ecological standards in the UK
At the time of the project, IVY was preparing for its first investment round and needed an MVP that appeared polished, credible, and investor-ready, despite limited development resources
Client Expectations
At project start, the client expected:
a professional-looking MVP prototype to demonstrate at investor meetings
a simplified user experience that could handle multiple user roles (architects, developers, council officers)
integration of the AI assistant as a visible, value-defining feature
consistency across all screens despite technical and financial limitations
At project start, the client expected:
a professional-looking MVP prototype to demonstrate at investor meetings
a simplified user experience that could handle multiple user roles (architects, developers, council officers)
integration of the AI assistant as a visible, value-defining feature
consistency across all screens despite technical and financial limitations
Project Aspirations & Challenges
Our main goal was to present a realistic, investor-ready prototype under tight technical constraints. The greatest challenge was the dependency on Tailwind framework, which limited visual flexibility
Additional challenges included:
no established branding: no existing brand book or predefined colour scheme, except for avoiding typical eco-style greens and browns and having innovative look and feel
existing draft design issues: a draft UI has been created but does not adhere to Tailwind, when attempts were made to adapt it, the result lacked consistency
Our main goal was to present a realistic, investor-ready prototype under tight technical constraints. The greatest challenge was the dependency on Tailwind framework, which limited visual flexibility
Additional challenges included:
no established branding: no existing brand book or predefined colour scheme, except for avoiding typical eco-style greens and browns and having innovative look and feel
existing draft design issues: a draft UI has been created but does not adhere to Tailwind, when attempts were made to adapt it, the result lacked consistency
02.
My role in the project
I led UX/UI design, information architecture and visual identity development and run usability tests, ensuring the MVP aligned with both business goals and real user needs
Key responsibilities:
design review and information architecture improvement
brand identity concept
definition of AI assistant’s role
UI design
work in a Tailwind CSS framework
prepare functional high-fidelity prototypes for demos
run usability tests
developer collaboration & handoff
I led UX/UI design, information architecture and visual identity development and run usability tests, ensuring the MVP aligned with both business goals and real user needs
Key responsibilities:
design review and information architecture improvement
brand identity concept
definition of AI assistant’s role
UI design
work in a Tailwind CSS framework
prepare functional high-fidelity prototypes for demos
run usability tests
developer collaboration & handoff
Collaboration and Teamwork
I worked within a small, cross-functional team:
I received tasks from product owner including project milestones and investor deliverables
I consulted front-end developer on ways to implement the interface using Tailwind CSS and on AI capabilities
I communicated to a CEO/Founder to align with a product strategy and demo priorities
I worked within a small, cross-functional team:
I received tasks from product owner including project milestones and investor deliverables
I consulted front-end developer on ways to implement the interface using Tailwind CSS and on AI capabilities
I communicated to a CEO/Founder to align with a product strategy and demo priorities
03.
Design Review
The client provided two versions of the existing design. The first version was already implemented and accessible online and was not aligned with the Tailwind framework showing significant visual and interaction inconsistencies.
The second version existed only as a Figma draft. It attempted to reuse some Tailwind elements but still had major issues related to composition, grid structure, spacing, padding, and overall hierarchy
To understand the redesign needs clearly I conducted a structured design review:
1. UX issues
weak visual hierarchy made key information hard to read
unclear navigation paths: project-level and system-level navigation mixed
outdated interaction patterns used
2. Layout and structure
no consistent grid used, cards placed without alignment
irregular spacing and padding across screens
3. Visual Design
outdated colour palette
no visual indication for primary actions
AI assistant designed like a generic search field, low discoverability
The client provided two versions of the existing design. The first version was already implemented and accessible online and was not aligned with the Tailwind framework showing significant visual and interaction inconsistencies.
The second version existed only as a Figma draft. It attempted to reuse some Tailwind elements but still had major issues related to composition, grid structure, spacing, padding, and overall hierarchy
To understand the redesign needs clearly I conducted a structured design review:
1. UX issues
weak visual hierarchy made key information hard to read
unclear navigation paths: project-level and system-level navigation mixed
outdated interaction patterns used
2. Layout and structure
no consistent grid used, cards placed without alignment
irregular spacing and padding across screens
3. Visual Design
outdated colour palette
no visual indication for primary actions
AI assistant designed like a generic search field, low discoverability
Old design issues
dashboard – implemented design and draft design from the client
Old design issues
projects screen
04.
Research: users, problems & needs
The initial user research was provided by the client, who had already identified three main user groups – architects, developers, and council officers. They had also conducted a series of interviews to clarify each group’s main jobs to be done and challenges in managing ecological compliance
Architects and developers needed a clear and structured way to track project progress, manage documents, and ensure compliance without excessive manual work. Council officers required faster, more reliable verification tools to handle large volumes of applications efficiently
The initial user research was provided by the client, who had already identified three main user groups – architects, developers, and council officers. They had also conducted a series of interviews to clarify each group’s main jobs to be done and challenges in managing ecological compliance
Architects and developers needed a clear and structured way to track project progress, manage documents, and ensure compliance without excessive manual work. Council officers required faster, more reliable verification tools to handle large volumes of applications efficiently
Insights & findings
The client’s initial research revealed a shared need for transparency, automation, and clear visual feedback – insights that became the foundation for defining user flows and the system’s information architecture
But specific user needs were still too general to inform detailed design decisions. To bridge this gap, I developed detailed user portraits for each group to capture a wider range of goals, behaviours, and challenges
The client also shared key pain points identified during their interviews, which helped refine these portraits and ground them in real user experiences. Combining insights allowed me to translate user needs into design requirements
The client’s initial research revealed a shared need for transparency, automation, and clear visual feedback – insights that became the foundation for defining user flows and the system’s information architecture
But specific user needs were still too general to inform detailed design decisions. To bridge this gap, I developed detailed user portraits for each group to capture a wider range of goals, behaviours, and challenges
The client also shared key pain points identified during their interviews, which helped refine these portraits and ground them in real user experiences. Combining insights allowed me to translate user needs into design requirements
User portraits
User groups interaction scheme
Key design requirements
05.
Information architecture & user flows
Based on the design review, I restructured the entire information architecture:
provided clear separation between project level and individual project indicators level
removed Templates section as it’s role was undefined
added access to internal chat
I then worked on main user flows adding AI assistant touch points to actions that can be replaced by AI
Based on the design review, I restructured the entire information architecture:
provided clear separation between project level and individual project indicators level
removed Templates section as it’s role was undefined
added access to internal chat
I then worked on main user flows adding AI assistant touch points to actions that can be replaced by AI
New information architecture
Old information architecture
User flows showing AI assistant touchpoints
06.
Design ideation and references
I began the ideation process by studying competitor products and the client’s main reference – sustainability accounting tool Rio. I analysed its structure, visual hierarchy, and how it presented complex data clearly
To speed up exploration, I broke the interface down into key elements such as dashboards, cards, and tables, collecting targeted references for each. I also collected good examples of AI assistant
This approach allowed faster comparison of functional and visual ideas but made it harder later to merge styles from products with different audiences and design systems.
I began the ideation process by studying competitor products and the client’s main reference – sustainability accounting tool Rio. I analysed its structure, visual hierarchy, and how it presented complex data clearly
To speed up exploration, I broke the interface down into key elements such as dashboards, cards, and tables, collecting targeted references for each. I also collected good examples of AI assistant
This approach allowed faster comparison of functional and visual ideas but made it harder later to merge styles from products with different audiences and design systems.
Design reference examples
Moodboard
07.
Wireframes and Structure
Based on collected references I designed wireframes that reflected the main redesign features:
dashboards for two main user groups
simplified project switching
inline collaboration tools
AI assistant support
I then created the first design drafts to discuss the layout, placement of key elements, and colour palette with the client
Their main feedback focused on the visual tone as the design felt too rigid and reminiscent of standard office software. They referred back to the Rio reference, noting how colour played a more active role there, guiding attention to key data and insights rather than to system elements like navigation panels or project cards.
Based on collected references I designed wireframes that reflected the main redesign features:
dashboards for two main user groups
simplified project switching
inline collaboration tools
AI assistant support
I then created the first design drafts to discuss the layout, placement of key elements, and colour palette with the client
Their main feedback focused on the visual tone as the design felt too rigid and reminiscent of standard office software. They referred back to the Rio reference, noting how colour played a more active role there, guiding attention to key data and insights rather than to system elements like navigation panels or project cards.
Wireframes
Design ideas and drafts
08.
Design System & Tailwind Integration
The UI was rebuilt with Tailwind-compatible components featuring:
Standardised spacing, typography, and icons
Colour tokens matching Tailwind CSS
Custom components that can be translated to Tailwind CSS via Figma to Tailwind plugin
I added several custom elements to the initial Tailwind design system to manage cases that could not use any of pre-made elements such as project cards or some dashboard cards
The UI was rebuilt with Tailwind-compatible components featuring:
Standardised spacing, typography, and icons
Colour tokens matching Tailwind CSS
Custom components that can be translated to Tailwind CSS via Figma to Tailwind plugin
I added several custom elements to the initial Tailwind design system to manage cases that could not use any of pre-made elements such as project cards or some dashboard cards
Custom components of UI-kit
09.
Key Design Decisions
Refined design includes:
Dashboard
introduced visual hierarchy and active project focus
improved dashboard structure
provided project-level summaries and document statuses
AI Assistant
designed more humane and interactive experience when engaging with AI assistant
introduced contextual, task-based guidance additionally to static help resources
Visual Identity
enhanced product image adopting more contrasting colours for navigation elements and calmer palette for main content
developed a more balanced composition with larger gaps between content
improved readability of texts providing more colour contrast and revised typography
Refined design includes:
Dashboard
introduced visual hierarchy and active project focus
improved dashboard structure
provided project-level summaries and document statuses
AI Assistant
designed more humane and interactive experience when engaging with AI assistant
introduced contextual, task-based guidance additionally to static help resources
Visual Identity
enhanced product image adopting more contrasting colours for navigation elements and calmer palette for main content
developed a more balanced composition with larger gaps between content
improved readability of texts providing more colour contrast and revised typography
Dashboard
for architects
Dashboard
for developers
Dashboard
for council officers
AI assistant
large window view
AI assistant
minimised window view
AI assistant in action
on projects screen
All projects screen
grid view with expanded and minimised side navigation bar
All projects screen
list view with and without team chat
10.
Visual brand identity
I designed a new logo that better reflects digital innovation and aligns with the updated colour palette. Its curved, flowing shapes create a sense of movement and lightness, giving it a modern look
The neon-inspired palette, combined with gradients and a subtle glow effect, creates an impression of “glowing in the dark”. This direction supports the product’s innovative positioning and helps the brand stand out in a category traditionally dominated by conservative, office-style visual identities
I designed a new logo that better reflects digital innovation and aligns with the updated colour palette. Its curved, flowing shapes create a sense of movement and lightness, giving it a modern look
The neon-inspired palette, combined with gradients and a subtle glow effect, creates an impression of “glowing in the dark”. This direction supports the product’s innovative positioning and helps the brand stand out in a category traditionally dominated by conservative, office-style visual identities
Old logo
New logo
New AI assistant logo
Colour palette, typography and other visual identity elements
11.
Test 1: Navigation between projects
Since the initial project timeline under the startup did not allow for proper user testing, I decided to organise usability tests myself using my own time and resources. I engaged 10 users in total for a usability check: architects, developer, council officer and general-purpose testers
First test was conducted to understand:
how quickly users understood which project they were working on
whether switching between projects felt natural or confusing
whether users tried to switch projects in the wrong places
discoverability of the AI assistant
Tasks included:
find and open Project A
switch to Project B and open it’s dashboard
confirm which project you’re currently editing
locate the AI assistant and ask it to summarise the missing items
The test revealed several navigation issues:
the AI assistant button was overlooked by some users on the first attempt
users occasionally returned to the projects list accidentally, thinking it was part of the project-level navigation
Changes after test 1:
added a persistent project header showing the project name and status
updated the navigation layout so users could not confuse global navigation with project-level navigation
increased the visual prominence of the AI assistant
Since the initial project timeline under the startup did not allow for proper user testing, I decided to organise usability tests myself using my own time and resources. I engaged 10 users in total for a usability check: architects, developer, council officer and general-purpose testers
First test was conducted to understand:
how quickly users understood which project they were working on
whether switching between projects felt natural or confusing
whether users tried to switch projects in the wrong places
discoverability of the AI assistant
Tasks included:
find and open Project A
switch to Project B and open it’s dashboard
confirm which project you’re currently editing
locate the AI assistant and ask it to summarise the missing items
The test revealed several navigation issues:
the AI assistant button was overlooked by some users on the first attempt
users occasionally returned to the projects list accidentally, thinking it was part of the project-level navigation
Changes after test 1:
added a persistent project header showing the project name and status
updated the navigation layout so users could not confuse global navigation with project-level navigation
increased the visual prominence of the AI assistant
Navbar before test 1
project switching and project details together
Two new navbars
separate project and dashboard levels
AI assistant before test 1
Refined AI assistant after test 1
12.
Test 2: Dashboard data comprehension
After resolving navigation issues from test 1, this test focused on how well users understood and interpreted the data
What I checked:
how quickly users understood dashboard scores and statuses
whether indicator cards communicated their meaning at a glance
user confidence after each task
Tasks included:
identify indicator status
identify number of completed targets
identify which targets are not completed
identify which targets are missing evidence
open more detailed information for indicator A
The test revealed few comprehension issues:
users hesitated when working with targets
users overlooked the information that is shown in the table
users did not understand how information in cards is connected to the info in the table
Changes after test 2:
added evidence status to indicator cards on dashboard
added tooltips explaining the table data
After resolving navigation issues from test 1, this test focused on how well users understood and interpreted the data
What I checked:
how quickly users understood dashboard scores and statuses
whether indicator cards communicated their meaning at a glance
user confidence after each task
Tasks included:
identify indicator status
identify number of completed targets
identify which targets are not completed
identify which targets are missing evidence
open more detailed information for indicator A
The test revealed few comprehension issues:
users hesitated when working with targets
users overlooked the information that is shown in the table
users did not understand how information in cards is connected to the info in the table
Changes after test 2:
added evidence status to indicator cards on dashboard
added tooltips explaining the table data
Indicator cards
before test 2
Refined indicator cards
after test 2
13.
Key outcomes
The redesign transformed IVY from an early-stage, inconsistent MVP into a coherent, investor-ready product concept with a clear value proposition:
20+ screens ready for implementation
Structured dashboard with clear data representation for three user roles
Interactive prototype that can be used in investor meetings
Clearly defined AI assistant embedded in the demo flow for stakeholders and tested in two rounds of usability testing
Consistent UI and strong brand due to use of Tailwind design system and new logo and brand identity
The redesign transformed IVY from an early-stage, inconsistent MVP into a coherent, investor-ready product concept with a clear value proposition:
20+ screens ready for implementation
Structured dashboard with clear data representation for three user roles
Interactive prototype that can be used in investor meetings
Clearly defined AI assistant embedded in the demo flow for stakeholders and tested in two rounds of usability testing
Consistent UI and strong brand due to use of Tailwind design system and new logo and brand identity
