Your account
Product brief · Experience design

Design
system.

A working reference for the Backcountry concept: principles, visual foundations, component candidates, product patterns and decisions ahead.

Prototype reference. Brand approval, accessibility validation and production component decisions remain open.

01 / 05 · Principles

The experience and visual choices that make the product feel coherent.

01 · Design system

Editorial trust in motion.

Experience principles guide how the product behaves. Visual principles describe how it should feel. Both are working directions to test with members and stakeholders.

Experience principles

Use the design checks and review questions to shape each screen. Record unresolved tradeoffs in Next decisions.

01

Editorial trust leads

Give someone a useful story, person, place or event before asking them to sign in or act.

In Backcountry

A story offers reporting, attribution and field context before its Save and Follow actions.

Design checks
  • Show the subject, source and practical value before the primary action.
  • Keep membership prompts secondary to reading and discovery.
  • Make commercial content and editorial content distinguishable.

AskWould this screen still offer value if the visitor took no action?

02

Actions have context

Put an action beside the content or relationship that gives it meaning.

In Backcountry

A reservation follows event dates, host, cost and preparation details; Save stays with the story.

Design checks
  • Name the object and outcome with a specific verb.
  • Show audience, cost or commitment before confirmation.
  • Avoid action menus detached from the thing a member is acting on.

AskCan the member predict what this action will do?

03

Consequences are visible

Confirm what happened and let members find the lasting result later.

In Backcountry

Saved stories, followed people and simulated event reservations appear in My Backcountry.

Design checks
  • Show clear success, error and pending states where the action happens.
  • Keep the source screen and the member destination in sync.
  • Offer a way to reverse a choice when the product supports it.

AskWhere can the member verify or change this later?

04

Participation is bounded

Give contributions a specific place, a clear audience and visible safety boundaries.

In Backcountry

A regional field note belongs to a named group, uses region-level location and shows pending review.

Design checks
  • State who can see a contribution before it is submitted.
  • Show moderation and publication states plainly.
  • Avoid precise member locations and an unstructured public feed.

AskDoes the member know who will see this, and when?

05

Prototype behavior is honest

Describe demonstrated behavior accurately, including what is seeded or simulated.

In Backcountry

Event reservations are labeled as simulated; place pages do not claim live conditions or route guidance.

Design checks
  • Label a simulated result at the moment a reviewer encounters it.
  • Separate current demo behavior from proposed product scope.
  • Do not imply connected payments, messages or live data without those services.

AskCould a reviewer mistake this screen for a live service?

Working visual direction

A visual language with room for the story.

These four principles turn the current concept into design choices we can critique. They do not establish approved HOL brand colors, fonts or image rights; those decisions remain open.

01

The subject sets the mood

Let editorial imagery and reporting create the atmosphere; keep the interface quiet enough for the subject to lead.

In practice

Choose purposeful field photography with a clear focal point, responsive crop and attribution. Avoid generic adventure decoration.

AskIs this image adding meaning, or merely filling space?

02

Type creates rhythm

Use expressive headlines for energy, comfortable reading text for depth and plain labels for utility.

In practice

Give each text role a consistent scale and measure. Reserve condensed uppercase type for short display moments and labels.

AskCan someone tell what to read, scan and do at a glance?

03

Color earns attention

Use the concept red as a deliberate signal against ink, paper and white; let photography supply the wider palette.

In practice

Reserve strong color for a primary action, active state or editorial emphasis. Check contrast and avoid competing red calls to action.

AskWhat is the red helping someone notice here?

04

Structure stays familiar

Repeat a recognizable grid, spacing and geometry while letting stories, places and events express their different content.

In practice

Use stable gutters, alignment and restrained dividers. Give content room before adding more borders, shadows or decoration.

AskDoes this feel like one product without making every page look the same?