Neighbourhood Community App

Neighbourhood Community App

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. Making sure my visual identity could be fully implemented was my main priority, and so I moved away from base44 and experimented with other AI building tools.

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. Making sure my visual identity could be fully implemented was my main priority, and so I moved away from base44 and experimented with other AI building tools.

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.

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.

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.

Conclusion

Throughout this project I took on the role of the researcher, the designer, the illustrator, and briefly the developer.

Ultimately, since the app is meant to be about people, about the experience of the residents living in their neighbourhood, their safety comes first. Therefore, for the building of this app I would rather enlist the help of a person, a developer with experience and their expertise, than build it myself with AI, in order to make sure the cyber security of the app is up to standard.

Try the app prototype!

Scan the QR code with your phone and click through the app!

Don't worry, by clicking 'Sign up' no information is collected from you, the prototype is only simulating the experience of the app with no commitment or data from you.

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.