UX/UIkwiecień 2023
BreitlingSaleor Price Management i zaplecze operacyjne sklepu
Zaprojektowałem cztery narzędzia zaplecza sklepu breitling.com: kolejkę cen w Saleor, przypisywanie klienta do zamówienia, zestawy pasków i filtry katalogu.
- Klient
- Breitling × Mirumee
- Zespół
- Head of Design: Iwo RzepielaUX/UI: Jakub Nowak
- Miejsce
- Grenchen, Szwajcaria
- Rok
- 2023
Ilustracja: kolejka cen w aplikacji Price Management w Saleor Dashboard, region Szwajcaria. Pięć zegarków zmienia cenę z 8 000 na 9 000 CHF: trzy ceny są opublikowane, jedna ma błąd, jedna czeka w kolejce.
01Brief
Cztery narzędzia
W ramach projektu Breitling zaprojektowałem funkcjonalności dla zaplecza sklepu internetowego breitling.com.
- Aplikacja „Price Management” do Saleor, która umożliwiała administratorowi kontrolę nad synchronizacją cen między bazami danych
- Nowy mechanizm przypisywania klienta do zamówienia w systemie sklepowym
- Dodawanie produktów i konfigurowanie zestawów pasków (strap paków)
- Nowe menu filtrowania katalogu produktów ułatwiające pracownikom wyszukiwanie
Informacje o projekcie
- Klient
- Breitling × Mirumee
- Rola
- UX/UI
- Zespół
- Head of Design: Iwo RzepielaUX/UI: Jakub Nowak
- Termin
- kwiecień 2023
- Miejsce
- Grenchen, Szwajcaria
- Platforma
- Saleor
- Sklep
- breitling.com
Od 1884 roku szwajcarska firma Breitling wyznacza standardy luksusu i precyzyjnego pomiaru czasu.
Jej innowacyjne chronografy dla pilotów i sportowców słyną z charakterystycznych detali, jak suwaki logarytmiczne i tachymetry.
02Ceny
Kolejka cen w Saleor
Zaprojektowałem aplikację Price Management do Saleor. Administrator kontrolował w niej synchronizację cen między bazami danych.
Zmiany cen czekały w aplikacji jako zadania w kolejce. Zadania kończyły się po kolei statusem Published albo Error, a błąd dało się ponowić. Zaplanowane miały osobną zakładkę, a opublikowane trafiały do Completed.
W replice możesz przełączać zakładki, szukać po nazwie albo SKU, zmienić region i ponowić błąd.
Droga zadania
Statusy zadania i przejścia między nimi. Diagram podświetla to, co dzieje się z wierszem, nad którym pracujesz w replice.
- WaitingsamoPublishedlubError
- ErrorponówSynchsamoPublished
- Scheduled to publishopublikujSynchsamoPublishedlubError
- PublishedErrorzmiana zakładkiCompletedQueue
Saleor Dashboard
- Home
- Products
- Orders
- Customers
- Sales
- Vouchers
Price Management- Content
- Translations
- Configuration
- Apps
John Smith
Price Management
| Thumbnail | Product Name | Old price | New price | Start date | Completion date | Status | |
|---|---|---|---|---|---|---|---|
 | ENDURANCE PRO THE UNIVE…X823102C1B1S1 | 8,000 CHF | 9,000 CHF | 24.04.2023 00:00 | 24.04.2023 00:01 | Published | |
 | ENDURANCE PRO (PRINCET…X823104C1B1S1 | 8,000 CHF | 9,000 CHF | 24.04.2023 00:00 | 24.04.2023 00:02 (error) | Error | |
 | ENDURANCE PRO UNIVERSIT…X823101C1B1S1 | 8,000 CHF | 9,000 CHF | 24.04.2023 00:00 | 24.04.2023 00:03 | Published | |
 | TOP TIME B01 FORD MUSTANGAB01762A1L1X1 | 8,000 CHF | 9,000 CHF | 24.04.2023 00:00 | 24.04.2023 00:04 | Published | |
 | TOP TIME B01 CHEVROLET C…AB01761A1K1X1 | 8,000 CHF | 9,000 CHF | 24.04.2023 00:00 | Waiting |
Per page:20
Zadania i ceny z planszy i nagraniaZaplecze sklepu działało po angielsku, więc repliki zostają przy jego słowach.
03Klient
Wyszukiwanie klientów i tworzenie nowych
Stworzyłem nowy mechanizm przypisywania klienta do zamówienia w systemie sklepowym.
Klienta szukało się w bazie wprost na stronie zamówienia. Lista podpowiedzi pokazywała pasujące osoby z adresem e-mail, a karta obok — telefon i adres. Wybrany klient trafiał do zamówienia razem z adresem wysyłki i rozliczenia, a × zdejmował go z zamówienia.
Osobne okno SEARCH RESULTS pokazywało klientów z pełnymi danymi — telefonem, e-mailem i adresem — do wyboru. Gdy klienta nie było w bazie, „Create a new customer” otwierało formularz ADD CUSTOMER, w którym adres rozliczenia mógł być po prostu adresem wysyłki.
W replice wpisz imię, e-mail, telefon albo kod pocztowy — wyszukiwarka pomija znaki diakrytyczne, więc „jurg” znajdzie Jürga. Strzałki i Enter wybierają klienta, a formularz nowego klienta sprawdza wymagane pola.
- DASHBOARD
- ORDERS
- CUSTOMERS
- PRODUCTS
Order DEV2000028
Order details
| Thumbnail | Product | Qty | Price | Total | Options |
|---|---|---|---|---|---|
 | Aerospace EVOE79363101B1E1 | 1 | 3500,00 GBP | 3500,00 GBP | Options |
- Subtotal Taxes included
- 3500,00 GBP
- Delivery charges
- FREE
- Sales Tax %
- 0,00 GBP
- Total
- 3500,00 GBP
Id: DEV2000028
Date: Tue, 07 Mar 2023 14:27:57 GMTLast update: Tue, 07 Mar 2023 14:33:21 GMT
Market: United Kingdom
Customer
- Create a new customer
Shipping method
EditHome deliveryFREE
Klienci, ceny i stany są przykładowe
04Paski
Konfigurowanie strap paków
Zaimplementowałem funkcję dodawania produktów i konfigurowania zestawów pasków (strap paków).
Strap pack to zestaw kilku pasków do jednego zegarka. Z menu ADD PRODUCTS pracownik dodawał do zamówienia zegarek, pojedynczy pasek albo cały zestaw.
W oknie zestawu najpierw wybierało się lug i typ paska — typ wygaszał drugą sekcję. Licznik pod listą liczył zaznaczone paski aż do „2 out of 2”, a każdy pasek dostawał rozmiar z podpowiedzi z ceną i dedykowanym stanem magazynowym. OK działało dopiero przy pełnym zestawie i dodawało go jako jedną pozycję „Strap pack”, z paskami wypisanymi pod nazwą.
W replice otwórz ADD PRODUCTS › Add a strap pack i wpisz „49” w polu Lug. To samo zamówienie co wyżej: zestaw dodany tutaj widać też w oknie klienta, a przypisany tam klient jest i tutaj.
- DASHBOARD
- ORDERS
- CUSTOMERS
- PRODUCTS
Order DEV2000028
Order details
| Thumbnail | Product | Qty | Price | Total | Options |
|---|---|---|---|---|---|
| Aerospace EVOE79363101B1E1 | 1 | 3500,00 GBP | 3500,00 GBP | Options |
- Subtotal Taxes included
- 3500,00 GBP
- Delivery charges
- FREE
- Sales Tax %
- 0,00 GBP
- Total
- 3500,00 GBP
Id: DEV2000028
Date: Tue, 07 Mar 2023 14:27:57 GMTLast update: Tue, 07 Mar 2023 14:33:21 GMT
Market: United Kingdom
Customer
- Create a new customer
Shipping method
EditHome deliveryFREE
Klienci, ceny i stany są przykładowe
05Katalog
Filtrowanie produktów
Zwieńczeniem projektu było nowe menu filtrowania katalogu produktów, które opracowałem dla pracowników sklepu — ułatwiało im wyszukiwanie.
Nad listą zegarków stał rząd chipów z filtrami. Pełny zestaw wysuwał się z prawej krawędzi w panelu Filters, nad przygaszoną listą: typ, rynki i źródło zamówienia, data zamówienia z pięcioma rodzajami dat, dostawa, statusy, płatności, stan magazynowy, zakres cen i trzy przełączniki.
Wybrany filtr zmieniał swój chip na żółty, z ptaszkiem: data wskakiwała na początek rzędu jako „Creation: 17-08-2023”, a chip typu zmieniał się w miejscu na „Order”. Kliknięcie chipu z datą zdejmowało ptaszek, ale zostawiało datę w rzędzie.
W replice możesz szukać po nazwie, wybrać typ, rynki i stan z chipów, ustawić w panelu datę, zakres cen i przełączniki, a ikoną koszyka dodać zegarek do zamówienia. Listę zawężają nazwa, rynki, stan i cena; reszta filtrów buduje chipy.
- DASHBOARD
- ORDERS
- CUSTOMERS
- PRODUCTS
- STRAPS
- WATCHES
| Thumbnail | Name | Bracelet size | Strap | Updated | Available qty | Market | Add to order |
|---|---|---|---|---|---|---|---|
| Aerospace EVO | 140mm | - | Tue, 14 Feb 2023 09:17:31 GMT | AVAILABLE QTY (10600) | SwitzerlandAustriaUnited KingdomAustraliaCanadaChinaDenmarkSwedenJapanRussiaUnited States of America | |
 | Aerospace Frecce Tricolori | No adjustment | - | Thu, 12 Jan 2023 09:56:17 GMT | NOT IN ECOM RANGE | Switzerland | |
 | Superocean Heritage ’57 Pastel Paradise | - | Standard size | Thu, 12 Jan 2023 09:54:19 GMT | AVAILABLE QTY (255) | Switzerland | |
| Navitimer B01 Chronograph 46 | - | Standard size | Thu, 05 Jan 2023 11:25:07 GMT | NOT IN ECOM RANGE | |||
 | Aerospace EVO | - | Standard size | Mon, 02 Jan 2023 10:26:27 GMT | AVAILABLE QTY (5) | Switzerland |
Klienci, ceny i stany są przykładowe
06System
Dwa języki interfejsu
Na planszach spotykają się dwa języki interfejsu: zaplecze Breitlinga i aplikacja Price Management, osadzona w Saleor Dashboard i mówiąca jego językiem.
Zaplecze Breitlinga
- wąskie kapitaliki
- granat i żółty
- kwadratowe narożniki
Rama zaplecza
Granatowy pasek i menu w wąskich kapitalikach, bieżąca strona na żółtym, treść na bieli.
Ilustracja: rama zaplecza z granatowym paskiem i menu DASHBOARD, ORDERS, CUSTOMERS, PRODUCTS; bieżąca pozycja ORDERS na żółtym.
KoloryKliknij próbkę, aby skopiować kod.
- ŻółtyTło plansz, bieżąca strona, SAVE ORDERKontrast 10,1:1 granat na żółtym
- GranatGórny pasek i menuKontrast 15,9:1 biały na granacie
- TekstTabele i zamówieniaKontrast 16,3:1 na bieli
- PodpowiedźKarta podpowiedzi polaKontrast 18,1:1 czarny na podpowiedzi
Pola z etykietą
Etykieta siada na obrysie, gdy pole ma wartość. Pod polem rozmiaru paska pojawia się podpowiedź z dedykowanym stanem.
Ilustracja: pola Lug, Strap type i Strap size w trzech stanach; pod polem Strap size z wpisanym 49 podpowiedź 498XL - 0,00 USD (dedicated stock: 100).
Karta podpowiedzi
Wyszukiwarka klienta: na górze akcja „Create a new customer”, pod nią imię i e-mail każdego wyniku.
Ilustracja: wyszukiwarka klienta z akcją Create a new customer i trzema przykładowymi klientami.
Przyciski, chipy i znaczniki
Wypełniony żółty i obrys, chip filtra przed wyborem i po nim, znaczniki rynku i stanu.
Ilustracja: przyciski SAVE ORDER i CANCEL ORDER, chipy Type, ✓ Order i ✓ Creation: 17-08-2023, znaczniki Switzerland, AVAILABLE QTY (255) i NOT IN ECOM RANGE.
Price Management w Saleor
- język Saleor Dashboard
- zaokrąglone narożniki
- niebieskie podkreślenie aktywnej zakładki
Nagłówek, zakładki i wyszukiwarka
Ikona aplikacji i tytuł, wybór regionu, zakładki z aktywną podkreśloną na niebiesko i pole wyszukiwania w ramie Saleor.
Ilustracja: nagłówek aplikacji Price Management z wyborem regionu Switzerland, zakładki Queue, Scheduled i Completed oraz pole Search task.
KoloryKliknij próbkę, aby skopiować kod.
- MgłaMenu boczne SaleorKontrast 13,6:1 atrament na mgle
- NiebieskiPodkreślenie aktywnej zakładki, liczba wierszyKontrast 4,5:1 na bieli
- AtramentTekst tabeli i statusówKontrast 14,7:1 na bieli
- PublishedStatus opublikowanej cenyKontrast 10,3:1 atrament
- ErrorStatus błęduKontrast 8,3:1 atrament
- ScheduledZaplanowana publikacjaKontrast 11,3:1 atrament
Statusy zadań
Plakietki pokazują stan kolejki z repliki powyżej: ponów tam błąd, a zmienią się także tutaj.
- Scheduled to publish5
- Waiting1
- Synch0
- Published3
- Error1
- ENDURANCE PRO THE UNIVE…X823102C1B1S1Published
- ENDURANCE PRO (PRINCET…X823104C1B1S1Error
- ENDURANCE PRO UNIVERSIT…X823101C1B1S1Published
- TOP TIME B01 FORD MUSTANGAB01762A1L1X1Published
- TOP TIME B01 CHEVROLET C…AB01761A1K1X1Waiting
07Plansze
Plansze i nagrania
Sześć plansz projektu i cztery nagrania ekranu. Każdy kafel otwiera powiększony podgląd.
Saleor app
Umożliwiała administratorowi kontrolę nad synchronizacją cen między bazami danych.
Wyszukiwanie klientów i tworzenie nowych
Wyszukiwanie klientów w bazie danych i tworzenie nowych.
Konfigurowanie strap pack
Mechanizm konfiguracji zestawu kilku pasków do zegarka.
Filtrowanie produktów
Breitling, nazwy modeli zegarków, Saleor, Ford, Chevrolet, Deus Ex Machina i Frecce Tricolori są znakami towarowymi ich właścicieli.