Liquidinterface | Schillerhöfe | Holländer Str. 100 | 13407, Berlin | Germany

Assaf Hauser

Automatico

Holon, Israel

Offer Top Up Kiosk | Top Up Kiosk | UX & UI - Web And Mobile Design

Offer-Nr.: 22636262 | Offer Date: 03/11/2024 | USt-IdNr.: DE281024630

Dear Assaf Hauser,

We are thrilled to have the opportunity to provide our expertise in defining and designing the User Experience (UX) and User Interface (UI) for your web and mobile application Top Up Kiosk. Our team of skilled designers and developers is committed to delivering a top-notch experience for your users while adhering to your project requirements. Below is our proposal outlining the scope of work, deliverables, and timeline:

1. Scope of Work: Our task is to create a user-friendly and visually appealing UX/UI design for both the web and Android native applications, catering to the specified requirements for your top-up wristband service. The application will include the following main screens:

  1. Language Selection
  2. Check Balance
  3. Transaction History
  4. Top-up
  5. Payment Method Selection
  6. Payment Confirmation
  7. Payment Processing
  8. Top-up Success

Description:

Function: Language Selection

  1. Language Selection Screen – User selects the preferred language for the app.

Function: Check Balance

  1. Check Balance Screen – User can quickly check the current balance of their wristband account.

Function: Transaction History

  1. Transaction History Screen – Optionally provides a summary of recent transactions related to the wristband account. This may include the date, time, and amount spent on each transaction, allowing the user to track their spending.

Function: Top-up

  1. Top-up Screen – User can directly access the top-up options to add funds to the wristband.
  2. Scan Wearable Screen – User can scan their wearable to initiate the top-up process.
  3. Title – Wearable Balance Screen – Displays the current balance of the user's wristband account.
  4. Pre-defined Amounts Screen – Provides three pre-defined top-up amounts for the user to choose from (e.g., €10, €20, €50).
  5. Custom Amount Screen – Offers the user the option to enter a custom top-up amount.
  6. Auto Reload Option Screen – Allows the user to enable auto-reload once their balance drops below a certain threshold.
  7. Return to Main Menu Screen—Goes back to the main menu.

Function: Payment Method Selection

  1. Payment Method Selection Screen – User can choose their preferred payment method for the top-up transaction. This may include options like credit/debit card, smartphone NFC payment, or other supported payment methods.

Function: Payment Confirmation

  1. Payment Confirmation Screen – Shows a summary of the selected top-up amount and chosen payment method. Provides a button or option to proceed with the payment.

Function: Payment Processing

  1. Payment Processing Screen – If the selected payment method requires further steps, such as entering card details or authentication, screens are provided to guide the user through the payment process. This may include entering card information, PIN verification, or tapping the smartphone for NFC payment.

Function: Top-up Success

  1. Top-up Success Screen – After the payment is successfully processed, this screen confirms the top-up transaction. It shows the updated balance and additional details related to the transaction. Provides a button or option to return to the main menu or perform another action, such as checking the balance or initiating another top-up.

2. Deliverables: Upon completion of the project, we will provide the following deliverables:

  • Visual concept for the web application, outlining the functionality and one flow.
  • Visual concept for the mobile application, covering the key features 1-8.
  • Screen designs for both the web and mobile applications in Adobe XD exported to Figma formats.
  • A complete set of graphical assets and resources used in the design.

3. Timeline: We estimate that the project will be completed within 4 weeks from the project commencement date. This timeline includes the design phase, feedback iterations, and finalization.

4. General Requirements: The UX/UI design will incorporate the following features:

  • Top-up options using credit cards, smartphones (NFC), and enabling auto-top-up based on the predetermined threshold.
  • Language selection for a personalized user experience.
  • Clear display of the current wristband balance and transaction history.
  • Pre-defined top-up amounts ($10, $20, $50) and the option to enter a custom amount.
  • Auto Reload option for automatic reloading when the balance reaches a certain threshold.

5. Design Interfaces: We will provide the UX/UI design for:

  • Touchscreen Display for easy user interaction.
  • Card Reader for credit/debit card payment transactions.
  • NFC Reader for smartphone payments and wristband linking.
  • RFID Reader for relevant purposes.
  • Barcode/QR Code Scanner for ticket or voucher redemption, if applicable.
  • Built-in Wi-Fi or Ethernet connectivity for real-time transactions and data synchronization.
  • Optional Camera integration for QR code scanning or identification purposes.
  • Standard power and network connections for seamless integration with kiosk infrastructure.

-----------------------------------

Web App Screens (8):

  1. Language Selection
  2. Check Balance
  3. Transaction History
  4. Top-up
  5. Payment Method Selection
  6. Payment Confirmation
  7. Payment Processing
  8. Top-up Success

Mobile App Screens (7):

  1. Language Selection
  2. Check Balance
  3. Transaction History
  4. Top-up
  5. Payment Method Selection
  6. Payment Confirmation
  7. Payment Processing

-------------------------------------

6. Customer Support: As per your requirement (1.1), we understand that you will provide all the necessary support throughout the project. However, we assure you of our full cooperation and assistance in any design-related matters.

We believe that our skills and experience make us the ideal partner for this project. If you have any specific preferences or additional requirements, please feel free to share them with us, and we will ensure they are accommodated.

Costs

The remuneration for the services is as follows:

15350 € exclusive of tax

Payment Policy:

Thank you for choosing our design services. To initiate the project and secure our commitment, we require the following payment terms:

  1. 50% Payment as Project Confirmation: Upon acceptance of the proposal, we kindly request a 50% payment of the total project cost as confirmation of your project. This payment validates your intent to proceed, and we will begin working on the designs once the payment is received.
  2. 50% Payment Three Weeks After Project Commencement: The remaining 50% of the project cost will be due three weeks after the project has commenced. This milestone marks the completion of the design phase and delivery of the final screens.


Attachment 1

Attachment to Contract | Proposal No.: 22636262

1. Design Services Package: 3 Versions (If this is needed) of Each Screen with 3 Revision Rounds.

We are pleased to offer our comprehensive design services for your web and mobile applications. As part of this package, we will provide you with three unique versions of each screen, tailor-made to meet your specific requirements and brand identity based on https://orbitaliq.com/. Additionally, you will have the opportunity to request up to three rounds of revisions for each screen to ensure that the final design aligns perfectly with your vision.

What's included:

  1. Three Unique Versions of Each Screen (If this is needed): Our team of skilled designers will create firs one then another and if it needed one more up to three distinct design variations for every screen in both the web and mobile applications. These versions will showcase different styles, layouts, and visual elements to offer you a range of design options.
  2. Tailored to Your Requirements: We understand that every project is unique, and we will take the time to understand your preferences, target audience (which we would need), and brand guidelines (We could adopt them from the web service UI) . Our designs will be customized to reflect your brand identity and deliver an engaging user experience.
  3. High-Quality Designs: You can expect top-notch, pixel-perfect designs that are optimized for both web and mobile platforms. Our focus on attention to detail ensures that the screens will be visually appealing and intuitive to use.
  4. Three Rounds of Revisions: We value your input throughout the design process. You will have the opportunity to provide feedback and request changes to the designs for up to three revision rounds. Our team will diligently incorporate your feedback to fine-tune the designs according to your preferences.

Bitte unterschreiben Sie unten mit einem Eingabestift, Ihrer Maus oder Ihrem Finger, um diesen Vertrag zu autorisieren. Indem Sie dieses Dokument elektronisch signieren, stimmen Sie den oben festgelegten Bedingungen zu. Nachdem das Dokument unterzeichnet wurde, können Sie mit dem Drucken fortfahren.

Unterschrift - Auftraggeber: