Redesign strony głównej IMSET
Od katalogu usług IT do strony, która prowadzi klienta od jego problemu do rozwiązania i kontaktu.
- Moja rola
- Projekt wykonałam samodzielnie: od analizy obecnej strony po specyfikację dla developerów
- Klient
- IMSET, software house: strony www, aplikacje, security, marketing, consulting, Comarch ERP
- Narzędzia
- Figma: makiety, komponenty, style guide oraz opis mikrointerakcji i responsywności
- Rezultat
- Strona główna w 3 rozdzielczościach (1920 / 1024 / 390 px), design system i wytyczne RWD
Nowoczesna strona, która buduje wiarygodność
Moim zadaniem było przygotowanie propozycji strony głównej IMSET na podstawie obecnej strony imset.it. Celem było stworzenie nowoczesnej strony, która miała czytelnie pokazywać kompetencje firmy i budować jej wiarygodność.
Zakres prac
Obecna strona imset.it
- 01Katalog usług
Oferta pokazana jako lista usług IT: klient musi sam przełożyć swój problem na nazwę usługi.
- 02Język firmy
Strona mówi o działach i technologiach, a nie o tym, co klient chce osiągnąć.
- 03Cel redesignu
Nowoczesna strona, która czytelnie pokazuje kompetencje i buduje wiarygodność.
Od katalogu usług do partnera, który rozwiązuje problemy
Projektuję stronę nie jako katalog usług IT, tylko jako miejsce, w którym klient przychodzi ze swoim problemem i znajduje odpowiednie rozwiązanie.
Nowa ścieżka klienta
- Problem
- Potrzeba
- Rozwiązanie
- Dowód
- Kompetencje
- Kontakt
Dwie warstwy strony
Hero zaczyna od problemu klienta
Nagłówek mówi o kliencie, nie o firmie. Główne CTA zaprasza do rozmowy o wyzwaniu, drugie prowadzi prosto do realizacji. Grafika po prawej pokazuje warstwy, które IMSET potrafi połączyć.
Najpierw cel klienta, potem oferta
Dowód: realizacje i zaufanie
Cała strona: 1920 px
Problem → Potrzeba → Rozwiązanie → Dowód → Kompetencje → Kontakt. Kolejność sekcji odpowiada ścieżce klienta.
Ta sama treść, inny układ
Na mniejszych ekranach zmienia się układ, a razem z szerokością maleją grafika w hero, ikony i odstępy. Styl (kolory, pigułki, brak cieni) jest wszędzie ten sam.
- 1920 pxCele po 3, kompetencje po 4, realizacje po 2
- 1440 pxWęższa siatka, stopka w 4 kolumnach
- 1024 pxGrafika hero pod tekstem, cele po 2
- 768 pxNawigacja w menu, kroki pionowo
- 390 pxJedna kolumna, logotypy po 2
Mobile: 390 px
- Wszystko w jednej kolumnie, w nawigacji tylko logo i menu
- Grafika w hero 290 px, przycięta od dołu
- Mniejsze ikony: kafelki 36 px w celach i ofercie
- Cele i oferta: ikonka w jednej linii z tekstem, tytuły 18 px
- Liczby jako wiersze, logotypy po 2, stopka w 2 kolumnach
- Sekcje: 32 px odstępu, marginesy 20 px
Style guide
Kolory jako tokeny (Brand, Border, Background), skala typografii Plus Jakarta Sans i JetBrains Mono do etykiet. Jeden zestaw zasad dla wszystkich rozdzielczości.
Marka
- Primary#3045D8
- Navy#0D1235
- Teal#0F7F72
- Ocean#1E6A9E
- Mint#A9DFE0
Tekst
- Primary#0D1235
- Secondary#464C6E
- Inverse#FFFFFF
- Inverse Soft#E8ECFF
- Muted Inverse#B9C0E8
Tła i powierzchnie
- Surface#FFFFFF
- Nav#FAFAFA
- Subtle#F5F6FC
- Tint Blue#E8ECFF
- Tint Teal#DCF3F0
- Tint Ocean#E0EFFA
- Tint Neutral#E4E6F4
Obramowania
- Border#E7E9F3
- Border Strong#DDE0F3
Stany i animacje komponentów
Przycisk główny
Hover · 200 ms. Tło zmienia się z Brand/Primary na Brand/Navy, a strzałka przesuwa się o 4 px w prawo. Kształt pigułki i szerokość przycisku się nie zmieniają. Bez cienia.
Wciśnięcie · 100 ms. Tło zostaje Brand/Navy, strzałka wraca na miejsce, a przycisk zmniejsza się do 98%.
Fokus z klawiatury. Obrys 2 px Brand/Primary z odstępem 2 px, bez animacji. Na granatowym tle obrys biały.
Karta „potrzeby”
Hover i fokus · 250 ms. Karta unosi się o 4 px, obramowanie zmienia się na Brand/Primary, a okrągły przycisk ze strzałką wypełnia się kolorem. Bez cienia.
Semantyka. Cała karta jest jednym klikalnym elementem. Hover nie opiera się tylko na kolorze: zmienia się też położenie karty i wypełnienie przycisku.
Karta realizacji
Hover · 400 ms, ease-out. Zdjęcie powiększa się do 104% w obrębie kadru, a granatowe przyciemnienie spada z 35% do 20%. Logotyp klienta zostaje w miejscu.
Dotyk. Na ekranach dotykowych nie ma hovera: dotknięcie całej karty prowadzi do case study.
Czego zabrakło i co zrobiłabym dalej
Ograniczenia projektu
Przed projektowaniem zabrakło mi dwóch rzeczy, które uważam za kluczowe: analizy biznesowej IMSET oraz poznania głównych grup klientów (person). Z tą wiedzą projekt prawdopodobnie różniłby się od obecnego.
Kolejne kroki
- 01Warsztat z zespołem IMSETCele biznesowe i mierniki sukcesu strony.
- 02Wywiady z klientamiPersony i ich najczęstsze problemy.
- 03Testy użytecznościPrototyp ścieżki „Co chcesz osiągnąć?”.
- 04Analityka po wdrożeniuKliknięcia w karty celów i konwersja formularza.