Studio technologiczne · Aplikacje webowe, strony i marketing
Modernizacja mocno przestarzałej strony polskiej firmy software'owej - nowy, czytelny i konwertujący serwis prezentujący ich produkty bazodanowe.
Projekt w skrócie
OTC S.A. to działająca od 1995 roku firma z Krakowa, tworząca narzędzia do migracji i pracy z relacyjnymi bazami danych (Mediator, Terminal, Winflector). Ich dotychczasowa strona pochodziła z innej epoki internetu - zatłoczona, trudna w nawigacji i niespójna z jakością samego oprogramowania. Zaprojektowaliśmy nowoczesny, uporządkowany serwis, który buduje wiarygodność i prowadzi do kontaktu.
Kontekst i problem
OTC S.A. to krakowska firma technologiczna założona w 1995 roku przez pracowników ówczesnego Wydziału Informatyki i Telekomunikacji AGH. Od trzech dekad rozwija narzędzia do pracy z relacyjnymi bazami danych - Mediator, Terminal i Winflector - używane przez klientów korporacyjnych na całym świecie.
Dotychczasowa strona firmy powstała według standardów wcześniejszej generacji internetu: układ oparty na tabelach o stałej szerokości 773 pikseli, menu rozwijane po najechaniu i adresy w rodzaju index.asp?s=21&l=2. W czasach, gdy powstawała, była to poprawna, kompletna witryna - ale nie odpowiadała już dzisiejszym urządzeniom ani sposobom korzystania z sieci: nie miała wersji mobilnej, a nawigacja wymagała znajomości struktury serwisu.
Problem nie leżał w treści - ta była bogata i merytoryczna: opisy produktów, tematy techniczne, FAQ, listy wersji, dane kontaktowe działów. Problem leżał w jej podaniu. Nowy klient oceniający firmę po stronie www mógł odnieść wrażenie nieaktualności, które nijak nie odpowiadało jakości samego oprogramowania.
Serwis odwiedzają dwie różne grupy: dotychczasowi klienci, którzy wracają po wersje, wsparcie i dokumentację - oraz nowi, którzy dopiero oceniają wiarygodność dostawcy. Redesign musiał obsłużyć obie, niczego po drodze nie gubiąc.
Ograniczenia
Założenia strategiczne
Celem nie była nowa marka, tylko współczesny sposób używania istniejącej. Czerwień OTC, logo i slogany produktowe („The only way is SQL!") zostały zachowane i dostały nową oprawę.
Mediator, Terminal i Winflector to trzy powody, dla których ktokolwiek odwiedza otc.pl. Nawigacja, strona główna i podstrony są zbudowane wokół tego podziału.
Rok założenia 1995, rodowód z AGH i liczby sprzedanych licencji nie mogą być ukryte w zakładce „O nas" - wyszły na stronę główną jako dowód wiarygodności.
Długie strony opisowe zostały zamienione na listy tematów, zakładki i karty - deweloper szuka konkretnego zagadnienia, nie czyta serwisu jak książki.
Prawie połowa przychodów firmy pochodzi z eksportu, więc wersje PL i EN muszą być równorzędne - z przełącznikiem dostępnym od razu, bez przeładowania strony.
Kolorystyka
Celem nie był rebranding, lecz modernizacja sposobu używania istniejącej identyfikacji. Historyczna czerwień pozostała sercem palety - zmieniła się jej rola: z koloru dekoracji na kontrolowany akcent.
#A50034
Akcent systemowy - CTA, aktywne elementy, kluczowe informacje
Kontynuacja historycznej czerwieni marki w głębszym, współczesnym tonie. Działa jako kontrolowany akcent prowadzący wzrok do akcji - a nie jako kolor dominujący nad całym interfejsem.
#111827
Nagłówki i tekst podstawowy
Neutralna, pewna baza dla treści technicznych - nazwy produktów, wersje i specyfikacje czytają się bez wysiłku na jasnych tłach.
#F6F5F3
Tła sekcji i kart
Jasny serwis odwraca ciemną, gęstą kompozycję starej strony - długie treści produktowe zyskują światło i oddech. Delikatnie złamana biel rozdziela sekcje bez linii.
#E85D04
Wyróżnienia informacyjne - kategorie aktualności, etykiety
Drugi, cieplejszy akcent odróżnia elementy informacyjne od elementów akcji - czerwień zawsze znaczy „kliknij", pomarańcz „zwróć uwagę".
#6B7280
Metadane - daty, opisy drugorzędne, podpisy
Neutralna szarość buduje hierarchię przy dużej ilości danych - wersje i daty publikacji są obecne, ale nie konkurują z treścią główną.
Typografia
Neutralna, precyzyjna typografia wspiera czytanie technicznych informacji - z jednym redakcyjnym akcentem, który nawiązuje do 30-letniej historii firmy.
600 · 700
Nagłówki i hasła
Migrating to SQL?
Skondensowany display porządkuje gęste strony produktowe - mocne nagłówki („MIGRATING TO SQL?") wyznaczają sekcje, nie zabierając miejsca treści.
400 · 500
Tekst podstawowy i interfejs
Mediator ISAM Server - fast, unproblematic migration from DBF to SQL.
Neutralny grotesk o dużej czytelności - precyzyjny przy nazwach produktów, numerach wersji i listach tematów technicznych.
400 · 600
Akcenty redakcyjne
Founded in 1995 at the AGH University of Science and Technology in Kraków.
Szeryfowy akcent dla leadów i fragmentów o firmie dodaje „dokumentowego" charakteru - stosowny dla dostawcy działającego od 1995 roku.
Ścieżka użytkownika
Stara strona traktowała wszystkie treści równorzędnie - trzy kolumny teaserów o podobnej wadze. Nowa architektura ustawia je w jedną, priorytetową ścieżkę.
Hero z komunikatem migracji do SQL i pasek liczb: rok założenia 1995, ponad 30 lat doświadczenia, trzy linie produktowe.
Mega-menu „Products" i zakładki Mediator / Terminal / Winflector na stronie głównej - podział, po który przychodzi użytkownik.
Czytelne adresy (/products/mediator/delphi) i listy tematów technicznych - praca w WAN, koszty migracji, współpraca z Terminalem.
Sekcja „Who are we?" z historią od 1995 roku, liczba sprzedanych licencji i aktualności produktowe z datami - dowody zamiast deklaracji.
Formularz z tematem wiadomości już na stronie głównej oraz rozpisane e-maile działów: office, support, orders.
Decyzje UX/UI
Kluczowe sekcje
Wersja mobilna nowego serwisu - treści produktowe w jednej kolumnie, dostępne bez przybliżania.
Przed i po
Poprzednia strona OTC była rozwiązaniem zbudowanym według standardów wcześniejszej generacji internetu - kompletnym i merytorycznym, ale zaprojektowanym na monitory i przeglądarki sprzed ery mobile. Porównanie pokazuje, jak te same treści zostały przełożone na współczesny serwis.
Przed - otc.pl
Po - nowy serwis
| — | Przed | Po |
|---|---|---|
| Układ i responsywność | Stały układ 773 px oparty na tabelach, bez wersji mobilnej | Responsywna siatka dopasowująca się do każdego ekranu |
| Nawigacja | Menu rozwijane po najechaniu i adresy numeryczne (index.asp?s=21&l=2) | Podział wg linii produktowych i czytelne adresy (/products/mediator) |
| Hierarchia treści | Trzy kolumny teaserów o zbliżonej wadze wizualnej | Jedna oś: profil firmy → produkty → wiarygodność → kontakt |
| Prezentacja produktów | Długie strony tekstowe czytane od góry do dołu | Zakładki produktowe i skanowalne listy tematów technicznych |
| Wersje językowe | Flagi w stopce przeładowujące całą stronę | Natychmiastowy przełącznik PL/EN w nagłówku, zapamiętujący wybór |
| Kontakt | Tekstowa wizytówka - adres i telefony bez formularza | Formularz z tematem wiadomości plus e-maile działów |
| Identyfikacja wizualna | Czerwień marki zaszyta w ciętych grafikach GIF | Czerwień jako systemowy akcent - CTA i aktywne elementy |
Co zachowaliśmy
Od projektu do wdrożenia
Nowy serwis to aplikacja SPA odwzorowująca całą mapę treści starej strony w nowoczesnej architekturze - każda decyzja techniczna odpowiada konkretnemu wymaganiu projektu.
Co dostarczyliśmy
Najważniejsza decyzja
Najważniejszą decyzją w tym projekcie było to, czego nie zmieniliśmy. Modernizacja marki technologicznej z 30-letnią historią nie może odcinać jej od dorobku - slogany, treści produktowe i czerwień zostały, bo to je rozpoznają dotychczasowi klienci. Zmienił się sposób podania: architektura, hierarchia i responsywność. Redesign dojrzałej firmy to w większym stopniu praca redaktorska niż plastyczna - najpierw uporządkować, potem rysować.
Strona na żywo
OTC S.A.
Kompletna marka osobista dla nauczycielki angielskiego dla dzieci i młodzieży - logo, kolory, ton komunikacji i strona z rezerwacją lekcji próbnej.
Twoja firma również potrzebuje uporządkować ofertę i wizerunek? Porozmawiajmy o projekcie.