Chloe Cheuk

Color means product

The yellow, blue and coral come from the strokes in the Liba Space logo. Yellow is always learning (Career Coach), blue is always searching (JobNova) and coral is always hiring (ConnectNova), in the hero, the chapter panels, the nav underline and the form. Every colored block carries dark text, not white, so it stays readable.

The cards open into the chapters

As you scroll, each product card in the hero grows into its full-screen section. The motion shows that each product holds its own world, and each chapter opens with a line that hands off from the one before (“You’ve built the skills. The next question is where they’re needed.”).

Editorial, not “AI”

I avoided purple gradients, glowing robots and stock photos. It is a near-black page with warm paper breaks, oversized condensed type (Archivo) against small monospace labels (IBM Plex Mono), and a visible column grid.

Honest by default

No guaranteed jobs and no made-up numbers. Sample data is labeled and anything the team still has to supply is shown in brackets. Motion turns off for people who ask for reduced motion, and the page works without JavaScript.

What I changed along the way

• Started the card-to-chapter animation earlier so it no longer lagged behind the scroll
• Took the illustrations out of the hero cards to keep them clean
• Evened out the phone padding and added dividers between ConnectNova’s question and answer pairs
• Lined up the bottoms of the logo’s strokes, and gave the Send button a hover color while keeping its accent bar
• Rewrote the copy so it reads less like it was generated

The question matters more than the price

Each card leads with the request title and the industry, and the rate sits small in the expert’s block. I didn’t want the page to look like people were being sold for $800 or $1,600.

Cards that scan like a table

A spreadsheet would flatten the hierarchy and big cards would waste space, so each request is a compact bordered row. The request is on the left and the expert on the right, and the list is grouped by industry until you search or filter.

Quiet status and human labels

Completed gets a soft success tone and Scheduled a restrained blue. Cancelled is muted, not alarm red. Seniority uses real titles (Founder / CEO, C-Suite, Director) instead of “Tier 1”.

A drawer, not a new page

Opening a request slides in a sheet with the original question, the expert, the consultation and your notes, then Book again or Find similar experts. You keep your place in the list, and on a phone it goes full screen.

Prepare before, remember after

A consultation doesn’t end at booking. Calls & Notes follows it through: upcoming calls show the expert’s background and suggested questions tied to your request, so an expensive hour starts with the right questions. Past calls keep AI-generated notes and the topics covered, and the calendar marks upcoming and completed calls in two quiet colors.

What I changed along the way

• Added the Calls & Notes tab with scheduling, suggested questions and AI-generated notes
• Lined the avatar and the date up on the same left edge in every card
• Gave the Experts tab the same card format, avatar on the left and credentials on the right
• Kept the tablet nav on one line with even spacing
• Replaced the placeholder heading with the Expert Match logo and matched the colors and font to the brand

One set of data, several views

Every one of Jimmy’s needs uses the same data (vendors, locations, ingredients) in a different shape. A table on desktop shows the most at once and lets him switch views, for example jumping to Ingredients when one crop has a problem.

From warning to action

Testing the first prototype, I found there was no way to act on a risk. Now an expiring batch opens a transfer panel that suggests the nearest store that’s short on stock, or the best vendor to contact. Each choice goes into a transfer queue that works as Jimmy’s task list.

Search that takes you there

With this much data, scrolling was tedious. Global search groups results by vendor, ingredient and location, shows each one’s risk, and jumps to that view with the item already selected.

A cookie brand on a clean tool

From competitor research I kept the clean, sans-serif, tech-app layout and white background. I made it Schumbl’s own with an espresso and mint palette, cranberry and burnt sienna for the two kinds of risk, cookie illustrations as icons, and a 3S+P+C logo that uses a cookie for the C.

How Figma Make fit in

I did the brief breakdown, data mapping and wireframes by hand in Figma, then used Figma Make to build the working prototype across seven drafts: palette, a card-based redesign, an accessibility pass, the transfer feature, global search, a design-system refresh and final polish.