# Case study: adapting a marketplace seller dashboard — Igor Trostyanskiy > Case study: how a marketplace seller dashboard — tables, filters and long forms — became a full mobile experience. 290+ mobile screens, 41 flows. > Source: https://troydesigns.vercel.app/en/case-seller.html Tags: B2B, WEB, 2025 # Adapting a marketplace seller dashboard for mobile ![Seller product catalogue](https://troydesigns.vercel.app/assets/case-seller/hero-1.webp) ![Reporting period and finances](https://troydesigns.vercel.app/assets/case-seller/hero-2.webp) ![Order list](https://troydesigns.vercel.app/assets/case-seller/hero-3.webp) ## Context Tandem is a marketplace for equestrian goods and services. Sellers run everything from a web dashboard: products, services, orders, finances, stores, chats and reviews. ## The brief The client wanted the dashboard to work fully from a phone. Not a trimmed-down version, but the same flows as on desktop — from creating a product to handling a refund. Tables, long forms and navigation were the hard parts. ## My role I adapted the desktop flows to mobile patterns under the guidance of senior designer Valeria. ## Outcome The mobile dashboard is in production. Every desktop flow works from a phone with nothing cut: sellers add products, handle orders and refunds, and track payouts. 290+ — Mobile screens 41 — Dashboard flows 200+ — Desktop screens ## 2. Adaptation rules ### Table → card A row becomes a card: status and amount in the header, the item itself in the middle, dates in the footer. ### Filters → sheet A row of dropdowns collapses into one button. Every filter opens in a full-screen sheet with “Reset” and “Apply”. ### Hover → tap Tooltips that appeared on hover on desktop now open on tap. ### Primary actions at the bottom Buttons from the page header move to a pinned bottom bar, within thumb reach. ### Sidebar → tab bar The most frequent sections live in the tab bar at the bottom of the screen. ### Tabs scroll Tabs neither wrap nor shrink — they scroll horizontally. ## 3. Navigation ![Desktop dashboard sidebar: eleven items in five groups](https://troydesigns.vercel.app/assets/case-seller/nav-sidebar.jpg) ![Catalogue: tabs for products, services and listings](https://troydesigns.vercel.app/assets/case-seller/nav-catalog.webp) ![Orders: the same tabs, search and filters](https://troydesigns.vercel.app/assets/case-seller/nav-orders.webp) ![Chats with an unread counter](https://troydesigns.vercel.app/assets/case-seller/nav-chats.webp) ![Profile: reviews, finances, security settings, stores](https://troydesigns.vercel.app/assets/case-seller/nav-profile.webp) ### How the sidebar became a tab bar The sidebar splits the dashboard by what you sell: products and services each have their own lists and their own orders, listings get a section of their own. Eleven items don’t fit into a tab bar, so on mobile the axis flipped. A tab now answers “what do I want to do” — browse the catalogue, handle orders, reply in chat — while products, services and listings became tabs inside a section. Everything frequent sits under the thumb, and going from products to services no longer means a trip back to the menu. ### Catalogue and orders “My products”, “My services” and “My listings” are gathered into “Catalogue”; product and service orders into “Orders”. Both sections share the same tabs, search and filters: learn one screen and you know the other. ### Chats move to the tab bar On desktop, chats are one item out of eleven. On a phone sellers reply to buyers on the move, so chats got their own tab, and the unread counter is visible from any screen. ### Rare things live in the profile Reviews, finances, security settings and stores aren’t opened every day. They moved to “Profile” — a four-row list one tap from the tab bar. “Log out” sits there too, on its own at the bottom of the screen. ### Store header The store switcher and the QR code from the sidebar header moved into “My stores”: with more than one store the section opens as a list, and the QR code lives on the store page. ## 4. Tables into cards ### How a table turns into cards A table row becomes a card: status and amount rise into the header, the category becomes a tag under the title, dates drop into the footer. The row of filters folds into one button, and the sidebar into a tab bar. ![Product list as cards](https://troydesigns.vercel.app/assets/case-seller/products-mobile-1.webp) ![Product actions menu](https://troydesigns.vercel.app/assets/case-seller/products-mobile-2.webp) ![Product rejection reason](https://troydesigns.vercel.app/assets/case-seller/products-mobile-3.webp) ![Product filters in a sheet](https://troydesigns.vercel.app/assets/case-seller/products-mobile-4.webp) ### My products A product has six columns on desktop. On a phone the card answers the two questions that matter first: what state the product is in and what it costs. The category becomes a tag under the title, dates go to the footer, actions hide in a “three dots” menu, and filters move into a sheet. ![Rejection reason on tapping the status in the mobile catalogue](https://troydesigns.vercel.app/assets/case-seller/hover-to-tap-mobile.webp) ![Rejection reason on hovering the status in the desktop dashboard](https://troydesigns.vercel.app/assets/case-seller/hover-to-tap-desktop.webp) ### Rejection reason On desktop the rejection reason pops up when you hover the status. There is no hover on a phone, so the status became tappable: one tap and you see what to fix. ![Reporting period cards in mobile finances](https://troydesigns.vercel.app/assets/case-seller/finance-compare-mobile.webp) ![Finances table in the desktop dashboard](https://troydesigns.vercel.app/assets/case-seller/finance-compare-desktop.webp) ### Finances The heaviest table in the dashboard: a reporting period and eight columns of amounts. Stack them plainly and a single card fills the whole screen. ![Finances as cards with a grid of amounts](https://troydesigns.vercel.app/assets/case-seller/finance-variants-1.webp) ![Transposed finances table](https://troydesigns.vercel.app/assets/case-seller/finance-variants-2.webp) ![Reporting period detail](https://troydesigns.vercel.app/assets/case-seller/finance-variants-3.webp) ### Two display options We worked through two options. The first is a card with a grid of amounts where the “To be paid” total is set large. The second is a transposed table: columns become rows and periods scroll horizontally. Cards are easier to read on the move; the table wins when several periods need comparing. Inside a period the transactions are cards again — with an export-to-Excel button. ![Order list](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-1.webp) ![New order notification](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-2.webp) ![Order actions menu](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-3.webp) ![Order filters in a sheet](https://troydesigns.vercel.app/assets/case-seller/orders-mobile-4.webp) ### Orders Same principle: payment status and amount in the header, number and buyer in the middle. A new order arrives as a toast, and the card menu lets you confirm, cancel or message the buyer right away. ## 5. Forms ![Product form on a phone](https://troydesigns.vercel.app/assets/case-seller/form-compare-mobile.webp) ![Product form on desktop](https://troydesigns.vercel.app/assets/case-seller/form-compare-desktop.webp) ### Creating a product On desktop the form is a long page with buttons in the header. On a phone it is a full-screen view: the title and the close button stay put while the form scrolls beneath them. ![Choosing the item type](https://troydesigns.vercel.app/assets/case-seller/form-flow-1.webp) ![Suggestions while typing the title](https://troydesigns.vercel.app/assets/case-seller/form-flow-2.webp) ![Attribute reference list](https://troydesigns.vercel.app/assets/case-seller/form-flow-3.webp) ![Picking a value in a sheet](https://troydesigns.vercel.app/assets/case-seller/form-flow-4.webp) ![Filled-in product form](https://troydesigns.vercel.app/assets/case-seller/form-flow-5.webp) ### From the plus to a filled-in form The plus in the catalogue header opens a sheet asking what to add. The first letters of the title suggest matches, and attributes are picked from a reference list on a separate screen — with search, a “Selected only” toggle and pinned buttons. ## 6. Order detail page ![Order detail page on a phone](https://troydesigns.vercel.app/assets/case-seller/order-compare-mobile.webp) ![Order detail page on desktop](https://troydesigns.vercel.app/assets/case-seller/order-compare-desktop.webp) ### Order The desktop tabs are kept but scroll horizontally. “Confirm” and “Cancel” are pinned at the bottom, and rare actions hide in a menu. ![Order contents](https://troydesigns.vercel.app/assets/case-seller/order-mobile-1.webp) ![Buyer details](https://troydesigns.vercel.app/assets/case-seller/order-mobile-2.webp) ![Order actions menu](https://troydesigns.vercel.app/assets/case-seller/order-mobile-3.webp) ![Order change log](https://troydesigns.vercel.app/assets/case-seller/order-mobile-4.webp) ### Tabs and actions Order contents, buyer details with their order history, a menu that opens the chat, and the order’s change log. ## 7. Stores and addresses ![Adding a store on a phone](https://troydesigns.vercel.app/assets/case-seller/nav-compare-mobile.webp) ![Adding a store on desktop](https://troydesigns.vercel.app/assets/case-seller/nav-compare-desktop.webp) ### Adding a store The “Store details” and “Pickup addresses” tabs stay, the form folds into a single column, and the buttons are pinned at the bottom. ![Store list](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-1.webp) ![Store form](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-2.webp) ![Pickup address](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-3.webp) ![Switching between addresses](https://troydesigns.vercel.app/assets/case-seller/stores-mobile-4.webp) ### Several stores and addresses With more than one store the section opens as a list. Pickup addresses switch with tabs, and each has its own opening hours and blocked dates. ## 8. Wrap-up ### What I took away Adapting isn’t squeezing a screen — it’s rebuilding the hierarchy: on every screen you decide again what matters most. Shared rules saved the most time: the flows were assembled from the same handful of decisions.