View
More

Mobile App for a Snack Kiosk

Development of a user friendly app layout and a functional interface for a snack kiosk

Live Preview

About the Project

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.

Industry:

Food, Health & Fitness

Services:

UX/UI

Healthy Bites App for a Snack Kiosk

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

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.

Wireframing as a preparation for the design process

Home Screen

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.

Home Screen

Categories

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.

Category Screen

Product Views

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.

Product Screen

Gamification Aspect

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.

Ranking List

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.

Ranking List
Preview of the essential screens and their view in the mobile phones

Future Optimizations

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:

  • User account: a user profile could be integrated into the app, where the user can plan his/her purchases in a calendar and view the level reached.
  • Gamification: instead of animal avatars, you can alternatively work with a cup that fills with coins with every purchase until it overflows and you reach a new, higher level.
  • Further designs: Mockups for checkout, payment pages and redeeming vouchers can be visualized.
  • Icons: the appearance of the graphic elements can still be standardized more strictly.
No items found.