FamiSpot is an application that we have created from scratch starting with just an idea.
There are so many groups in social media, on small blogs or local websites having some lists of family friendly places. But finding some new places to visit, browsing through all that distributed content is very time-consuming. We started with just an idea and followed the Agile process – gathering the requirements, first designs, feedback loop and the deployment of the MVP.
What we did at the beginning:
At first, we started with market research and spoke with many families around us, to gather all the requirements. We wanted to make sure that this tool is going to be useful for as many people as possible. After many conversations we designed some use cases showing what FamiSpot should be able to do. At that moment of Event Storming, which we consider now as the best possible way to gather requirements and document behavior of software, they were just simple use case schemas.
Requirements defined after analysis phase were as follows:
Knowing what the application should do, we discussed technologies we want to use. We are starting with a web application, but there is going to be a mobile application in the future, so API and design have to be adjustable for that.
We have chosen React.js as a main library to be used on the frontend. In case we choose to write the mobile application in React Native, some codes can be reused. Main component of the application is going to be an interactive map with many places displayed, so we decided to use Leaflet, as it is a stable solution and allows to put almost anything on the map.
For the backend it is a bit more complicated, as chosen technologies need to deal with geographic calculations. We knew that most of requests are going to be searches and filters, so we decided to use Elasticsearch, as it has brilliant built-in filtering functions and it can quickly search by geographic coordinates with PostgreSQL, with PostGIS plugin as the main database holding users, ratings and comments data. Java with Spring have been chosen as technologies for the main logic of the application.
Application has to be scalable, since if the number of users increases, we need to handle that, so we have chosen Docker and Docker Swarm as the way of building and deploying the application, as Swarm allows no-downtime deployment and an easy configuration of scalability.
We designed a logo, defined colors and drew the first draft of the main search screen and search results, and discussed with potential users. Everyone liked the logo, colors and the UI simplicity, so we started the implementation.
Having created the first screens, we started showing them to users. Despite the former opinions that the app is nice and functional, it appeared that the first thing every user did was not starting with the search we proposed on the main screen, but going straight to the map. After noticing that, we knew that UI needs to be changed. Map is going to be the first thing that users see when they enter our application. We switched the main view to the map, and we added the search and filters to the map as new panels. These steps resulted with the current look of the FamiSpot main page.
After gathering all the feedback, we implemented changes, making FamiSpot not only the best application to find family-friendly places, but also a user-friendly one!
Having all the basic functionalities delivered, we have deployed the application to famispot.com and allowed users to beta-test. As many as 250 users accessed FamiSpot during that time.