UX/UIApril 2023
BreitlingSaleor Price Management and store back-office operations
I designed four tools for the breitling.com store’s back office: a price queue in Saleor, assigning customers to orders, strap packs and catalog filters.
- Client
- Breitling × Mirumee
- Team
- Head of Design: Iwo RzepielaUX/UI: Jakub Nowak
- Location
- Grenchen, Switzerland
- Year
- 2023
Illustration: the price queue in the Price Management app in Saleor Dashboard, region Switzerland. Five watches change price from 8,000 to 9,000 CHF: three prices are published, one has an error, one is waiting in the queue.
01Brief
Four tools
On the Breitling project I designed functionality for the back office of the breitling.com online store.
- A “Price Management” app for Saleor that let the administrator control price synchronization between databases
- A new mechanism for assigning a customer to an order in the store system
- Adding products and configuring strap packs
- A new product-catalog filtering menu that made searching easier for staff
Project facts
- Client
- Breitling × Mirumee
- Role
- UX/UI
- Team
- Head of Design: Iwo RzepielaUX/UI: Jakub Nowak
- Date
- April 2023
- Location
- Grenchen, Switzerland
- Platform
- Saleor
- Store
- breitling.com
Since 1884, the Swiss company Breitling has set the standard for luxury and precise timekeeping.
Its innovative chronographs for pilots and athletes are known for signature details like slide rules and tachymeters.
02Prices
The price queue in Saleor
I designed the Price Management app for Saleor. In it, the administrator controlled price synchronization between databases.
Price changes waited in the app as tasks in a queue. Tasks resolved one by one, to Published or to Error, and an error could be retried. Scheduled ones had their own tab; published ones went to Completed.
In the replica you can switch tabs, search by name or SKU, change the region and retry an error.
A task’s path
A task’s statuses and the moves between them. The diagram lights up what happens to the row you work on in the replica.
- Waitingon its ownPublishedorError
- ErrorretrySynchon its ownPublished
- Scheduled to publishpublishSynchon its ownPublishedorError
- PublishedErrortab switchCompletedQueue
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
Tasks and prices from the board and the recording
03Customer
Customer search and creation
I created a new mechanism for assigning a customer to an order in the store system.
Customers were searched for in the database right on the order page. The suggestion list showed the matching people with their e-mail addresses, and a card beside it their phone number and address. The chosen customer joined the order with a shipping and a billing address, and × took them off the order.
A separate SEARCH RESULTS window showed customers with their full details — phone, e-mail and address — to choose from. When a customer wasn’t in the database, “Create a new customer” opened the ADD CUSTOMER form, where the billing address could simply be the shipping address.
In the replica, type a name, an e-mail, a phone number or a postcode — the search ignores diacritics, so “jurg” finds Jürg. The arrow keys and Enter choose a customer, and the new-customer form checks its required fields.
- 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
Customers, prices and stock are samples
04Straps
Configuring strap packs
I implemented a feature for adding products and configuring sets of straps (strap packs).
A strap pack is a set of several straps for one watch. From the ADD PRODUCTS menu, staff added a watch, a single strap or a whole set to the order.
In the pack’s window you first chose the lug and the strap type — the type grayed out the other section. A counter under the list counted the checked straps up to “2 out of 2”, and each strap got its size from a suggestion showing the price and the dedicated stock. OK worked only once the pack was full and added it as a single “Strap pack” line, with the straps listed under its name.
In the replica, open ADD PRODUCTS › Add a strap pack and type “49” in the Lug field. It’s the same order as above: a pack added here also shows in the customer window, and a customer assigned there shows here too.
- 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
Customers, prices and stock are samples
05Catalog
Product filtering
The project culminated in a new filtering menu for the product catalog, which I designed for the store’s staff — it made searching easier for them.
Above the watch list sat a row of filter chips. The full set slid in from the right edge in the Filters panel, over the dimmed list: order type, markets and source, an order date with five date types, delivery, statuses, payments, stock type, a price range and three switches.
A chosen filter turned its chip yellow, with a check mark: the date jumped to the front of the row as “Creation: 17-08-2023”, while the type chip changed in place to “Order”. Clicking the date chip took the check mark off but kept the date in the row.
In the replica you can search by name, pick the type, markets and stock from the chips, set a date, a price range and the switches in the panel, and add a watch to the order with the cart icon. The name, markets, stock and price narrow the list; the other filters build chips.
- 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 |
Customers, prices and stock are samples
06System
Two interface languages
The boards bring two interface languages together: the Breitling back office and the Price Management app, which sits inside Saleor Dashboard and speaks its language.
The Breitling back office
- condensed capitals
- navy and yellow
- square corners
The back-office frame
A navy bar and a menu in condensed capitals, the current page on yellow, the content on white.
Illustration: the back-office frame with its navy bar and the menu DASHBOARD, ORDERS, CUSTOMERS, PRODUCTS; the current item ORDERS on yellow.
ColorsClick a swatch to copy its code.
- YellowThe boards’ background, the current page, SAVE ORDERContrast 10.1:1 navy on yellow
- NavyThe top bar and the menuContrast 15.9:1 white on navy
- TextTables and ordersContrast 16.3:1 on white
- SuggestionA field’s suggestion cardContrast 18.1:1 black on the suggestion card
Labeled fields
The label moves onto the outline once the field has a value. Under the strap size, a suggestion shows its dedicated stock.
Illustration: the Lug, Strap type and Strap size fields in three states; under Strap size, with 49 typed, the suggestion 498XL - 0,00 USD (dedicated stock: 100).
The suggestion card
The customer search: the “Create a new customer” action on top, then each match’s name and e-mail.
Illustration: the customer search with the Create a new customer action and three sample customers.
Buttons, chips and tags
Filled yellow and an outline, a filter chip before and after a choice, market and stock tags.
Illustration: the SAVE ORDER and CANCEL ORDER buttons, the Type, ✓ Order and ✓ Creation: 17-08-2023 chips, the Switzerland, AVAILABLE QTY (255) and NOT IN ECOM RANGE tags.
Price Management in Saleor
- Saleor Dashboard’s language
- rounded corners
- a blue underline on the active tab
Header, tabs and search
The app’s icon and title, the region picker, tabs with the active one underlined in blue, and the search field, in Saleor’s frame.
Illustration: the Price Management app’s header with the region Switzerland, the Queue, Scheduled and Completed tabs and the Search task field.
ColorsClick a swatch to copy its code.
- MistSaleor’s sidebarContrast 13.6:1 ink on mist
- BlueThe active tab’s underline, rows per pageContrast 4.5:1 on white
- InkTable and status textContrast 14.7:1 on white
- PublishedA published price’s statusContrast 10.3:1 ink
- ErrorAn error’s statusContrast 8.3:1 ink
- ScheduledA scheduled publicationContrast 11.3:1 ink
Task statuses
The badges show the queue from the replica above: retry the error there and they change here too.
- 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
07Boards
Boards and recordings
Six boards of the project and four screen recordings. Every tile opens an enlarged view.
Saleor app
It let the administrator control price synchronization between databases.
Customer search and creation
Searching for customers in the database and creating new ones.
Strap-pack configuration
A mechanism for configuring a set of several watch straps.
Product filtering
Breitling, the watch model names, Saleor, Ford, Chevrolet, Deus Ex Machina and Frecce Tricolori are trademarks of their owners.