Mall Electro — многоезичен индустриален B2B сайт
От базов списък с електротехнически услуги до структуриран сайт за индустриална аудитория на български, английски и румънски.
Изградих сайта от началната концепция, като поех информационната архитектура, UX/UI решенията, структурата на съдържанието, многоезичното представяне, техническото SEO и AI-подпомогнатото техническо изпълнение с React/TypeScript.
Начална точка · 01
От списък с услуги до цялостен уебсайт
Проектът започна с много ограничена изходна информация: основен списък с електротехнически услуги на компанията.
Нямаше съществуващ сайт, прототип, установена информационна архитектура, подготвени текстове, визуална система или многоезична структура на съдържанието.
Първата задача не беше редизайн, а определяне на предназначението и структурата на бъдещия сайт.
Организирах бизнес предложението в три свързани области — услуги, решения и индустрии — и използвах тази структура като основа за навигацията, йерархията на страниците, съдържанието и интерфейса.
Информационна архитектура · 02
Организиране на техническите услуги за индустриални клиенти
Обикновен списък с услуги не беше достатъчен, за да обясни как компанията работи с индустриални клиенти.
Разширих структурата на съдържанието в три нива:
- Услуги
- Обясняват какво предлага компанията.
- Решения
- Организират предложението според проектни ситуации и оперативни нужди.
- Индустрии
- Показват къде се прилагат тези възможности.
Тази структура превърна сайта от общо корпоративно представяне в практичен източник на B2B информация за индустриални клиенти.
Система на съдържанието · 03
Една структура за услуги, решения и индустрии
Сайтът използва общи шаблони за страниците вместо отделни оформления без обща система.
Подробните страници за услугите следват обща структура за техническо обяснение, приложения, процес, често задавани въпроси и действия за запитване. Същият принцип е приложен при решенията и индустриите.
Това улесни разширяването на сайта на три езика, като запази последователност в йерархията, навигацията и представянето.
Работещата структура включва по шест подробни страници за услуги, решения и индустрии на всеки език.
UX/UI система · 04
Визуална система за ясно представяне на техническа информация
Визуалното оформление е умишлено сдържано, техническо и подходящо за индустриалния контекст.
Използвах последователни отстояния, общи шаблони за карти и ясна типографска йерархия, за да могат индустриалните клиенти да преглеждат услугите, да сравняват възможностите и да преминават между техническата информация и подходящите действия за запитване.
Разработих визуалната система заедно с информационната архитектура, така че интерфейсът да подпомага практическата оценка на услугите, решенията и приложенията по индустрии, а не да служи само за украса.
Многоезична структура · 05
Три езикови версии в една обща структура
Работещият сайт има версии на български, английски и румънски с отделни маршрути и локализирани адреси.
Многоезичната структура не използва просто дублирани URL адреси. Всяка езикова версия има собствена структура на маршрутите и метаданни със съответните канонични URL адреси и hreflang връзки.
Окончателната XML карта на сайта съдържа 81 локализирани URL адреса — по 27 на език.
Прегледах версиите на български и английски преди публикуването. Локализацията на румънски беше AI-подпомогната, интегрирана в сайта и след това проверена от носител на езика. В работещата версия бяха нанесени приблизително пет до шест корекции от този преглед.
Техническа архитектура · 06
Техническа архитектура и AI-подпомогната front-end реализация
Техническата архитектура беше изградена с React и TypeScript, Vite, Tailwind CSS и React Router като част от AI-подпомогнат работен процес под мой контрол.
Техническата конфигурация включва локализирани метаданни, канонични URL адреси, hreflang връзки, структурирани данни, генериране на XML карта на сайта и robots.txt, както и предварително генериран HTML.
Общите React компоненти и оформления поддържат маршрути според езика, локализирани адреси, шаблони за подробните страници, пренасочвания и собствена страница 404.
AI-подпомогнат процес · 07
AI-подпомогнато техническо изпълнение под мой контрол
Проектът не е създаден автономно от AI.
Посоката на проекта, информационната архитектура, UX/UI решенията, съдържанието и крайният преглед бяха под мой контрол.
Използвах ChatGPT и Codex като помощни инструменти за подготовка на съдържанието, локализация, техническо планиране, изграждане с React/TypeScript, работа по кода, отстраняване на проблеми и SEO документация.
Техническото изпълнение с React/TypeScript беше част от AI-подпомогнат работен процес. Крайните решения и одобрението останаха под мой контрол.
Работещ сайт
От минимална първоначална информация до завършен многоезичен индустриален сайт
Mall Electro започна с основен списък с услуги и без съществуваща структура за сайта.
Публикуваният сайт дава на индустриалните клиенти ясна навигация между услугите на компанията, решенията за конкретни проектни ситуации и приложенията по индустрии.
Резултатът е един структуриран многоезичен B2B сайт, изграден от ограничена първоначална бизнес информация.
Посети сайта ↗