Vis ma ville
Introduction
Vis ma ville is a mobile application allowing its users to easily report damage done to public property or safety problems throughout
the city. This allows everyone to take action and participate actively in their community while also maintaining contact
with their municipality.
With every user taking an active part in verifying the content that is posted on the app, it allows for only high priority problems to be displayed, and thus a quicker and easier response from city officials and workers.
Its ultimate goal is to get rid of the nuisances you can witness everyday in your street, so every one can benefit from a healthy and clean environnement, but also to lessen the burden on municipalities with a more accessible tool for this kind of issues.
It could easily be implemented and used by cities wishing to connect more with their population and offer them a better living experience.
On a another note, this app can also be used to mark interest points on the map, to discover your city differently, and could be a great addition to any Tourist Office, to guide anyone through selected neighbourhoods or monuments.
CATEGORY
UX/UI, Mobile
ROLE
UX/UI Designer
BRIEF
Create a civic app
Problem
Everyone knows the hassle of witnessing incivilities, broken street lamps, piles of garbage no-one takes care of. More and more people are also trying to have an impact on their neighbourhood, and we can witness that with people gathering and cleaning up a particular spot. But how could we encourage more people to act, without taking too much of their time, and allowing them to have a true impact on their surroundings ? How can we truly make people participate, even indirectly, to solving local problems or engage with their community?
For this project one of the stakes was to use kubernetes and Google Cloud, but as a designer I'm only sharing the design aspect, even though I also did a bit of work on the front end in React Native.
User Research
Our research showed that most people concerned with this type of issues would be families with early children, or owners. People who are naturally inclined to have a cleaner and safer city, and who would feel motivated to remain active on the app in order to achieve this.
We also discovered various applications who were trying to achieve the same results. This allowed us to benefit from a lot of insights about what the users expected, and what was lacking in the existing solutions. The main thing we discovered is an incredible amount of unimportant reports, polluting the whole feed of the users, making the whole application unusable for both the users and the city office.
User Journey
We first built a simple use case of our product, with every step a user would have to take to use it.
Arborescence
We needed to know every screen necessary and its content before we could start anything else. We voluntarily restricted ourselves to creating only the MVP, with the core features and nothing fancy, so the project would remain clear and focused.
Branding
A playful logo inspired by 30's cartoons, with vivid colors making the game aspect of our product instantly understandable. This choice helps break the often monotonous and boring image associated with public services. Insisting on the social network and gamification aspects really help with these issues and makes the product a lot more appealing to the end user. (Credit : François Olona)
Wireframes
We then built the wireframes for every screen of our app, making sure we added all the sections we listed earlier.
Design system
With our wireframes done along with our branding, we knew which elements we would need, so we established a design system with every components and variants to build our screens easily, and have a consistent and coherent image throughout the screens.
Screens
From then, building the final screens was a breeze, thanks to the prior steps. Thanks to this process, we were able to have a first version of our product pretty quickly, and the components and variants made it easy to swap an element when we detected an issue.
Prototype
The final prototype we used to develop the app.