Development of a user friendly app layout and a functional interface for a snack kiosk
Development of the user friendly mobile app HealthyBites with a functional, playful and visually-appealing interface for a snack kiosk and a gamification aspect that fosters healthy eating habits and active engagement with the app.
Consumers of snacks and food want to be able to clearly see at first glance at the label whether the product is healthy for their body or not harmful in the long term. This is often not obvious enough due to complicated chemical compositions, consumers often lack knowledge or the presentation on the packaging is inconspicuous.
Consumers often make decisions based on gut feeling or positive impressions and feelings, rather than on analysis and reading the small print.
The user should be emotionally and positively motivated to secure or buy healthy products in the kiosk without having to doubt whether the product is beneficial to his/her health. Trust must be established through design and messaging.
Wireframes are the blueprint of any digital product, laying the foundation for a successful design. They help visualize the structure and flow of a website or app without the distraction of colors, fonts, or imagery, ensuring the focus stays on functionality and user experience. Wireframes facilitate clear communication between designers, developers, and stakeholders, making it easier to iterate quickly and address potential issues early in the design process. They are essential for aligning project goals and delivering a user-centered, intuitive interface. That's why I started the design process of the mobile app with a basic wireframe mockup.
The home screen is the place where you can see all product categories at a glance and thus maintain an overview. Alternatively, you can enter a specific product in the search bar and search for it directly.
As soon as you click on a category, you will be taken to the specific category where you can select individual products. The shopping cart function is still grayed out at this point. The search bar is still available at all times.
You can only add the item to the shopping cart in the actual product view. The corresponding button is now active and clickable. The product screen shows various relevant information about the product that is important to consumers interested in health.
The user can see what his or her status is on every screen in the app. With every purchase you collect points and this way you can level up. Each level has fun and descriptive names and avatar images to make the whole experience playful and fun. As soon as you reach a certain number of points, a new avatar is activated and the user receives a voucher for further purchases as a gift. The process is supported by lively animations and signal tones as notifications.
The user can reach different levels through regular purchases. The names for the levels are playful and are based on animal images. The app thus creates a playful atmosphere and gives the user additional motivation to eat more consciously and healthily thanks to the kiosk. Each time you reach a level you will receive a prize voucher.
The app would have to be tested with real users. Based on the findings, further improvements would be made.At this point I already have suggestions for potential optimizations: