Projektowanie UI dla założycieli i zespołów produktowych

Dla BizBot, startupu z Oslo automatyzującego administrację firm, zaprojektowaliśmy 400 ekranów. Pierwsza konsultacja o Twoim produkcie jest bezpłatna.

Umów bezpłatną rozmowę
Projektowanie UI

Jak przebiega projekt UI

Przepływy z UX

Prace nad UI zaczynamy od przepływów użytkownika ustalonych w pracach nad UX. W portalu klienta dla firmy handlującej energią przepływy przygotowane dla ról Client, Seller, Trader i Back-office stały się podstawą każdego widoku.

Makiety

Projektant przygotowuje makiety niskiej wierności (szkice układu) i wysokiej wierności (docelowy wygląd każdego ekranu) na różne urządzenia i wykorzystuje komponenty, które Twój produkt już ma.

Komponenty i system projektowy

Komponenty i gotowe ekrany trzymają się jednego zestawu zasad wizualnych oraz, jeśli Twój produkt ma już markę, jej wytycznych.

Testy prototypów

Product Designer testuje prototypy pod kątem użyteczności i dostępności, także kontrastu i daltonizmu, zanim ruszy development.

BizBot, Filmgrail i portal do handlu energią

Systemy projektowe, które budujemy

BizBot

BizBot dostał system projektowy, na którym budowano kolejne moduły platformy, z ponad 50 elementami graficznymi. Warsztaty i hackathony w Warszawie, Oslo i Stambule wprowadziły do interfejsu wiedzę o norweskich procesach biznesowych.

Filmgrail

Filmgrail, platforma dla kin w modelu white label, zaczęła z nami w 2020 roku rebranding: nową tożsamość wizualną i logo oraz przeprojektowanie wszystkich modułów i komponentów.

Portal do handlu energią

W portalu klienta dla firmy handlującej energią projektanci ustalili typografię, kolorystykę, siatkę i układ, a system projektowy przeszedł weryfikację techniczną przed rozpoczęciem budowy.

Strony docelowe
21

BizBot

Role użytkowników
4

w jednym portalu do handlu energią

Obszary aplikacji
6

w jednej aplikacji do sprzedaży merchu na wydarzeniach

Usługi projektowania UI

Co powstaje w projekcie UI, w jakiej formie i w jakich narzędziach. Zwykle w Figmie.
EfektCo to jestNarzędzia
KomponentyKomponenty interfejsu aplikacji webowych i mobilnych zgodne z systemem projektowymFigma
Gotowe ekranyDopracowane ekrany aplikacji i systemów, responsywne na komputerze, tablecie i telefonieFigma, Framer do prototypów
System projektowyBiblioteka komponentów, którą projektanci budują i utrzymująFigma
Strony internetowe i strony doceloweResponsywne układy, strony docelowe, mikrostrony i strony produktowe oraz struktury stron, które Twój zespół edytuje w CMSRelume, Framer, Webflow
Elementy markiKsięgi marki z jej zasadami, główne wizualizacje marki, loga, ikony i ilustracjeIllustrator, Photoshop
AnimacjeAnimacje drobnych reakcji interfejsu na dotknięcie lub kliknięcie, zgodne z wytycznymi markiLottie, After Effects, Rive

Nasze projekty UI w praktyce

CEO, Norwegian SaaS company

CEO, firma SaaS (Norwegia)

Filmgrail - Jak zaprojektowaliśmy UI platformy dla kin
“Jesteśmy bardzo zadowoleni z projektu, bo Order Group zrozumiał całą złożoność norweskich posiedzeń zarządów.”
Filmgrail

UI, UX i projektowanie produktu

Kto za co odpowiada w zespole projektowym.
ObszarUX i projektowanie produktuProjektowanie UI
OdpowiadaProduct DesignerVisual Designer
Zajmuje sięBadaniami użytkowników, architekturą informacji i logiką aplikacjiKomponentami interfejsu, gotowymi ekranami i systemami projektowymi
Punkt wyjściaBadania i przepływy użytkownikaPrzepływy użytkownika ustalone w pracach nad UX

UI w różnych branżach

Projektowaliśmy UI dla fintechu i administracji firm (BizBot), oprogramowania dla kin i rozrywki (Filmgrail), handlu energią, wydarzeń na żywo i handlu detalicznego oraz organizacji non-profit (PSONI). Dla aplikacji do sprzedaży merchu na wydarzeniach na żywo zaprojektowaliśmy widoki MVP: dashboard sprzedażowy, statystyki, wydruk etykiet, bieżący podgląd stanów towaru podczas wydarzenia, konfigurację wydarzenia i pozostałe widoki głównego przepływu. W PSONI projektowanie było główną częścią fazy Discovery, a po niej przyszedł przegląd istniejącego kodu pod kątem designu.
Projektowanie UI

Dostępność w UI

Visual Designerzy dbają o spójność interfejsów ze standardem Web Content Accessibility Guidelines (WCAG), a Product Designerzy testują prototypy pod kątem dostępności. Kontrast i daltonizm symulujemy w Stark, wtyczce do Figmy. Szybkie testy WCAG w przeglądarce robimy w WAVE i axe DevTools.

Przekazanie projektu programistom

Programiści dostają kompletną dokumentację projektową, a projektanci pomagają im zrozumieć logikę i intencję projektu. Gdy zaczyna się wdrożenie, Visual Designer sprawdza efekt pod kątem dokładności co do piksela (każdy element odpowiada zatwierdzonemu projektowi) i WCAG. Uwagi z implementacji prowadzą do poprawek w projekcie.
Projektowanie UI

Dlaczego warto z nami pracować przy projektowaniu UI

UI wynika z ustaleń UX

Kto robi UX? Visual Designer projektuje interfejs na podstawie przepływów użytkownika zatwierdzonych przez Product Designera i przegląda z nim projekty.

Pakiet, który da się wypisać

Co wchodzi w pakiet? U nas: komponenty, gotowe ekrany, system projektowy i dokumentacja, a w tabeli usług na tej stronie przy każdym efekcie podajemy narzędzia.

Warsztaty prowadzi Head of Design

Kto pilnuje standardu pracy? Nasze warsztaty prowadzi Head of Design, który nadzoruje projekty designu.

Projektanci w Twoim zespole

Jak projektanci pracują z klientem? Nasi dołączają do zespołu klienta zdalnie z Warszawy i pracują przez Slacka, tak jak przy Filmgrail.

Jak pracujemy nad produktami

Artykuły o warsztatach user journey i MVP

Produkt i discovery 3 min czytania

User Journey Mapping w praktyce. Część 1: co? kiedy? i jak przygotować warsztaty?
Produkt i discovery 2 min czytania

Czym jest Minimum Lovable Product (MLP) i czym różni się od MVP?
Produkt i discovery 5 min czytania

Dlaczego MVP jest tak ważne?

Odpowiedzi naszego Head of Design

Najczęstsze pytania o projektowanie UI

Projektowanie UI

Opowiedz nam o produkcie, a opiszemy, jak mógłby ruszyć projekt UI.

Umów bezpłatną rozmowę

  • UX decyduje o tym, jak działa produkt: badania, architektura informacji i logika aplikacji. UI nadaje tym przepływom wygląd przez komponenty, gotowe ekrany i systemy projektowe. Więcej o projektowaniu UX i projektowaniu produktu.

  • Tak. W Filmgrail interfejs miał pozostawać w tle i przyjmować kolory każdego klienta, więc zaprojektowaliśmy kilka wariantów wizualnych. Ta sama baza kodu obsługuje duże sieci kin i pojedyncze kina.

  • Tak, w ramach usługi audytu dostępności. W nowych projektach UI prototypy testujemy pod kątem WCAG, a wdrożenie sprawdzamy według tego standardu.

  • Tak, bezpłatne jest też podstawowe discovery: jedno spotkanie z podstawową makietą lub dowodem koncepcji, które pozwala oszacować pracę. Rozbudowane discovery to osobny zakres, opisany na stronie warsztatów Product Discovery.

  • Od liczby ekranów, ról użytkowników i modułów, od tego, czy budujemy system projektowy, czy rozwijamy istniejący, i czy produkt wymaga wariantów white label. Wycena pojawia się po podstawowym discovery.

Projektowanie UI

Czego potrzebuje Twój interfejs?

Twoja wiadomość trafi do

Filip Szamborski

Filip Szamborski

Co-founder & CEO

Dotąd pracowaliśmy dla takich marek jak:

Dziękujemy za wiadomość.

Każdą wiadomość czytamy sami i odpowiadamy w ciągu 48 godzin w dni robocze.

Coś pilnego? hello@ordergroup.co

Zaprojektujmy UI Twojego produktu

Opowiedz o swoim produkcie i interfejsie, którego potrzebuje.

Pola oznaczone gwiazdką (*) są wymagane.

Order Group sp. z o.o. wykorzysta podane dane tylko po to, żeby odpowiedzieć na Twoje zapytanie i zachować informację o nim (art. 6 ust. 1 lit. b i f RODO). Szczegóły, w tym Twoje prawa, znajdziesz w naszej Polityce prywatności (otwiera się w nowej karcie).

Odpowiadamy w ciągu 48 godzin w dni robocze - człowiek, nie autoresponder.

Korzystasz z asystenta AI? Może wysłać to zapytanie za Ciebie albo przygotować wypełniony formularz - instrukcję znajdzie w llms.txt.

Ustawienia dostępności

Rozmiar tekstu

100%
Deklaracja dostępności