Goal and Homepage Banner Concept
Homepage Banner Functionality
The homepage of postok.de will include a central interactive banner that allows users to immediately begin the shipping process. This banner is designed to provide a fast and intuitive entry point into the service and will include two primary call-to-action buttons.
1. Create Shipping Label
When the user clicks on the button labeled "Create Shipping Label", a compact interface opens up directly below or within the banner section.
At the top of this interface, a mini-heading will be displayed: "Calculate your package price".
Below this heading, users will be guided through a step-by-step input process:
First, the user selects the destination country from a dropdown menu. This menu includes the following options:
- Russia
- Ukraine
- Kazakhstan
- Kyrgyzstan
Once a country is selected, the next input fields become visible:
- Length of the package in centimeters
- Width of the package in centimeters
- Height of the package in centimeters
- Weight of the package in kilograms
As soon as all these values are filled in, the system will instantly calculate and display the shipping options available for the selected country and package size. These shipping options will appear in a visually distinct list or card layout and include:
- Option 1: Drop-off at the POSTOK office in Berlin (e.g. €35)
- Option 2: Send the package via DHL to the POSTOK office (e.g. €35)
- Option 3: Pickup service by POSTOK courier, directly from the customer's home (e.g. €35 + €8 courier fee)
Each option will show its associated cost clearly, along with a short description and selection mechanism (radio button or checkbox).
Once the customer selects their preferred shipping method, a large button labeled “Create Shipping Label” will appear below. Clicking this button will take the user to the full shipping form where sender, receiver, and contents are entered.
2. Track Shipment
Next to the "Create Shipping Label" button, there will be a second primary button titled “Track Shipment”.
When this is clicked, a small input field is shown where users can enter their shipment’s tracking number. After entering the number and clicking “Track Now”, the user is redirected to the Russian Post's official tracking portal, where the current status of the shipment can be viewed.
This section aims to build trust through transparency and ease-of-use by linking directly to a well-known official postal service.
The entire banner interface should be designed responsively and mobile-optimized, so that the full functionality is easily accessible across all device types.
Start of “Create Shipping Label” Function
This section is located directly within the interactive banner area on the homepage of postok.de. It represents the starting point for users who want to begin the parcel shipment process. All inputs entered in this step are critical, as they determine the shipping destination and package characteristics, which are required for price calculation and determining suitable shipping methods.
The interaction begins with two sequential steps within the banner component:
- Selection of Destination Country
The user is first prompted to choose the destination country to which the parcel will be sent. This is achieved via a dropdown menu integrated directly into the banner. The dropdown includes four available countries:
- Russia
- Ukraine
- Kazakhstan
- Kyrgyzstan
Once the user selects a destination, the next set of input fields is dynamically displayed.
2. Input of Package Dimensions and Weight
After the country selection, the user is asked to enter key information about the package dimensions and weight. This includes:
- Length (cm)
- Width (cm)
- Height (cm)
- Weight (kg)
These fields are visually aligned in a clean layout and should include placeholders and validation to ensure proper data entry.
As the user fills in the dimensions, the system calculates the shipping data in real time. These values are passed forward to enable the immediate display of appropriate shipping options in the next step.
This section must be designed for optimal usability and responsiveness, particularly for mobile users. Clean input handling, automatic formatting (e.g., numbers only with unit hints), and immediate feedback are critical to the user experience.
This step serves as the foundation for the next phase, in which the user will be presented with personalized shipping options based on the dat
Shipping Options & Price Overview
This section appears immediately after the user has entered the key shipment data, including the destination country, package dimensions, and weight. Based on these inputs, the system calculates all available shipping options and presents them in a clearly structured and user-friendly overview. This step is still part of the interactive banner on the homepage.
The goal here is to offer the customer complete transparency and flexibility when deciding how to hand over their package to POSTOK.
The user will be shown three different shipping methods side by side, each with a price tag and a short, descriptive explanation. These options help the customer choose the most convenient way to get their package to POSTOK for international shipment.
Here’s how the options will be displayed:
Option 1 – Send via DHL
- Price Example: €35 (actual amount calculated based on size and weight)
- Description: The customer selects this option if they want to send the parcel from their own home using DHL. They independently prepare the package, affix the address, and send it to the POSTOK office. Once the package arrives at POSTOK, the company takes over and proceeds with the international shipment.
Option 2 – Drop-off at the POSTOK Office
- Price Example: €35
- Description: This option is ideal for users who prefer to bring the package in person. The customer can visit the POSTOK office in Berlin, drop off the parcel directly, and the POSTOK team takes care of the rest from there. It’s a simple solution for users who live nearby or want to save on shipping from their location to the office.
Option 3 – Pickup by POSTOK Courier
- Price Example: €35 base price + €8 courier fee (or another defined amount)
- Description: The customer selects this option if they want their package picked up from their home address by a POSTOK courier. This premium service adds convenience for those who cannot visit the office or ship via DHL. The courier collects the parcel, brings it to the POSTOK headquarters, and international processing begins from there.
Each of the three shipping methods will be displayed in a card-like design with an icon, title, pricing, and a short description, including a visual selector (radio button or highlight state). This makes it intuitive for the user to compare and select their preferred option.
Once the user selects one of these options, a large button labeled “Create Shipping Label” becomes visible. Clicking this button takes the user to the detailed input form where they can enter the full shipment information including sender, recipient, and package contents.
The entire interaction should be highly responsive, mobile-friendly, and clearly understandable for users of all age groups and technical skill levels.
Track Shipment – Function & Trust
This function is designed to build trust with the user by offering a simple and transparent way to track the shipment status of their package after it has been handed over to POSTOK.
Once the shipment has left the POSTOK office and has been transferred to the respective national postal service (typically the Russian Post for shipments to Russia), POSTOK generates a tracking number for the shipment. This tracking number is then sent to the customer via email or displayed within the order confirmation interface.
To track a shipment, the customer navigates to the homepage of the POSTOK website. There, directly in the main banner section, they will find a prominently placed input field labeled “Tracking Number”.
The user simply enters their personal tracking number into this field and clicks the button labeled “Track Now”.
As soon as the user clicks the “Track Now” button, they are immediately redirected to the official tracking portal of the Russian Post (https://www.pochta.ru/tracking#TRACKINGNUMBER). The tracking number entered by the user is automatically passed to the URL, so the Russian Post website opens with the correct tracking query already pre-filled.
This integration ensures that users receive the most reliable and up-to-date tracking information directly from the logistics provider that handles the delivery in the destination country.
Additionally, a small informational note is displayed under the tracking field, stating: “You will be redirected to the Russian Post’s tracking portal.”
This text builds trust by being transparent about where the data is going and what the user can expect next.
The implementation is intentionally kept simple and robust, using an external redirect, rather than building an internal API tracking engine. This reduces technical complexity, minimizes error potential, and reassures the user by showing an official platform they recognize and trust.
This feature must be fully responsive and seamlessly integrated into both the desktop and mobile versions of the homepage.
Goal: Create a fast, intuitive and professional tracking experience that boosts user trust in POSTOK’s logistics and transparency.
Reference: Existing Paper-Based Shipping Form (Currently Used in Office)
This image shows the current parcel form used by POSTOK at the Berlin office. At the moment, this form is completed manually by staff and customers on paper. It collects all essential shipping data including:
- Sender information (name, address, email)
- Recipient information (full address in the destination country)
- Full list of parcel contents (items, quantity, declared value)
This form serves as the legal basis for international parcel processing and is required for customs documentation.
Goal for the new system: Our aim is to completely digitalize this form while retaining all required fields. The digital version must also integrate new options for users, such as:
- Automatic package dimension & weight input
- Real-time shipping option selection based on data input
- Backend-driven item code assignment for customs compliance
- Multilingual entry support for users across languages (EN, DE, RU)
Important: This paper version is the starting point — but not the final version. As we transition to a fully digital system, additional form fields, logic, and user experience enhancements will be necessary. This includes input validations, progress steps, integrations to backend logic, as well as legal and operational refinements that will be defined in collaboration with the CEO and team.
Please keep in mind: The form may need to be updated, expanded, or adjusted over time as we learn more from user behavior, legal feedback, and internal workflows.
Full Form Structure, Logic & Technical Requirement
This section describes the central form that will be used by customers to submit all necessary shipment information in order to generate an official shipping label. This form is the heart of our digital shipping workflow and is modeled in terms of usability and layout on Hermes' parcel label tool — but with significant adjustments to meet POSTOK's specific operational and regulatory requirements.
The form will be accessed after the customer has selected their desired shipping method and reviewed the estimated price on the homepage banner. Upon clicking the button "Create Shipping Label", users are redirected to this full form to complete the detailed information entry.
The form should be visually and functionally structured into the following sequential steps, which guide the user intuitively through the data entry process:
1.
Destination Country At the top of the form, users must choose the destination country from a dropdown menu. The available countries will initially include:
- Russia
- Ukraine
- Kazakhstan
- Kyrgyzstan
2.
Package Dimensions The user must then provide the exact physical dimensions of the package:
- Length in cm
- Width in cm
- Height in cm
3.
Package Weight The actual weight of the package (in kilograms) must also be entered.
Both dimensions and weight are essential for calculating accurate shipping fees and for ensuring the shipment meets carrier and customs restrictions.
This field is mandatory and directly influences the available shipping options, pricing, and form validation rules (e.g., phone number format).
4.
Shipping Method Based on the selected destination, the form dynamically presents the available shipping methods via radio buttons or selectable cards. Each card includes a brief description and its respective cost:
- Sending the package via DHL to the POSTOK office in Berlin
- Dropping off the package personally at the POSTOK Berlin office
- Having the package picked up by a POSTOK courier (with additional courier fee)
5.
Sender Information The sender must enter their personal details including:
- Full name
- Address (street, ZIP code, city)
- Phone number
- Email address
These details are required both for legal documentation and for communication (e.g. confirmations, shipping updates).
6.
Recipient Information Next, the recipient’s information must be provided. This includes:
- Full name
- Address in the destination country (street, ZIP code, city)
- Recipient’s phone number
Correct formatting according to the destination country’s postal regulations must be enforced.
7.
Package Contents (Item List) A multiline input table allows users to enter the detailed contents of the shipment. For each item, the following information must be provided:
- Description of the item (e.g., “T-Shirt” or “toys”)
- Quantity (how many units of this item are included)
- Value in EUR (declared value for customs processing)
This part of the form is critically important, as POSTOK shipments must comply with international customs requirements — which includes an accurate declaration of shipped goods.
==================== Item Code Matching & Backend Logic ====================
To ensure customs compliance and efficient internal processing, every item that is entered into the package contents table must be automatically matched to a unique article code (internal ID).
These item codes are essential for several reasons:
- Required for customs export documentation
- Needed for automated generation of the CN23 declaration form
- Crucial for internal logistics reporting, tracking and analytics
- Helpful for detecting restricted or prohibited items early in the workflow
The article code matching must work in the background without requiring action from the customer.
How the matching works: For example, if the user enters “T-Shirt” (or “футболка” in Russian, or “tee” in English), our backend system must automatically recognize that this item corresponds to the standardized customs code "61091000".
A multilingual product database will be implemented to handle this mapping. Example structure:
{ "61091000": { "de": ["T-Shirt", "Shirt", "Kurzarmhemd"], "ru": ["футболка", "майка"], "en": ["t-shirt", "tee"] } }
The mapping system must be flexible and expandable. We envision two parallel approaches:
- A manually maintained local mapping table that grows over time as new terms are entered.
- An optional AI/NLP-based matching engine that can recognize item semantics across languages (planned for future expansion).
Note to the developer team: This logic must run invisibly and automatically in the background. The system should be designed to support both simple exact matches and flexible term variations. The final implementation strategy and database structure will be defined together with the CEO in a technical workshop.
Final Action on the Page At the end of the form, once all fields are completed and validated, the user clicks the button “Add to Cart”.
This action stores the complete form entry temporarily and redirects the user to the shopping cart overview page, where multiple shipments can be managed and the checkout process begins.
Shopping Cart & Checkout Summary
Overview: This section represents the final step in the package creation and ordering process. After the user has completed all data entries in the form and clicked on "Add to Cart," they are redirected to this checkout page. Here, they can review their entire order, make adjustments if needed, add more packages, enter their contact details for confirmation, and finally select their preferred payment method to complete the order.
Detailed Description of Features:
1.
Shipping Label Overview Each package created by the user is displayed in a list format. Every row corresponds to one shipment and contains the following information:
- The destination country to which the package is being sent.
- The package’s dimensions (length, width, height) and its weight.
- The selected shipping method (e.g., drop-off, DHL, or courier pickup).
- The total calculated price based on the chosen shipping method and package parameters.
- A button to either edit or delete the shipment entry if the user wants to make corrections or remove a package before finalizing the order.
2.
Add More Labels Below the overview section, users will see a clearly visible button labeled “Add Another Package”. Clicking this will return the user to the package creation process so they can input a new shipment (e.g., a different destination or second parcel). This allows users to handle multiple shipments in one session.
3.
Email for Confirmation Underneath the list of packages, there will be a designated field for entering an email address. This address is mandatory as it will be used to send the customer a PDF confirmation of their order, including the shipping label and all relevant shipping information. Displayed next to this field: A short informative note, e.g., “We’ll send your PDF shipping label and all details to this email address.”
4.
Choose Payment Method Below the email input, users will be asked to choose a payment option. The available methods are:
- Cash payment upon drop-off at the POSTOK Berlin office.
- Online payment via PayPal or credit/debit card.
- Cash payment at time of courier pickup (if this delivery option was selected).
These options will be displayed as clear and easy-to-select radio buttons or toggle cards, ensuring a user-friendly experience across all devices.
5.
Final Step – Order Completion At the bottom of the checkout page, a large and visually highlighted button labeled “Complete Order & Create Label(s)” will be shown. Once clicked, this finalizes the user’s order and sends all data to POSTOK’s backend systems.
Optional Feature: After clicking the button, the user is taken to a confirmation screen displaying a simple thank-you message such as: “Thank you for your order. You will receive your shipping label shortly via email.”
Technical Note for Development Team: All shipment data created by the user must be temporarily stored and organized in a way that supports multi-package handling. This includes:
- Generating a separate instance for each shipping label
- Managing session state for active users
- Ensuring that all label data can be reviewed and edited before submission
Once the user completes the process, a confirmation email must be automatically sent to the POSTOK internal team. This email should include the shipment data in a machine-readable format (such as CSV or JSON), which will be discussed and finalized with the CEO at a later stage.
Technical Context & Final Notes on Homepage Implementation
To conclude this presentation, we wanted to provide full transparency on the current state of the website.
The existing homepage of postok.de has been built using WordPress and Elementor. The current banner at the top of the site was implemented using the Revolution Slider plugin and serves as a placeholder for the upcoming interactive shipping interface.
However, in order to realize the full functionality of our custom-built "Create Shipping Label" and "Track Shipment" modules – as inspired by the Hermes model – we are fully aware that this area must be restructured and likely hardcoded.
This includes:
- Replacing the current banner section with a custom-coded component
- Integrating dynamic functionality for destination selection, size/weight input, and instant shipping calculation
- Routing to the full form, cart, and payment process after label creation
We are open to your suggestions regarding the best technical implementation strategy:
- Should this module be coded externally and embedded?
- Can it be integrated into the WordPress theme in a stable, scalable way?
- How would you recommend managing the user experience across both desktop and mobile?
Attached is a screenshot of the current state of the homepage. You may also visit postok.de for direct reference.
We appreciate your guidance and look forward to your input on how best to proceed with the technical integration, while maintaining a smooth, clean, and mobile-friendly user experience.