Koonection
Audit and redesign
Koonection
Audit and redesign
Koonection
Audit and redesign
Kindergarten Management
Koonection is an all-in-one admin tool for kindergarden management. Create reports, take attendance and communicate with parents.
My Role
The client asked me to audit their existing app and make UX/UI recommendations
Content Hierarchy
One of the most consistent changes I made was to the existing content hierarchy. The designs were very flat, with little emphasis or differentiation between bits of content and almost no imagery or consistent iconography.
Simplified Information Architecture
Along with better graphical representation of information, as in the example, a calendar view instead of a list view. I also simplified app navigation so that information wasn't 'screens deep', rather, key info and options made available up front
Design Library Tone
I softened the tone of the UI and created a Figma design library for the client
Application of design library, before and after
AI Figma -> Claude MCP Tests
The client also requested me to uplift their website. I decided to try Figma's new MCP server to see if I could facilitate the code handover for my client, making implementation quicker and easier for them
I successfully produced ready-to-deploy code for my client's Tailwind CSS implementation of the designs
What I Learnt
As my client is a developer and equally interested in the ways AI could speed up design implementation so this was a great project to explore these limitations.
My thoughts on AI? It's undeniable that AI tools can speed up aspects of the product design pipeline, exceptionally so. Used thoughtfully and in the right contexts it's still possible to prioritise the creative and human aspects of problem solving while streamlining more technical and structured tasks.
Kindergarten Management
Koonection is an all-in-one admin tool for kindergarden management. Create reports, take attendance and communicate with parents.
My Role
The client asked me to audit their existing app and make UX/UI recommendations
Content Hierarchy
One of the most consistent changes I made was to the existing content hierarchy. The designs were very flat, with little emphasis or differentiation between bits of content and almost no imagery or consistent iconography.
Simplified Information Architecture
Along with better graphical representation of information, as in the example, a calendar view instead of a list view. I also simplified app navigation so that information wasn't 'screens deep', rather, key info and options made available up front
Design Library Tone
I softened the tone of the UI and created a Figma design library for the client
Application of design library, before and after
AI Figma -> Claude MCP Tests
The client also requested me to uplift their website. I decided to try Figma's new MCP server to see if I could facilitate the code handover for my client, making implementation quicker and easier for them
I successfully produced ready-to-deploy code for my client's Tailwind CSS implementation of the designs
What I Learnt
As my client is a developer and equally interested in the ways AI could speed up design implementation so this was a great project to explore these limitations.
My thoughts on AI? It's undeniable that AI tools can speed up aspects of the product design pipeline, exceptionally so. Used thoughtfully and in the right contexts it's still possible to prioritise the creative and human aspects of problem solving while streamlining more technical and structured tasks.
Kindergarten Management
Koonection is an all-in-one admin tool for kindergarden management. Create reports, take attendance and communicate with parents.
My Role
The client asked me to audit their existing app and make UX/UI recommendations.
Content Hierarchy
One of the most consistent changes I made was to the existing content hierarchy. The designs were very flat, with little emphasis or differentiation between bits of content and almost no imagery or consistent iconography.
Simplified Information Architecture
Along with better graphical representation of information, as in the example, a calendar view instead of a list view. I also simplified app navigation so that information wasn't 'screens deep', rather, key info and options made available up front.
Design Library Tone
I softened the tone of the UI and created a Figma design library for the client.
Application of design library, before and after
AI Figma -> Claude MCP Tests
The client also requested me to uplift their website. I decided to try Figma's new MCP server to see if I could facilitate the code handover for my client, making implementation quicker and easier for them
I successfully produced ready-to-deploy code for my client's Tailwind CSS implementation of the designs.
What I Learnt
As my client is a developer and equally interested in the ways AI could speed up design implementation so this was a great project to explore these limitations.
My thoughts on AI? It's undeniable that AI tools can speed up aspects of the product design pipeline, exceptionally so. Used thoughtfully and in the right contexts it's still possible to prioritise the creative and human aspects of problem solving while streamlining more technical and structured tasks.