I’ve recently been working on a web app called moodfulness, which lets users enter whether they are happy or sad and then plots those moods on a map. In developing this app, I focused on usability, such as ensuring consistency and conducting A/B testing, and data visualization.
I used an agile development approach to moodfulness. After designing the foundation of the app, I created and prioritized a list of desired features. I kept track of feature suggestions, bug tracking, and improvements in a self-hosted instance of Jira Core.
When I experienced issues creating features during a sprint, I moved the features to the backlog and focused on other features in the sprint. This worked well because I would revisit the features in the backlog with a fresh set of eyes and often quickly resolve the issues I had experienced.
Technologies used for creating the app
To create the app, I used the following technologies:
- CSS. Coding language used for design consistency.
- HTML. Primary coding language used for developing the app.
- MySQL/MariaDB. Database used for storing user data.
- Nginx. Server used for delivering and storing app data.
Data storage and visualization
moodfulness stores the following data to a database in MySQL/MariaDB:
- verified_users table
- username. Account username.
- email. Account email address.
- password. Account password.
- date. Registration date.
- moods table
- mood. Happy or sad emoji.
- date. YYYY-MM-DD format.
- lat. Latitude coordinates.
- lon. Longitude coordinates.
- browser. Browser type and version.
I’ve secured user data from unauthorized access by disabling root access and remote access on the database. In addition, I’ve installed a TLS/ SSL certificate and a firewall on the server to prevent intrusion attempts.
moodfulness gets the mood data from the moods table and plots the user’s moods in the form of emojis on the Leaflet-based map. If the user did not allow the app to access its location, the app places the emoji in the Pacific Ocean near Africa. This happens because the geocoordinates are 0,0.
Other instances of user-accessible data include deleting mood data and managing account information.
Consistent user experience
In designing moodfulness, I used the responsive web design approach. This provides users with a consistent user experience across mobile and desktop platforms.
The A/B test that had the biggest influence on development was button location. I had my own opinions on button placement and design, but the insight I gained from friends and family was invaluable. In particular, I needed to consider where to place buttons to ensure easy access for those using a smartphone with one hand.
The A/B tests spanned a variety of devices, including mobile and touchscreen and non-touchscreen displays. To ensure a consistent user experience across all platforms, I used the Selenium IDE plugin to automate bug testing and conduct QA.
Creating moodfulness has helped refresh my front-end and back-end engineering skills and improved my project management skills.