# User Experience Critique — Serve The Team Website *Perspective: Head of Product Design* *Reviewed: Homepage, Playbook index, Card pages* --- ## Summary The homepage is clean and navigable. The card detail pages are good with a few rough edges. But the playbook index — which is the most important page on the site for a prospective new user — has a fundamental problem: it provides no orientation whatsoever. A visitor who arrives from the homepage curious about the product is immediately confronted with a search box, a grid of unlabelled filter chips, and a list of cards with names they don't understand, leading to actions whose purpose isn't explained. There is no moment of "here's what this is, here's what you'll find, here's where to start." The content itself is strong, but the page design buries that rather than showcasing it. Fixing the orientation gap is the most impactful design work available. --- ## Positives - **Clean visual language.** The off-white background, teal accents, and consistent illustration style create a calm, professional reading environment. The site doesn't feel cluttered. - **Good dual-CTA pattern on the homepage.** Offering "Sign up now" alongside the lower-commitment "take a look through our leadership playbook" is smart design — it caters to different levels of visitor intent without pushing everyone into the same funnel. - **Playbook is publicly accessible.** Letting non-subscribers browse the full playbook is the right decision. It's the strongest marketing asset on the site — but only if users can understand what they're looking at. - **Search + filter combination on the playbook.** Having both free-text search and topic filter chips gives users two complementary mental models for finding content. This is the correct approach for a content library of this size. - **"When to use" strip on each playbook card.** The "when you..." text below each card is the clearest articulation of what the card is for. It's the right idea — but see issue 3 below for why its current placement undermines it. - **Card page body copy is well-structured.** Each card has a clear topic label, a single punchy headline, a short hook paragraph, and then an expanded explanation. The reading experience on card pages is good. - **Inline sign-up form on card pages.** Placing a "Looking for more?" email capture directly below the card content is well-timed — the user has just read something useful and is at peak engagement. --- ## Issues and Recommendations --- ### PLAYBOOK PAGE #### 1. There is no orientation moment — the page just starts This is the most significant problem on the site. A user arriving from the homepage — curious, not yet convinced — lands on a page headed "Explore the playbook" and is immediately presented with a search box and a list of cards. There is no sentence explaining what the playbook is, how many cards it contains, what topics it covers, or what they should do next. The page assumes the user already knows what they're looking for. In practice, a first-time visitor doesn't know what to search for, doesn't know what the filter chips mean, and has no frame of reference for the card titles they're reading. The most likely outcome is confusion followed by abandonment — exactly the opposite of what this page needs to achieve. **Recommendation:** Add a brief introductory section at the top of the playbook, above the search and filters. Something like: *"180+ practical cards covering everything from giving feedback to running better meetings. Search for what you need, filter by topic, or just browse."* This takes three seconds to read and answers the three questions every new user has: what is this, how much is here, and how do I use it? --- #### 2. The content model is invisible — and looks like duplicate content The playbook's content model has two levels: **cards** (topic-level articles, e.g. "You are not an oracle") and **actions** (specific things to do in a particular context, e.g. "A good team helps itself — in your team meeting"). Each card has multiple actions, and each action appears as a separate item in the list. The problem is that a new user has no way to know this. Scrolling through the list, they see "A good team helps itself" and then immediately below it "Aim for consistency" — both showing the same card name ("You are not an oracle") and the same illustration. It looks like duplicate content, or a bug. There is nothing on the page that explains the card/action relationship or why the same illustration appears multiple times. **Recommendation:** Either make the content model explicit (e.g. group actions under their parent card, or add a label like "from: You are not an oracle"), or consider whether the playbook index should show cards rather than actions — letting users drill down into actions once they've found an interesting card. The current approach exposes the database structure rather than a user-friendly information architecture. --- #### 3. The most useful content is the least visible The "when you..." strip below each card is the single most useful piece of information for a new user trying to decide if a card is relevant to them. "When you find you're the bottleneck for questions from your team, when your team aren't helping each other" — this is immediately relatable. A manager reads that and thinks "yes, that's me." But it's the least prominent element on the card. It sits below the card border in very small, low-contrast text — almost like a footer or a caption belonging to the next card. A visitor scanning the page quickly will miss it entirely. **Recommendation:** The "when you..." content should be elevated, not buried. Consider making it a more prominent visual element inside the card itself — perhaps leading with it, rather than ending with it. A user scanning for relevance will find it far more useful than the action title. --- #### 4. The CTA buttons are evocative but opaque Each card has a teal CTA button with text like "Make connections", "Develop standards", "Get ready", "Be the devil's advocate". These are intriguing — but a new user has no idea what clicking them will do. Will they see an article? A downloadable tool? A checklist? A form? There is no affordance that signals "this takes you to a page with specific steps you can take." This matters because the action behind the button — a concrete, practical set of steps — is arguably the most valuable thing in the playbook. But the button label doesn't communicate that value. **Recommendation:** Either make the button label more descriptive ("See the steps →", "Go to this action") or add a consistent line of microcopy near the button that sets the expectation: e.g. "Get concrete steps for this situation." A new user needs to know what they're clicking into. --- #### 5. Nothing communicates the scope or richness of the content Scrolling the playbook index, there is no indication of how much content exists. A new user doesn't know if there are 20 cards or 200. This matters because one of the key value propositions of Serve The Team — 180+ practical cards covering a wide range of leadership situations — is completely invisible on the page where it would be most persuasive. **Recommendation:** Surface the content volume prominently (see issue 1 above). This is also why a card count in the filter/search results matters (see issue 7 below). --- #### 6. No suggested starting point for new users The playbook is an open canvas with no on-ramp. An experienced user who knows what they're looking for will search or filter and find it. But a new user — who doesn't yet know the content, doesn't have a specific challenge in mind, and is just "having a look" — has nowhere to start. There is no "Most popular" section, no "New to the playbook? Start here", no featured cards. **Recommendation:** Add a small curated entry point for new users. This could be as simple as 3–4 highlighted cards above the main list under a heading like "Not sure where to start?" — choosing cards that represent the breadth of the playbook and would resonate with most managers. --- #### 7. Two filter types are visually indistinguishable The filter chips are split across two rows, but there's no label or visual cue to tell users what each group represents. The top row is topic-based ("Drive Your Mission", "Communicate Effectively"...) while the second and third rows are situation/event-based ("Focus Your Personal Development", "Have Better One-to-Ones"...). These are fundamentally different ways of filtering — one is subject matter, the other is context — but they look identical. **Recommendation:** Add a small label above each group (e.g. "By topic" / "By situation") or visually distinguish the two groups. --- #### 8. No indication of how many cards exist or match a filter When a user applies a filter, there is no feedback on how many results they're seeing. A first-time user has no idea whether they're looking at 5 results or 50. **Recommendation:** Add a simple card count ("Showing 24 actions" / "180 actions in the playbook"). Update it dynamically when a filter is applied. --- #### 9. The card list is single-column on a wide page On desktop, the card list is rendered in a single narrow column (roughly 65% of the viewport width), leaving the right-hand portion of the screen empty. This forces unnecessary scrolling through a very long list. **Recommendation:** A 2-column grid on desktop would halve the scroll distance and make it significantly easier to scan. --- #### 10. No sign-up prompt on the playbook index page A non-subscriber can browse the entire playbook index without ever being prompted to sign up. The only sign-up prompt appears at the bottom of individual card detail pages. A user who spends time on the index — clicking filters, scanning cards — receives no encouragement to subscribe. **Recommendation:** Add a persistent but unobtrusive sign-up prompt to the playbook index. This could be a banner at the top of the card list or a prompt that appears after a user has scrolled past a certain number of cards. --- #### 11. No "clear filter" affordance Once a topic filter is applied, it's not obvious how to clear it. There is no visible "Show all" or "Clear filter" button. This may leave users stuck in a filtered view without knowing how to exit it. **Recommendation:** Add a "Show all" or "Clear" control that appears when a filter is active. --- ### CARD DETAIL PAGES #### 12. Context labels appear as raw slugs On the card detail page, the four action contexts appear in small text as raw slug values: "personal-development", "one-to-ones", "team-meeting", "with-your-boss". These are clearly database field values that haven't been formatted for display. **Recommendation:** Format as human-readable labels: "Personal development", "In your 1:1s", "In your team meeting", "With your boss". This is a minor fix but it's currently the most obviously unfinished element of the UI. --- #### 13. No navigation back to the playbook Card detail pages have no breadcrumb, no "back to playbook" link, and no contextual navigation. A user who arrives via a direct link — from the weekly email or a Google search — has no obvious path to the rest of the playbook. **Recommendation:** Add a simple "← Back to playbook" link near the top of each card page. This also supports discovery: a user who reads one card should be nudged towards browsing more. --- #### 14. The "Sign Up" button on card pages uses an inconsistent colour The inline sign-up form at the bottom of card pages has an orange/coral "Sign Up" button, while every other CTA on the site uses teal. This is jarring and undermines the visual consistency of the brand. **Recommendation:** Align the sign-up button colour with the site's primary CTA colour (teal). --- ### HOMEPAGE #### 15. Hamburger nav on desktop is non-standard The navigation is hidden behind a hamburger menu on all screen sizes, including desktop. Hamburger menus are conventionally associated with mobile and typically replaced with a full horizontal nav bar on larger screens. Visitors don't see "About Us" or "Explore the Playbook" unless they actively click the menu toggle. **Recommendation:** At desktop breakpoints, show the navigation items inline in the header. The four items (Home, About us, Weekly coaching, Explore the Playbook) will fit comfortably. --- #### 16. The stats section may not be accessible The three statistics (1 in 2, 79%, $519 billion) are rendered as decorative styled elements. If the numbers are encoded in images rather than text, they won't be readable by screen readers and may not scale at high zoom levels. **Recommendation:** Ensure the statistic values are actual text nodes, even if styled visually. --- #### 17. Testimonials are anonymous Both testimonials ("McDonald's franchisee", "Senior Leader, UK Public Sector") are attributed to job titles rather than named individuals. Anonymous quotes carry less weight than attributed ones. This isn't always avoidable, but worth noting as a conversion factor. --- ## Priority Order 1. Add orientation text to the playbook index — what it is, how many cards, how to use it (highest impact, low effort) 2. Add curated "start here" cards for new users 3. Elevate the "when you..." content within each card 4. Make the CTA button labels communicate what the user will get 5. Address the invisible content model (card → action relationship) 6. Add a sign-up prompt on the playbook index 7. Fix card context labels from slugs to human-readable text (quick fix, looks unfinished) 8. Fix CTA button colour inconsistency on card pages 9. Add "back to playbook" navigation on card pages 10. Add card count and filter feedback to the playbook index 11. Label the two filter groups (topic vs situation) 12. Add "clear filter" affordance 13. Move to a 2-column card grid on desktop 14. Show nav bar inline on desktop