Coffee Machine

QT Commerce connector-Coffee Machine

The “Coffee Machine” project demonstrates the integration of interactive technology with everyday tasks. By combining a QT-driven application with a coffee machine and an online shop backend, the system allows users to interact with the device and order coffee-related supplies directly through the display. Designed for high-visibility settings, this use case serves as a practical and engaging way to showcase our development skills and backend integration, offering an intuitive, easy-to-understand experience for users.

Use case:

Coffee Machine – Interactive Smart Vending Interface
This project integrates intuitive interaction design with everyday functionality, transforming a traditional coffee machine into a smart, connected device. Built using a QT-driven application, the interface allows users to order coffee and related supplies directly from the machine via a touch display, seamlessly connected to an online shop backend.

Designed for high-traffic environments (e.g. offices, co-working spaces, lounges), this use case highlights our ability to blend user-centered design with reliable backend integration. The result is a frictionless, engaging experience that simplifies daily routines while demonstrating technical and UX capabilities.

Design Process
Understanding the Project Requirements
  • The first step involved thoroughly understanding the requirements of the “Coffee Machine” use case. I collaborated closely with stakeholder, including developer and product owner, to define user goals, functional specifications, and the desired user experience.
  • A project brief outlining core functionalities (e.g., ordering coffee, machine settings), user interactions, and the integration with the online shop backend.
User Research 
  • I conducted research to identify key user personas who would interact with the coffee machine (e.g., office workers, coffee enthusiasts). Also to gather insights into their needs and behaviors.
Wireframing and Initial Design Concepts
  • Based on the user research, I began designing low-fidelity wireframes to explore multiple layout concepts for the coffee machine’s interface. This allowed me to focus on the structure and flow of the interface without getting distracted by aesthetics.
  • A set of wireframes illustrating various screen layouts for essential tasks (e.g., ordering coffee, selecting machine settings).
Wireframe
Usability Testing and Feedback Collection
  •  I conducted usability tests with potential users to validate the wireframes. This involved asking participants to think-aloud and perform the tasks on the coffee machine prototype, while I observed their interactions and gathered qualitative feedback.
  • The usability testing improved the design (e.g., difficulty in navigation, unclear labels or images) and insights on user preferences.
High-Fidelity Mockups and Visual Design
  • After refining the wireframes, I moved on to creating high-fidelity mockups, focusing on the visual appeal and overall aesthetic. I considered factors such as color schemes, typography, and visual hierarchy to ensure clarity and an intuitive user experience.
  • High-fidelity mockups of the main interaction screens, including the home screen, coffee selection, order confirmation, and settings menu.
Main view of Coffee machine
Order items, when the machine needs it
Product details
Settings
 Iterative Refinement and Collaboration
  • The design was refined over multiple iterations, with constant collaboration between myself, the development team, and stakeholder. I revised the designs based on feedback, ensuring that the interface was efficient, and aligned with user expectations.
  • Updated designs and interaction flows with changes implemented from stakeholder and developer feedback.
Final Testing and Handoff to Development
  • After final refinements, I performed a final round of usability testing to ensure that the design met all user needs and performed smoothly. Once the design was validated, I handed off all assets to the development team, including design specifications, assets, and prototypes.
  • Final design assets (e.g., icons, images) and detailed specifications for the development team.