zapytaj o projekt

projekt:

MasMas

Projekt wewnątrzkorporacyjnej aplikacji przeznaczonej dla pracowników kreatywnych do zbierania i wymiany wiedzy oraz inspiracji. Moim głównym zadaniem był projekt UI, który powstał na bazie szkiców UX dostarczonych przez klienta. Oprócz projektu graficznego interface'u moim zadaniem było też uporządkowanie i usprawnienie architektury informacji, ścieżek użytkownika i innych elementów UX.

klient:
BrandAide
role:
Paweł Olszak:
projekt UI/UX
Olga Gutierrez de la Roza:
projekt UX
2022

Głównym wyzwaniem w projekcie UI było znalezienie równowagi między formalnym, profesjonalnym charakterem a atrakcyjnością podawanych treści i utrzymaniem poczucia inspiracji oraz zachęcenia do kreatywności. Po przeanalizowaniu z klientem kilku wstępnych koncepcji obrałem kierunek zaprojektowania interface'u w stylu elektronicznego notesu bądź notatnika, do którego użytkownicy będą sięgać podczas pracy. W tym celu dobrałem paletę kolorystyczną zbudowaną kilku subtelnych, lecz dojrzałych odcieni (jako akcentów sygnalizujących rodzaj treści) oraz z tła w kolorze papieru. Projekt typografii opiera się na łagodnym bezszeryfowym kroju Lato w akapitach i mniejszych tekstach oraz na wyróżniających się nagłówkach z fontem o edytorskim, żurnalistycznym charakterze - Cabinet Grotesk.
Kompozycje poszczególnych ekranów opierają się na porządku zbudowanym przez odpowiedni układ elementów, odpowiednią ilość pustki i hierarchię odcieni napisów, ikon, linii i wypełnień - od beżowej szarości po delikatnie osłabioną czerń.

główna karta

Główna karta aplikacji to agregator artykułów, który można filtrować przez kategorie z listy u góry. Okładki artykułów występują w różnych rozmiarach i noszą paski stanu z datą czy ilością polubień, które sygnalizują kategorię tematyczną swoim kolorem.

Najważniejszym zadaniem było zapewnienie odpowieniej wygody czytania i rozróżniania rodzajów treści, a także wyróżnienie elementów służących do interakcji jak np. udostępnianie, komentowanie czy szukanie podobnych treści.

artykuły

Dostarczony projekt UX stawiał nacisk na wymianę informacji między użytkownikami. Na koniec każdego artykułu jest zatem sekcja komentarzy i otwartego forum. Połączenie tych dwóch funkcjonalności rozwiązałem za pomocą podzielenia sekcji na dwie zakładki - pytania i komentarze.

dyskusja

Zawiera dostęp do personalnych elementów użytkownika, takich jak powiadomienia, ustawienia, obserwowane konta, a przede wszystkim do własnej i współdzielonych bibliotek.

karta użytkownika

To miejsce, gdzie użytkownicy zapisują treści z innych miejsc w aplikacji w formie zakładek i inspiracji. Do biblioteki można dodawać też własne pliki, notatki, foldery. Zadaniem dla mnie było uporządkowanie tak dużej ilości rodzajów treści. Miejce to podzieliłem na zakładki w formie karuzeli. Wprowadziłem sortowanie poprzez zwijane sekcje z datami i przede wszystkim rozrózniłem graficznie rodzaje elementów - w delikatny sposób, aby zachować ich spójny język i nie wprowadzać chaosu.

biblioteka

Kolejna karta zawiera grupowe czaty między pracownikami. Wprowadziłem rozróżnienie pokojów za pomocą akcentów kolorystycznych i ikon. Zaprojektowałem proces tworzenia nowej grupy, tak aby był krótki i czytelny oraz opracowałem wygląd czatu w formie chronologicznych pionowych osi, dbając o czytelność i rozróżnienie rodzajów wiadomości i załączników.

karta grup

W ekranie głównym tej karty wprowadziłem sekcje z popularnymi pytaniami i kategoriami oprócz samych odnośników do kolejnych tematów. Każdy temat podzielony jest na dwie zakładki - z problamami rozwiązanymi i nierozwiązanymi. Stale widoczny jest przycisk pozwalający dodać własne pytanie do danego tematu.

karta otwartych forów

Funkcjonalność dostarczonego projektu UX była bardzo rozbudowana. Projekt ten pokazuje jak bardzo ważna jest warstwa UI aplikacji, która odpowiednio zaprojektowana może uporządkować architekturę informacji i podać ją użytkownikowi w czytelny i atrakcyjny sposób.

dowiedz się więcej

bardziej szczegółowe opracowanie na Behance

MasMas na Behance

eksploruj dalej