Not specified
11 proposals
1. General requirements for the design and states of elements
The designer needs to develop a modern UX/UI concept for the marketplace service selection page. The interface should have minimal load, providing quick access to filtering and searching for the desired service. All interactive elements (buttons, switches, inputs, cards) must have illustrated visual states: Default: Basic appearance of the element. Hover: Color change, shadow appearance, or highlighting when the cursor hovers. Active/Pressed: Static feedback at the moment of clicking. Focus: State for inputs and buttons when navigating with the keyboard or entering text (highlighted border). Disabled: Inactive state of the element when the function is unavailable.
2. Global site header Logo: left side. Navigation menu: Items "Item 1", "Item 2", "Item 3", "Support". Items "Item 1", "Item 2", and "Item 3" have dropdown lists (Mega Menu) with sub-items, icons, and short descriptions. For example: the sub-item "Medical Assistance" is accompanied by a medical icon and the description "First aid and emergency services call". The "Support" item will open a dialog window in the future (not being done now). Authorization block (right side). Unauthorized user state: Buttons "Log In" and "Register". Authorized user state: Link button "Go to cabinet", user avatar, menu items.
3. Right sidebar filter
The panel operates in automatic application mode (without an "Apply" button). Any change in state automatically updates the content on the left side.
This block is already implemented. It will only need to be refined for mobile device opening.
4. Main (left) part: Search results panel
4.1 Main (left) part: Search results panel Reference information (Row 1): Text on the left — "We found [X] services", text on the right in the same row — "In [Y] organizations". Location block (Row 2): Default text "Organizations across Ukraine". When clicked, an autocomplete field for searching the locality is activated. Autocomplete design: Options in the dropdown list display the name of the locality (entered by the user) in bold, and below it — the full administrative hierarchy: for example, village Lebid (Lebid Territorial Community, Lebid District, Rivne Region) or Holosiivskyi District (Kyiv). For cities with special status (Kyiv), the higher hierarchy is absent. Display mode toggle: Toggle button for selecting the mode: "List" or "Map".
4.2. Service card content (List mode)
Cards are divided into two visual types: Classic card and Highlighted card. The Highlighted card has a brighter border/background and contains accent markers/labels: RECOMMENDED SERVICE or USER CHOICE.
Mandatory components of each card: Branding of the driving school: Logo, organization name, verification green checkmark (for verified organizations). Social proof: Average star rating (e.g., 4.8), number of reviews (as a clickable link leading to the organization's review block) and success rate of service provision. Service parameters: Name (e.g., "Service Provision"). Address/Location (full name, e.g., "Rivne Region, Sarny District, Dubrovytsia Territorial Community, village Ozerisk, Stepan Bandera Street, 14"). Next to it is a "Show on map" button that opens the location in a modal window. Tags of organizational advantages (availability of shelter, discounts for veterans, etc.), selected by the user in the filter. A large number can be hidden under the "Show all" button. Categories included in the program. Hovering over a category triggers a tooltip. Educational modules: Blocks "Module 1" and/or "Module 2". Displays the number of hours of service provision and their type — academic or astronomical. Next to it is an icon of a question mark with a tooltip explaining the difference between these hours. Interaction and saving: Icon button (heart, or other) for adding the program to "Favorites" (has Default and Active-filled states). Financial block: Total cost (large accent font). Installment block: Number of months and amount of monthly payment. Formed as a compact block with mini-logos of available banks (PrivatBank, Monobank, etc.), a number, and an explanatory tooltip. Media and description: Short text description of the program, block of thumbnails of photos/videos with the ability to expand into a gallery (Lightbox) upon clicking. Additionally (if space allows): Organization's working hours, button to expand direct contacts. Main call to action (CTA): Accent, large button "Submit Application".
It is necessary to show the content of the page with cards, and without cards. When the target programs according to the filter are not found.
4.3. Bottom block of the page
Under the main list of cards, a "Show more" button is placed in the center for pagination. At the very bottom of the page, an additional content block "Viewed Programs" is integrated with compact cards of the organizations' brands.
The project is still in the early stages of development, so I am currently very limited in budget. I am a programmer and freelancer myself, so I understand perfectly that work should be well paid, but I am looking for a compromise on price for now. Thank you for your understanding.
I will provide additional and more detailed information to the potential executor.