←WSZYSTKIE REALIZACJE
CASE 04SAAS | STRONA I DESIGN SYSTEM

Northbeam Labs

Strona marketingowa, dokumentacja i biblioteka komponentów, na których wewnętrzny zespół wciąż buduje co tydzień.

KLIENT
Northbeam Labs, Oslo
ROLA
Design system, frontend
CZAS
9 tygodni, 2024
STACK
TypeScript | Astro
Okładka projektu Northbeam Labs
PRZEKAZANE, WCIĄŻ ROZWIJANE
// BRIEF

Trzy produkty, trzy różne style.

Northbeam rosło przez przejęcia i było to widać. Potrzebowali jednego design systemu, zbudowanych na nim szybkiej strony marketingowej i dokumentacji oraz zespołu, który poradzi sobie sam po zakończeniu współpracy.

// CO DOSTARCZYŁEM
  1. 01Design system oparty na tokenach, z ponad 60 komponentami
  2. 02Strona marketingowa i dokumentacja w Astro z MDX
  3. 03Testy regresji wizualnej i pipeline wydań
  4. 04Spisany playbook i dwa warsztaty przekazania
99
WYDAJNOŚĆ W LIGHTHOUSE
60+
KOMPONENTÓW
0,8 s
LCP NA 4G
3→1
UJEDNOLICONE MARKI
BIBLIOTEKA KOMPONENTÓW, DOKUMENTACJA
BIBLIOTEKA KOMPONENTÓW, DOKUMENTACJA
TOKENY, KOLOR I TYPOGRAFIA
TOKENY, KOLOR I TYPOGRAFIA
WARSZTATY PRZEKAZANIA, OSLO
WARSZTATY PRZEKAZANIA, OSLO
// TRUDNE MOMENTY

Co było trudne i jak to rozwiązałem.

01

Ujednolicenie trzech marek

Audyt każdego ekranu dał jeden zestaw tokenów, a akcenty poszczególnych produktów nałożono na niego zamiast tworzyć osobne wersje.

02

Szybkość jako funkcja

Renderowanie statyczne i wyspy tylko tam, gdzie były potrzebne, utrzymały każdą stronę poniżej sekundy na 4G.

03

Przetrwanie przekazania

Testy, dokumentacja i playbook sprawiły, że wewnętrzny zespół wypuścił swój pierwszy komponent tydzień po moim odejściu.

“Większość agencji zostawia plik w Figmie. Netriot zostawił nam system, którego używamy codziennie.”
Erik SolbergLIDER DESIGNU, NORTHBEAM LABS
2 WOLNE TERMINY NA LISTOPAD

Potrzebujesz strony albo aplikacji jak Northbeam Labs?

Opowiedz, co budujesz. Dostaniesz 30-minutową rozmowę, pisemny zakres w ciągu dwóch dni i stałą cenę, zanim powstanie jakikolwiek kod.

albo napisz bezpośrednio | [email protected]