My client, a provider of dispensing machines catering to office workers and students (B2B, B2C), seeks to enhance the user experience (UI/UX) of their kiosk interface. As the sole designer on this project, my goal is to redesign the product from scratch and significantly improve the purchasing rate by 11%.
The original design of the client's kiosk presents several key challenges:
Enhance the kiosk UI/UX design with captivating graphics and micro-interactions to elevate visual appeal, usability, and efficiency, providing users with seamless purchasing experiences.
During the research phase, I conducted extensive analysis and gathered insights into user behaviour, preferences, and pain points. Key aspects considered include:
Upon thorough examination of the original design, it became apparent that significant improvements were necessary to enhance both visual appeal and user experience. Several notable flaws were identified, primarily revolving around three key areas:
Addressing these flaws through strategic design interventions is essential to elevate the overall user experience and drive better outcomes for the product.
Through competitive research, I analyzed brands like Bevi, CocaColaFreeStyle KIOSK, and Algramo to understand their user interaction strategies. I aimed to leverage their strengths to enhance our own product, focusing on user engagement and interface design.
In my exploration of beverage kiosk interaction design, I undertook a thorough study involving prominent brands such as Chatime, Starbucks, IKEA, KFC, McDonald's, Burger King, and bank ATMs. By expanding the research beyond drink dispensing machines, I sought insights and innovative ideas from a diverse array of sources.
This method facilitated effective decision-making by providing a comprehensive overview of design options. It ensured that the final UI/UX design not only aligned with the client's tastes but also incorporated industry best practices and innovative concepts. Ultimately, this approach streamlined communication, fostered collaboration, and propelled the project forward with creativity and efficiency.
Recognizing the significance of visual appeal and understanding the client's preferences, I devised an innovative approach. I meticulously curated multiple mood boards, meticulously categorizing content to examine specific pages and functions in-depth. These mood boards showcased various design elements, functions, pages, indicators, and Call to Actions (CTA), allowing the client to visualize and select preferred design aspects with ease.
Based on the research findings, several critical insights were uncovered:
As I embark on revitalizing the Kiosk UI/UX design, my client and I seek not only a functional upgrade but also a reimagined visual identity. This journey begins with a thorough exploration of color palettes, aiming to seamlessly blend user engagement with the client's aspirations.
Central to the client's vision is the infusion of modernity and luxury, mobile and premium. Drawing inspiration from ethereal aesthetics, our objective is to craft an ambiance that exudes sophistication and artistic allure.
With our target audience primarily consisting of female users, it's paramount that our rebranded visual identity resonates deeply with their preferences and sensibilities.
The colour selection strategy revolves around evoking a sense of nobility and premium quality. The rich brown gradient of #BC8439 and #895E25 serves as our primary colour, instilling an aura of opulence and exclusivity. To maintain visual coherence and sleekness, we opt for a monochromatic palette, ensuring consistency across the user interface.
Furthermore, our secondary colour (#BC8439) and accent colour (#D47D09) are meticulously chosen from within the brown spectrum, adding depth and visual interest while staying true to our theme of luxury and refinement.
I conducted extensive sketching sessions, producing a multitude of annotated sketches to present my conceptual ideas comprehensively to stakeholders, hardware and software engineers, and the marketing team. This method enabled us to pinpoint genuine requirements, identify engineering constraints within the QT system and current setup, and address concerns and preferences. Consequently, the design process and decision-making were significantly enhanced in terms of effectiveness and efficiency.
In my endeavour to optimize user experience, I have meticulously implemented clear visual cues aimed at streamlining step progression and distinguishing between product categories. By leveraging high-fidelity product imagery and crafting succinct yet informative UX copy, I ensure that drink products are prominently showcased, enriching the browsing experience with visually captivating and informative content. Through strategically placed buttons, icons, and instructional prompts, users are seamlessly guided through the interaction process, empowering them to make informed selections and navigate the interface with ease. This holistic approach to visual design fosters intuitive user navigation and enhances overall engagement with the kiosk interface.
In the realm of UI/UX design, the seamless interaction between users and touchscreens is paramount. Recognizing this, I delved into specific research on font size, button size, and screen dimensions, understanding their pivotal role in enhancing accessibility and user engagement. (see details via my article)
My meticulous approach to kiosk UI/UX design prioritizes user experience and accessibility. Incorporating legible text, appropriate contrast, and large touch targets, I ensure seamless interaction for all users. Specifically, the button design focuses on easy pressing, promoting inclusivity and usability.
In the realm of kiosk interface design, the integration of micro animations, graphic elements, and visual cues during transaction processing plays a crucial role in guiding users seamlessly through the payment and confirmation process. A secure and streamlined process for payment and confirmation is essential to ensure a seamless user experience. By meticulously crafting micro animations and visual cues, we aim to create a cohesive and user-friendly interface that facilitates effortless transaction processing while maintaining a high level of security and usability.
My design prioritizes intuitive touchscreen interactions, ensuring users can navigate effortlessly and engage seamlessly with the interface. By incorporating intuitive gestures and responsive touch controls, we enhance the overall user experience, making interactions intuitive and user-friendly.
One of the most challenging aspects of this kiosk interface design lies in instructing users on correctly extruding their selected beverage. This IoT-driven process requires seamless integration of software, hardware, and design elements to ensure a smooth user experience. Through the implementation of intuitive visual cues, clear instructions, and interactive elements, we aim to guide users through the beverage extrusion process with ease and confidence. By leveraging micro animations and graphic design, we enhance user understanding and engagement, ultimately delivering a satisfying and efficient interaction experience.
Ensuring consistent branding and adherence to a design system is paramount for reinforcing the client's identity and fostering product recognition across kiosk interfaces. By maintaining uniformity in spacing, colours, typography, visual style, and button usage across all pages, the interface establishes a cohesive brand presence that resonates with users. This consistency not only enhances brand recognition but also instills trust and familiarity, resulting in a more immersive and engaging user experience.
I orchestrated a comprehensive UI flow to foster clear understanding of the established interactions among stakeholders, developers, and marketing teams. Following thorough discussion and decision-making, I iterated the prototype to incorporate agreed-upon changes.
In every project, maintaining consistency and coherence in design elements is paramount. I meticulously crafted a design system encompassing text styles, colour palettes, button configurations, icon symbols, and micro-animation components using tools like Figma. This systematic approach ensures uniformity across the interface, enhancing user experience and brand identity.
Additionally, upon completing the MVP design, I compiled a comprehensive UI Style Guide and asset collections. These resources serve as invaluable references for future designers, developers, and marketing personnel, enabling them to swiftly grasp the design principles and implementations.
By establishing a robust style guide and design system, I ensure continuity and efficiency in design iterations and implementations, ultimately contributing to the success of the project.
%402x.svg){kind=icon}