UX AGENT Available for full-time roles

Navigation Where do you want to go?

Where The Wild Beasts RoamFounder · Product Designer

Live product

I designed and builta wildlife route planner.

Visitors to Yellowstone and Grand Teton can get a suggested route or build their own. They can even save the plan for later.

Explore the live product (opens in a new tab) View résumé

Where The Wild Beasts Roam desktop map with a wildlife route and field-entry markers. — The wildlife map and planner on desktop and mobile.

Where The Wild Beasts Roam wildlife planner on a phone. — The wildlife map and planner on desktop and mobile.

I designed and built the planner, website, checkout, and member access.

Launched: From idea to working product
2 parks: Yellowstone + Grand Teton
My role: Research, design, code, and support

See what I designed and built.How visitors choose a route and save their plan.

01 The product

I gave visitors two ways to plan a wildlife day.

Some visitors need help choosing where to start. Others want to build their own route. I designed Help Me Choose and Build My Own Route so both can make a plan, review it, and save it.

My role Founder · Product Designer · DeveloperField knowledge 14+ yearsWhat I owned Research, design, code, and support

From choosing a method to reviewing a route.

01 · Planning method

The first screen offers both ways to plan.

02 · Sample route

The sample result brings the starting point, wildlife priority, drive estimate, and save action into one view.

Planner previews

Planning method

Sample route

Your sample wildlife plan is ready

Bison & Big Views to Moran

Grand Teton

See why the route fits, what to watch for, and which optional stops appear along the drive.

Starting point: Jackson
Wildlife priority: Bison
Drive: Jackson Moran · About 45 minutes driving
Best time: Morning
Route plan
What to watch for: Open meadows and habitat edges

Why this route fits

Planner screens from version 0.9.330. The route shown is a sample.

Try the planner example

One Grand Teton sample route

Wildlife Route PlannerGrand Teton

Jacksonto Moran

Illustrated map · Sample route

Route plan

Your sample route is ready

Bison & Big Views to Moran

Grand Teton

Starting point: Jackson
Wildlife priority: Bison
Sample drive estimate: About 45 minutes
Best time: Morning

Why this route fits

The sample begins in Jackson and stays focused toward Moran. It pairs the drive with a bison priority and morning timing.

Field notes + next steps

The sample focuses on open meadows and habitat edges. Review the field context, check current park alerts, and change your inputs when the day changes.

Where The Wild Beasts Roam

Bison & Big Views to Moran

Grand Teton · Jackson to Moran · Bison

Why this route fits

A starting point, a wildlife priority, and a route to review.

Field context

Open meadows, habitat edges, and room to adjust the plan.

Portfolio sample layout · Not driving directions

From screen to saved plan

Build it online.
Take it with you.

The live planner exports a personalized route PDF. It is a saved plan, not an offline version of the whole app.

Change the starting area, review the route, then go back to your choices. This is a sample with an illustrated map. It does not show live sightings or provide driving directions.

Next: the decisions

02 The decisions

The plan explains where to go and why.

Visitor questions and early tests helped me decide what to ask first. My field experience shaped the route notes and the details people can save.

01 · Ask

Ask about the day they have.

Help Me Choose asks where visitors will start, what wildlife interests them, and when they will go. Build My Own Route lets them choose a route on the map.

Starting areaWildlifeTime + timing

02 · Explain

Explain the suggested route.

The plan shows the route and explains why it fits. Field notes, scenic stops, and a backup option help visitors decide whether to use it.

RouteContext

03 · Keep

Save the plan before the drive.

Going back keeps the visitor’s choices. They can download their route as a PDF and read it later without cell service.

Route + field contextPersonalized saved plan

Wildlife safety shaped the product.

Field notes include the date of each observation. The map does not track animals live. I placed distance reminders beside the planning choices so visitors see them while making a plan.

25 yards from most wildlife100 yards from bears and wolvesPark safety guidance

Next: website + access

03 Website + access

I built the path from a sample to paid access.

Visitors can try a sample before they buy. I designed and built the website, checkout, and member pages so they can move from that sample to making and saving their own plans.

The supplied finished Where The Wild Beasts Roam website capture — Finished website. Tap to enlarge.

Finished website

Visitors can see a sample before they buy.

I moved the sample route higher on the website. Visitors can see what the planner gives them before reaching the price and checkout.

Explore the live website (opens in a new tab)

From trying it to using it

I designed what happens after payment too.

I connected checkout to the member pages, planner, and field guides. Buyers need a clear way to reach what they paid for and use it again.

Before purchase
Try a sample route and see what a plan includes.
Checkout and access
Buy access, then open the planner from the member pages.
After purchase
Return to make plans, save routes, and read the field guides. Field updates and support continue after purchase.

Included field guides Two field guides to use alongside the planner.

Cover of Your First Wildlife Move, a field guide I designed for Where The Wild Beasts Roam — **Your First Wildlife Move**Before the engine starts.

Cover of Bring Home the Moment, a field guide I designed for Where The Wild Beasts Roam — **Bring Home the Moment**When the moment happens.

These guides are separate from the route PDF each visitor can save.

The original website heatmap and click-map review — Original website heatmap and click map. It shows website use, not use of the planner.

Heatmap review

The sample route needed to appear sooner.

The heatmap showed less attention farther down the page. I reviewed where the website explained what visitors would get.

That review led me to move the sample and its result higher on the page. It does not prove that the change increased purchases.

Next: design + build

04 Design + build

I built the software behind the screens.

I designed the screens in Figma, then built the planner as a custom WordPress plugin. The same buttons and controls work on phones and desktop. Going back keeps the visitor’s choices.

I reused the same parts across the planner.

Choose a tab to see a control and where it appears in the planner.

A checkmark shows what is selected.

Selected cards have a stronger border, a checkmark, and a tinted background. People can spot their choice without relying on color alone.

Default

Grand Teton National Park

Selected

Grand Teton National Park

Component properties

 WTWBR / Planner choice 
 State: Default · Selected 
 Interaction: Default · Hover · Pressed · Focus

A card can stay selected while someone hovers over it or uses a keyboard to reach it.

Each button shows when it can be used.

These examples show the same button at rest, during a hover or press, and when it is unavailable. The label, size, rounded corners, and icon spacing stay the same.

Default Continue

Focus Continue

Disabled Continue

Component properties

 WTWBR / Button 
 Label: editable text 
 Tone + State: separate variant properties

The highlighted area in the planner uses the Text tone for “Choose another planning method.”

Progress shows which questions are complete.

The step someone is viewing can differ from the last one they answered. The progress display keeps those two things separate.

Step 1 · 0 complete

PLAN YOUR DAY 0 of 3 complete

1 START 2 WILDLIFE 3 TIMING

Component properties

 WTWBR / Guided progress 
 Step + Complete: separate variant properties

Opening a step does not count as answering it. The planner checks whether the required answer is there.

System in use · Choose a park · Desktop sidebar

The park cards use the shared Planner choice design.

A browser version of my Figma planner study. The controls and icons use the product’s own colors.

Component rules and field states

I gave each color a job.

The saved colors cover the brand, backgrounds, text, and selected choices. These examples use the WTWBR colors.

Forest brand/forest · #223F17
Coral brand/coral · #FF825C
Canvas surface/canvas · #F6F7F2
Selected surface/selected · #EAF2E4

Text and spacing follow shared rules.

I saved text sizes, spacing, and corner styles in the library so the screens use the same rules.

Barlow Semi Condensed Headings · Bold

Inter Body · Labels · Controls

4 8 12 16 24 32 48 64

Fields show when an answer needs attention.

These examples show a field before and after an answer, with keyboard focus, with an error, and when it is unavailable. The label and help text can be edited.

Error variant · source specimen

Starting location

Choose a starting location

48 px Shared button height

12 px Control corner radius

24 px Utility icon grid

How I built and tested the planner

The plugin turns choices into a route.

I wrote the HTML, CSS, JavaScript, and back-end code. It connects the visitor’s choices and field notes to routes, directions, and saved PDFs. I also built the website, checkout, and member access.

InputsVisitor choices + field entries

Custom WordPress pluginRoute rules + access

OutputMap, route details, saved PDF

I tested both ways to plan. I checked missing answers, loading screens, errors, and what happens when someone goes back. Early tests and support questions helped me change labels and steps.

I handled the research, planned each task, made wireframes, and designed the screens. I wrote the code, set up payment and tracking, added field notes, and supported the product.

Next: live + improving

05 Live + improving

I launched the planner and the website around it.

The planner, website, checkout, and member pages are live. Visitors can make a route and save their plan. I keep testing how the product works and improving it.

LivePlanner, website, and paid access

Two ways to planGet a suggested route or build your own

Two parksYellowstone and Grand Teton

I keep working on it after launch.

Tests, support questions, and reviews of how people use the site help me decide what to fix. I can update the design and make the change in code.

What I would measure next

I want to check how many people finish a route, how long it takes, how many sample users buy access, and how many return. This is a plan for future testing. Those results are not reported here.

The results above describe what I launched. I have not reported a measured gain in sales or task speed.

In development

I’m testing a phone-based range finder.

I keep building on the product. My next goal is a phone tool that helps visitors judge how far they are from wildlife.

The current prototype uses the camera and an object with a known width. The estimates need to be checked against measured distances before wildlife use.

Early prototype. It cannot confirm a safe distance from wildlife.

WTWBR Range Finder TestPrototype