Joining the hamsters
As a basic onboarding flow for the mobile app, the app shows through the three main uses: find your supermarket using the map and see how busy it is, report its occupancy to help others make a decision about going, and collect fun illustrated badges and share them with others.
This way, users know right away what to expect and how simple of use the app is. The gamification helps keeping people engaged, as most of the system is (initially) based on people reporting.
Next is when people can either sign up or login with an existing account. Happy Hamster being a very simple and straightforward app, no superfluous information needs to be collected aside from email, username and password.
Our form has a clear, classic layout that's extremely easy to pick up by anyone, and won't make them feel like they have to give up too much information. The little icons I've made add to the visual clarity.
As for the desktop version of the app, it's a simple overlay of the mobile layout over a full-screen map. The focus being on the mobile experience, desktop was made to only be an additional tool.
Settings & badges
Basics and collection
Aside from the UI elements presented here, the map serves as the main view of the app. It has a minimal overlay that gives you information about your level, your username, and a quick access to the settings.
The goal being for people to use the map to get right into our main function, fewer interface elements cluttering the screen, the better.
After clicking on the settings gear icon, you then have access to two tabs, one with minimal settings and another tab to view which badges you have accumulated. Those are earned through various milestones and levels.
To gamify the experience and alleviate some of the seriousness of the relating situation, people can collect and share fun badges whenever they reach certain levels and milestones. Here are some of them!
Oh hey! Nice to have you here.
I hope you're having a nice day!