Neighbourhood Community App

Neighbourhood Community App

Project in progress…

Project in progress…

Developing a concept for a real community app and attempting to fully build it with AI vibecoding.

Developing a concept for a real community app and attempting to fully build it with AI vibecoding.

The project's goal

Starting from the idea and the research done for the Kinora project under the 2055 speculative lens, create a real app that connects neighbours and activates the local community. Test the app with stakeholders, iterate, and experiment building it using AI and shipping it.

Challenges & Solutions

Challenge

Building and shipping an app with no coding experience.

Building and shipping an app with no coding experience.

Challenge

Find ways to keep users engaged and make them want to participate without adding responsibilities to their plates.

Find ways to keep users engaged and make them want to participate without adding responsibilities to their plates.

Challenge

Make the app feel trustworthy , local, user-friendly.

Make the app feel trustworthy, local, user-friendly.

Solution

Using AI tools and agents to build the backend of the app and write the code.

Solution

Through gamification and rewards people feel that their meaningful actions are being recognized. Plus, there is no punishment for not joining activities.

Solution

By using a colorful, illustrative visual identity, the app looks unique, slightly analogue, and human centered.

Solution

Using AI tools and agents to build the backend of the app and write the code.

Solution

Through gamification and rewards people feel that their meaningful actions are being recognized. Plus, there is no punishment for not joining activities.

Solution

By using a colorful, illustrative visual identity, the app looks unique, slightly analogue, and human centered.

User Research

From doing trend research and from personal experience I had assumptions regarding people's need and desire for more human connection, for more time spent socializing face to face, maybe even by doing something meaningful.

I decided to test those assumptions by asking potential users about their experience living in The Netherlands, specifically Rotterdam. If they know their neighbours, who can they count on locally, and if they are happy with their current situations or they desire more.

Luckily, the majority of responses were in line with both my own experiences and my assumptions, which gave me confidence that my project is meaningful.

Based on the survey I created a User Persona, a User Journey Map and a Business Map, all useful in further positioning my project.

From doing trend research and from personal experience I had assumptions regarding people's need and desire for more human connection, for more time spent socializing face to face, maybe even by doing something meaningful.

I decided to test those assumptions by asking potential users about their experience living in The Netherlands, specifically Rotterdam. If they know their neighbours, who can they count on locally, and if they are happy with their current situations or they desire more.

Luckily, the majority of responses were in line with both my own experiences and my assumptions, which gave me confidence that my project is meaningful.

Based on the survey I created a User Persona, a User Journey Map and a Business Map, all useful in further positioning my project.

Additional Documents

App Building Workflow

App User Journey

Wireframes & Design Progression

Wireframes & Design Progression

Low Fidelity UI Design

Low Fidelity UI Design

Branding Exploration

Branding Exploration

  1. Knoop - knots as ties between people in the community, knot character

  1. Cozy neighbourhood- soft gradients, illustrated icons, clear app icon

  1. Tulip mascot - concept of tiers, growing characters that show progression, ties with The Netherlands

High Fidelity UI Design

High Fidelity UI Design

Feedback

I decided to go with option 2 for the branding of the app. I was aiming for colorful and illustrative, approachable, fun, lighthearted.

I received feedback from stakeholders that the app felt too digital, which made it not seem that trustworthy. Also, it became apparent that I didn't meet my goal of making illustration a big part of the app. My illustration use was minimal and didn't add value to the user experience.

Final Branding

The concept for the visual identity of the app is 'Aura'.

Aura is described as an energy field around a person, to which are attributed different colors which give insight into how the person is feeling and what type of person they are. 'Aura' is also a forming word of 'Kinora', the name of the app, which made this choice even stronger.

I turned this concept into characters, that are connected to 3 different tiers, that show growth based on participation in the community.

The users can earn 'aura points', rewards for meaningful activities, such as joining initiatives like volunteering, food drive etc. or by doing favors for neighbours in need.

Design System

Design System

High Fidelity UI Design

High Fidelity UI Design

Supporting Illustrations

Illustrations used throughout the app

Experimenting with AI tools

Experimenting with AI tools

Experimenting with Google Stitch

Experimenting with Google Stitch

I experimented with Google Stitch, letting it generate the UI for a neighbourhood community app, giving minimal direction on prompts. This way I could see what are the default content and pages that it deems necessary for such an app. The AI also gives suggestions for prompts, and in this way it came up with the concept of 'community points', a way of rewarding users for their participation.

I decided to use this idea in my project, which is what led to the final branding identity of the app.

Trying out base44

During my research into vibecoding and using AI to build apps without knowing code, I came across the platform 'base44'. They advertise their product as easy to use and fast to build.

I uploaded the images generated by Google Stitch into base44 and asked it to build it. This is what it has generated.

As I have seen other people's base44 generated projects online, it seemed that the app was quite constricted when it comes to design choices. I feared my own design wouldn't be translated right by the base44 software, so I didn't choose to build the app with this platform.

During my research into vibecoding and using AI to build apps without knowing code, I came across the platform 'base44'. They advertise their product as easy to use and fast to build.

I uploaded the images generated by Google Stitch into base44 and asked it to build it. This is what it has generated.

As I have seen other people's base44 generated projects online, it seemed that the app was quite constricted when it comes to design choices. I feared my own design wouldn't be translated right by the base44 software, so I didn't choose to build the app with this platform.

Building with Lovable

Then I found Lovable through some online recommendations. This time, I did not upload images of UI, instead I focused on building the features of the app, making sure it works correctly, before focusing on the design.

I liked the balance between autonomy and the AI software's intuitive actions and suggestions.

Coding with Claude

As a final experiment, I decided to attempt building the app in a code editor, using Claude to generate the code, using GitHub to store and connect everything, Supabase for the authentification process, and v0 for publishing.

This gave me even more autonomy, by being able to upload my own files and getting familiar with the code. However, this time I struggled with building the backend.

Then I found Lovable through some online recommendations. This time, I did not upload images of UI, instead I focused on building the features of the app, making sure it works correctly, before focusing on the design.

I liked the balance between autonomy and the AI software's intuitive actions and suggestions.

Coding with Claude

As a final experiment, I decided to attempt building the app in a code editor, using Claude to generate the code, using GitHub to store and connect everything, Supabase for the authentification process, and v0 for publishing.

This gave me even more autonomy, by being able to upload my own files and getting familiar with the code. However, this time I struggled with building the backend.

Kinora Figma Prototype

Alongside the AI experiments, I was designing and building the app in Figma. This is the prototype and the truest vision of the app. I will use Framer to publish the prototype and start testing with stakeholders.

Alongside the AI experiments, I was designing and building the app in Figma. This is the prototype and the truest vision of the app. I will use Framer to publish the prototype and start testing with stakeholders.

To be continued…

2026 © Alexandra Leon – All rights reserved

2026 © Alexandra Leon – All rights reserved

Create a free website with Framer, the website builder loved by startups, designers and agencies.