Skip to main content
UI Coach Logo
Beginner

Explore a Specialist Resource Directory

Design a focused directory that helps practitioners compare resources by suitability, cost, format, and trust signals.

Responsive web1 to 2 hours

The brief

Understand the problem

Background

A niche directory becomes more useful than a link list when it explains what each resource is for and gives visitors effective ways to narrow the collection.

User context

Tariq is a new service designer looking for free journey-mapping templates that work in Figma and permit use in client projects.

Product problem

Users cannot judge relevance from a resource name alone, and too many filters can make a modest directory feel harder to browse.

Objective

Create the browse and detail experience for a curated professional resource directory.

What to design

Define the experience

Required experience

  • Browsable directory with a small set of useful filters
  • Resource cards with decision-making details
  • Resource detail with provenance and related options

Screens and states

  • Directory landing
  • Filtered results
  • Resource detail

Core user flow

Follow the critical path

  1. 01

    Tariq opens the directory and chooses a resource type

  2. 02

    He filters by price and compatible format

  3. 03

    He compares concise result cards

  4. 04

    He opens one detail page and follows the official link

Product rules

Requirements and constraints

Requirements

  • Show result count when filters change
  • Make pricing and licensing caveats easy to find
  • Explain why a resource is included
  • Provide a useful no-results recovery path
  • Link to related categories without losing the current context

Constraints

  • External resource details can become outdated
  • Most visitors will use only one or two filters

Reality check

States worth considering

A resource is no longer available
No resource matches the selected combination
Licensing information is unverified

Finish line

What to deliver

  • Design a responsive listing, filtered state, and resource detail page.

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
LobsterArimo

Lobster & Arimo

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Productivity

Long-Term Goal Roadmap

Design a planning tool that turns a broad personal goal into a realistic sequence of researched next steps.

Responsive web2 to 4 hours
Information ArchitectureProduct Thinking
Intermediate
Productivity

Set Notification Preferences by Urgency

Design a preference center that lets people control channels, timing, and topic frequency while protecting truly essential account messages.

Responsive web1 to 2 hours
Information ArchitectureForms
Beginner
Productivity

Personal Item Location Log

Design a private memory aid for recording where important household items were last placed and finding them later.

Mobile1 to 2 hours
Mobile DesignSearch and Filtering
Intermediate
Productivity

Accessible Paper to Text Capture

Design a document capture app that turns printed text into editable, readable content while preserving uncertainty and page structure.

Mobile2 to 4 hours
AccessibilityMobile Design
Intermediate
Productivity

Personal App Launcher

Design a customizable launcher that brings a person's most important actions into one accessible home screen.

Mobile1 to 2 hours
Information ArchitectureInteraction Design
Intermediate
Productivity

Shared Goal With Private Progress

Design a goal tracker that lets people support a shared ambition while choosing which progress details remain private.

Mobile2 to 4 hours
Product ThinkingContent Design