Case study
57Screens
Sourceforce AI is a B2B sourcing platform where a buyer describes what they need in plain language and an AI assistant returns verified manufacturers, scored and ready to quote.
This case study covers a full UI/UX pass across the whole product on two platforms: an audit of what shipped, twenty-three copy and data defects fixed, a token layer built from the product's own palette, the four modules the sidebar promised but never had, and a second theme the file could not previously produce.
Client
The client's name and internal figures are confidential. Everything shown here is the design work itself: a UX audit of both platforms, the design system that came out of it, and the SaaS product design for the four modules the rail had promised.
Process
The file already had text styles, paint styles and a hundred and twenty components; it was missing the layer underneath them. Building anything new before the tokens existed would have baked the inconsistencies in, so the work ran in five passes.
Problem
Manufacturer Directory, Market Intelligence, Compliance Check and Supplier Messages appeared in the rail of all forty-nine screens. Icons had been drawn for every one of them. None had a screen behind it.
The sidebar belonged to James Forgey. Settings belonged to Smith English. The verification screen emailed [email protected]. Same session, three identities.
Sixty-one distinct fills and no theme layer. #F5B14C, #F7A738, #FEC93E, #FEBC1F and #F2C042 were all doing the same job on different rating stars.
The headline on all seven auth screens read “Find High-Quality and Dependable”, with the word Suppliers missing. Eight lorem strings, a Faker.js address, and a refund policy that read “Available on MOQ defects”.
User persona
One sources twice a year and does not know what an HS code is. The other runs forty RFQs a month and knows exactly which certificate expires when. The assistant has to answer a sentence for one and a filter set for the other, which is why search returns a written summary above the results grid.
Goals
The file had text and paint styles but no tokens. Styles name a value; tokens let a second theme swap it. Nothing ships with a hand-typed hex.
If the rail lists eight modules, eight modules exist. A nav item that leads nowhere is a promise the product breaks on every screen it appears on.
One signed-in identity, one date format, one ellipsis, one way to mark a field required. Inconsistency reads as carelessness long before anyone can name it.
Twenty-nine mobile screens and twenty-eight desktop ones describe the same product. Every fix and every new module landed on both.
Research
We opened each of the forty-nine buyer and supplier frames, desktop and mobile, and logged every off-palette fill, broken string and dead link. “The sourcing flow feels messy” is hard to fix; sixty-one fills, eight placeholder strings and four dead modules are a backlog.
frames walked, desktop and mobile
distinct fills before consolidation
auth screens with a broken headline
copy and data defects found
placeholder strings replaced with copy
nav modules with no screen behind them
Primary flow
The product's whole promise is that a buyer never has to learn a taxonomy. Every stage below either narrows the field or adds evidence, and the two screens where an account is most likely to be lost (verification and the empty result) are the two that got the most attention.
Grid system
The sidebar is not an overlay: it owns 120px collapsed and 300px expanded, and the working area re-flows around it rather than under it. Desktop runs a 12-column grid inside 1800px; mobile drops to 4 columns inside 327px with the same 24px gutter.
Components
Every fill and stroke in Sourceforce now resolves to a named token built from its own green and amber, so a dark theme is a swap rather than a redraw. The four missing modules got their nav variants, and the file gained four elevation styles.
Feature 01
Sign in, sign up, forgot password, OTP, reset, verify and the confirmation are separate screens rather than one form that changes shape, so a buyer who reloads mid-verification lands back on the right step. The left panel carries the product promise on all seven, which is why “Find High-Quality and Dependable” missing its final word was a defect worth finding before anything else.
Feature 02
A buyer types a sentence, not a filter set. The response leads with a written summary and a four-metric strip (suppliers found, average rating, response rate, HS code) and only then opens the results grid. The chat panel stays docked on the left so the question that produced the list never scrolls away from it.
Feature 03
Location, excluded countries, supplier type, verification status, shipping time, payment method, certification, price range and minimum rating. The panel applies as a set rather than one at a time, because a buyer narrowing by four criteria does not want four page loads, and the header count tells them whether they have narrowed too far.
Click map
A design-intent click map of the filtered results screen: heat sits only on interactive targets (buttons, tabs, links, menus), weighted by how central each action is to a buyer's day. It maps layout decisions, not recorded sessions.
It is the only filled button on each card, so it carries the decision. Heat fades down the grid: the first row gets the most attention, later rows less.
The bookmark on each card saves a supplier to Saved without leaving the grid, so a buyer can build a shortlist while still comparing results.
Each active chip carries its own remove control, so a buyer loosens one criterion without reopening the panel. Filter in the toolbar reopens the full set of nine.
The outlined button is the evidence path before an RFQ. It is deliberately weighted below Send RFQ, so it reads as secondary next to it.
Sidebar modules, bookmarks, layout toggles, theme switch and the workspace menu are reachable on every screen, but they are not the task on this one.
Design-intent map, not recorded data.
Feature 04
The profile opens over the results rather than replacing them, and leads with an AI Confidence Score and its reasoning (92%, low risk, reliable supplier) before any marketing copy. Business overview, performance trends, product portfolio, certifications, shipping, payment terms and contacts follow in that order, because that is the order a buyer's doubts arrive in.
Feature 05
The RFQ form had two fields marked with an asterisk, three marked optional, and six marked neither, so a buyer could not tell what would block submission. Seven are now required and four are explicitly optional. Sent and Inbox are separate tabs on the same center, so a quote request and the quote that answers it never live in different places.
Feature 06
Manufacturer Directory, Market Intelligence, Compliance Check and Supplier Messages sat in the rail of every screen, with icons already drawn, leading nowhere. All four now exist on both platforms, built from the same container, top bar and card components as the search and RFQ screens: a browsable directory with category filters, a benchmark view with two trend charts and two data tables, a certification tracker with audit dates, and a supplier thread list.
Feature 07
Profile, security, subscription, help and the legal notices are where a buyer decides whether to trust a sourcing platform with supplier data. Three plan descriptions were lorem ipsum, the enterprise tier quietly dropped “/month”, the support address was Faker.js output for a platform governed by Hong Kong law, and the delete-account warning had never been written.
Responsive
Twenty-nine mobile screens and twenty-eight desktop ones were drawn as a pair, not scaled from one another. The rail becomes a drawer, the results grid becomes a single column, the filter panel becomes a full-height sheet, but the card, the badge and the button are the same components at both widths.
Visual language
The palette was lifted from what shipped, not invented for the deck. A single green does every interactive job, one amber carries attention, and the grays build a dark surface stack the product had been drawing by hand. Type is DM Sans in three weights across seventeen styles.
DM Sans
Regular · Medium · Bold
Before / After
Four of the eight rail entries led nowhere, on all forty-nine audited frames.
Directory, Market Intelligence, Compliance Check and Messages now exist on both platforms.
Three different identities appeared in a single session.
One signed-in user, the same everywhere they appear.
Hand-typed hex values doing the same job on different screens.
Every fill and stroke resolves through a named token, and a second theme is possible.
Results & Impact
Every paint in Sourceforce now resolves through a named token, the navigation is true on both platforms, and the product has a second theme it could not previously produce. The four modules the rail had been promising since the first screen now exist.
Design-level outcomes measured against the source files. Live product data will follow launch.
Learnings
Four modules had been advertised on every screen for the entire life of the file and nobody had clicked them. The rail is the cheapest possible audit: it is a written list of what the product claims to be, and it took ten minutes to find four things that were not there.
This file looked systematic: seventeen text styles, sixteen paint styles, a hundred and twenty components. It still had sixty-one fills and five near-identical ambers, because a style is a shortcut and a variable is a contract. Only the binding pass could tell the difference.
One buyer sources twice a year and does not know what an HS code is; the other runs forty RFQs a month. Leading with a written summary and keeping the full results grid one scroll below let the same screen answer a sentence for one and a filter set for the other.
The broken headline sat on the left panel of all seven auth screens. It had been reviewed dozens of times. It survived because it was decoration by then, which is exactly why a copy pass has to read the parts of the screen that never change.
Let's work together
Team up with us
Have a product like this? Let's talk. Book a call
Write to [email protected], or see more case studies, including WorkHub, an HR platform designed on the same template.
PDF, 3 MB
Get a free UI/UX audit and discover what’s holding your site back
