When I set out to design Trail Trotter, my goal was to translate the charm and ease of Red Buffalo Ranch into a mobile experience. The ranch is a welcoming place in person, but its booking process is handled primarily through calls and emails, which feel clunky in a world where most of us expect to book things with a few taps. I wanted to create something approachable and helpful, whether someone was planning their very first trail ride or organizing a special event like a proposal.
I imagined a mobile app that could guide users through booking rides, modifying reservations, and browsing upcoming events without confusion or hassle. Everything needed to feel clear, warm, and magical, like the ranch itself.
From Sketches to Screens
I started this process with low-fidelity sketches, drawn out on my reMarkable tablet to quickly map the user flows. At this point, I wasn’t thinking about visual polish, and I was focused on structure: what the user should see first, how they move through each task, and the most straightforward path to success. Once those ideas felt solid, I brought the wireframes into Balsamiq to add more hierarchy and shape. These early steps helped me organize the core screens and better understand how users might move through the app.
Early hand-drawn sketches show the initial layout ideas for Trail Trotter’s core screens.
The next big leap came when I built a medium-fidelity, clickable prototype using Figma. This was the point where the app started to feel real. I created interactive flows that let users book rides, manage reservations, and submit special event requests. With tappable elements and simulated confirmations, testers could experience what it would be like to use Trail Trotter in real time.
A medium-fidelity prototype of Trail Trotter is displayed in Figma, showing key user flows and screens.
Testing with Real Users
Usability testing was a critical part of the process. I tested the prototype with Cynthia, a retired first-time app user, and Olivia, a tech-savvy teenager at the ranch. Their feedback was detailed and incredibly useful. Cynthia found the app welcoming and easy to use, though she recommended more guidance for first-time riders. Olivia appreciated the layout but felt some sections, especially event booking, needed more explicit language.
Based on their feedback, I made several key updates: I renamed the “Events” section to “Special Occasions” to help distinguish between public ranch events and private bookings. I also reorganized the homepage tiles so that the most common actions (like booking and checking reservations) are front and center. Both users emphasized the importance of flexibility, so I included options for Venmo payments, better support for editing existing bookings, and added touches like post-booking reminders about gear, weather, and ranch policies.
What the Prototype Covers
The medium-fidelity prototype walks users through three main tasks. The first is booking a trail ride. Users can choose a time, enter rider details, and confirm their reservation, even as guests. The second task is managing a reservation, where users can retrieve and adjust an upcoming booking. The third is exploring ranch events, which allows users to view upcoming events, register to attend, and add them to their calendar so they don’t forget about them.
The Trail Trotter home screen from the medium-fidelity prototype highlights key tasks: Booking, My Reservations, and Ranch Events.
Each flow is designed with real user needs in mind. I focused on keeping the experience smooth and low-pressure, with no sign-up walls, no confusing labels, and just a clear path from start to finish. I wanted users to feel empowered and confident every step of the way, whether they were first-timers like Cynthia or returning riders like Olivia.
Lessons Along the Way
This project taught me a lot about designing for people, not just screens. I tend to obsess over details, so starting with imperfect sketches was a fundamental mindset shift. But I learned good UX isn’t about perfection but clarity, intention, and iteration. Testing early and often helped me make smarter decisions, and building in Figma let me quickly adapt as feedback rolled in.
One word that came up repeatedly in our testing sessions was clarity. And honestly, that’s the word I carried with me through every design decision. From labels and layouts to confirmation messages and button placement, I asked, “Will this make sense to someone who’s never used the app before?”
An interactive screen lets users explore upcoming events like the Mounted Archery Clinic.
Wrapping It Up
Creating Trail Trotter has been one of the most rewarding design experiences I’ve had so far. It pushed me to think critically, solve real problems, and stay flexible despite tight deadlines. More importantly, it reminded me that design isn’t just about making things look good—it’s about making things work for real people, in real moments.
If you’re curious to see the app in action, I’ve created a walkthrough video of the core user flows. You can also explore the medium-fidelity prototype directly in Figma to understand how the app works. Finally, read through the interactive prototype report to see everything from ideation to prototyping.
Powered By EmbedPress
Thanks for following along. If you ever want to ride through Evansburg State Park, Trail Trotter will hopefully help.
After building the low-fidelity prototype for HayDay, the next logical, and essential, step was clear: it was time to put it in front of real users.
Prototype testing is the bridge between our assumptions and reality. It’s one thing to imagine how a user might move through booking a trail ride or proposing to their partner on horseback. It’s another thing entirely to watch them do it, narrating their thought process as they go. And that’s precisely the point of user prototype testing: uncover friction points, hidden confusion, unexpected behaviors, and little moments of delight all before a single line of code gets written.
Setting Up the Test
User testing for HayDay followed a straightforward but carefully considered process. Two users were selected for remote testing using a clickable POP (Prototyping on Paper) prototype:
Cynthia DeRose, 57, retired, tech-comfortable but not tech-fluent.
Olivia DeRose, 17, assistant manager at Red Buffalo Ranch, is highly familiar with the ranch but new to the app.
Testing was conducted over Zoom, using screen sharing and audio recording to capture real-time reactions. Each participant was given a script and asked to complete four core tasks without guidance:
Book a trail ride for a future date and time.
Modify an existing reservation.
Plan a special event, such as a proposal ride.
Complete payment and add the ride to a calendar.
The testers were encouraged to “think aloud,” narrating their experience, frustrations, surprises, and thoughts freely. This setup mirrors methods used in earlier UX studies, where low-fidelity prototypes were tested in small-scale, real-world settings to collect qualitative feedback.
What I Wanted to Learn
The goals for this round of prototype testing were simple:
Navigation: Could users intuitively find their way around the app?
Task Completion: Could they efficiently perform core actions like booking a ride or editing a reservation?
Pain Points: Where did confusion, hesitation, or backtracking occur?
Expectations vs. Reality: Did the app meet the users’ mental model of how a booking app should work?
This wasn’t just about testing “if it worked,” it was about listening for nuance, about spotting the nearly invisible hurdles that often turn good apps into great ones when fixed early.
What I Learned
During usability testing, several consistent patterns and points of feedback emerged across both participants. These themes helped validate areas of strength in the app while highlighting opportunities for improvement that will guide the next iteration.
Theme
Findings
Navigation Clarity
Users found the app generally intuitive but suggested that modifying existing reservations could be made more seamless.
Content Expectations
First-time users expected more information about the ranch, services, and ride options to be available before booking.
Special Events Booking
Booking a proposal ride felt too complex to complete independently through the app; a personal support option would better meet user expectations.
Labeling Improvements
Certain sections, like “Events,” were unclear and should be renamed to more accurately reflect their content (e.g., “Special Cases”).
Payments & Policies
Users preferred having flexible payment options, such as Venmo, and requested clearer communication regarding policies, including helmet requirements and weather alerts.
Expanded Key Insights
First-Time User Content Needs: Cynthia repeatedly asked, “What should I wear?” and “What happens if it rains?” This revealed a strong need for a richer “Explore the Ranch” section, complete with FAQs, photos, and clear guidelines on gear and policies. By answering these questions upfront, we can build user confidence and reduce the number of support inquiries.
Special Event Booking Friction: Both testers found the proposal planning form too generic. They recommended pivoting that flow into a “Request a Callback” option, allowing a ranch representative to add the personal touch these events require. Renaming “Events” to “Special Experiences” or “Packages” would also clarify the section’s purpose.
Streamlined Reservation Edits: When modifying a reservation, users should see available time slots immediately. By surfacing openings in real-time, we can eliminate unnecessary navigation steps and make schedule changes quickly and frustration-free.
Login & Guest Checkout Confusion: Cynthia was prompted for a password without clear guidance on account creation. A simple inline note, such as “Don’t have an account? Create one here,” will help orient guest users and prevent dead ends during the booking process.
Flexible Payment Options: Olivia suggested adding Venmo for group deposits to avoid credit card fees. Offering multiple payment methods not only modernizes the experience but also supports the diverse needs of ranch visitors.
Next Steps
After digging through all the feedback from user testing, I’m excited to share what’s next for HayDay! The next phase focuses on refining and enhancing the prototype to make it feel more natural and intuitive for all users.
One of the first things we’re tackling is the “Explore” section. I’m adding more helpful content, such as FAQs, photos, dress code tips, and information about their weather policies, all things that should make it much easier for first-time visitors to feel prepared.
I’m also streamlining the process for booking special events. Instead of requiring guests to fill out a complete online form, they’ll be able to “Request a Callback.” I’m also considering renaming that section to something clearer, such as “Special Experiences” or “Packages,” to make it easier to find.
Rescheduling is about to get a lot easier, too. I’ll be showing real-time availability, which should make picking a new time way faster and less frustrating. Since the users were confused at checkout about whether they needed an account, we’re adding clearer messaging to guide them through the process if they need to create one.
Another thing I’m excited about is exploring the option to add Venmo as a payment method, instead of credit cards, since they don’t accept credit cards due to the high fees associated with them. That should give guests (especially groups) more flexibility when it’s time to settle the bill.
If you’re interested in diving deeper into everything we learned, I put together a complete Prototype Testing PDF. It includes scripts, participant info, task flows, and a summary of the big takeaways. Feel free to check it out or download it below for a closer look at how this feedback is shaping the next version of HayDay!
Last time, I shared the start of a new adventure—designing HayDay, a mobile companion app for Red Buffalo Ranch. I began with curiosity, sticky notes, and an evolving sitemap meant to bridge the ranch’s rustic magic with a digital-first experience. In that post, I mapped out the big picture, the sitemap structure, and early user flows that would support everything from booking a trail ride to planning the ultimate engagement proposal.
This week, things got real. But not in a pixel-perfect way. I went semi-old school: no polished UI kits, no high-fidelity mockups. Instead, I turned to my reMarkable Pro, one tool that let me hand-draw each screen with purpose, clarity, and just the right amount of roughness. The result? A tactile, sketched-out app experience that still lives in the digital world but captures the loose, iterative magic of paper.
Let me show you how sketching helped shape the HayDay experience, and how every screen (even the hand-drawn ones) keeps the user in the reins.
Exploring pen tools and color options on the reMarkable tablet while reviewing annotated content.
Back in the Saddle: Revisiting My App’s Foundation
If you remember from my first blog, I built HayDay around four big, clear buckets:
Book a Trail Ride
Manage a Reservation
Engagement Proposals
Explore the Ranch & Earn Rewards
That structure originated directly from my sitemap, the blueprint that gave HayDay a clean, focused information architecture. But a sitemap alone doesn’t tell the whole story. So, I followed up with user flows, which are little journeys that show how someone would move through the app, screen by screen, action by action.
I talked about these flows last time, but they’ve grown since then. Like a rough trail that becomes more defined with every ride, my flows matured into clear sequences. That’s when I knew it was time to test them out by drawing them out.
Paper prototyping is one of those UX techniques that sounds almost too simple to be effective. I sketch my screens and walk users through the experience—no code, no software polish, just flow and function.
In my case, I didn’t use literal paper, but instead turned to my reMarkable Pro for freehand sketching. From there, I used Adobe Photoshop to separate and refine each drawing, adjusting contrast and layout to keep things clear. Finally, I assembled everything in PowerPoint to create a presentation that showcases the user interactions and flow, which I exported as a PDF for easy viewing.
This hybrid approach gave me room to explore and refine without getting too precious about the details. It lets the ideas lead, not the tools.
As the Interaction Design Foundation notes, “Paper prototypes are useful early in the design process when teams are working to figure out the structure of an interface or workflow.”
From Flows to Frames: Sketching the HayDay Experience
With the sitemap and information architecture (IA) set, I began mapping out the app’s functionality through two core flows that reflect common and exciting user scenarios at Red Buffalo Ranch. Each screen was sketched to explore layout, pacing, and ease of use.
Flow One: Planning a Proposal Ride at Sunset
This first flow focuses on something magical—an engagement proposal on horseback, timed perfectly for sunset. Starting from the home screen, the user selects the “Proposals” option, then explores the available experiences such as “Sunset Trails” and “Babbling Brooke.” Once “Sunset Trails” is selected, the app guides the user to a date and time picker.
After selecting the perfect evening, the user fills out a form requesting extras, such as photography, flowers, or music. I designed the form with clear input fields and checkboxes to simplify the process. Once submitted, the user receives a confirmation screen summarizing their request.
This flow was all about balance—creating space for excitement while reducing complexity. The form breaks down each piece of the request, and the summary screen reassures users that their special moment is in good hands.
Flow Two: Booking a Trail Ride (But Not for Today)
The second flow simulates a user opening the app to book a trail ride but choosing not to ride that same day. After a splash screen and home page, the user is presented with a pop-up asking if they would like to book a ride today. In this scenario, they hit “No thanks,” which redirects them to a calendar view.
From there, they select a future date, choose between a 1-hour or 2-hour ride, and are prompted to log in or continue as a guest. I wanted to ensure the guest path was transparent and frictionless, ideal for someone booking at the last minute or casually exploring.
I intentionally split the process into digestible steps: ride type, rider details, and payment. It mirrors real-world decision-making and avoids overwhelming users with an excessive number of choices at once.
Every screen in both flows was designed with clarity and intentionality in mind. Form fields, buttons, and even confirmation screens are laid out to feel as thoughtful as they are functional. Green buttons signal action. Yellow highlights input fields. Recurring icons across the bottom navigation bar reinforce the structure: Home, Bookings, Rewards, and Account.
That consistency creates confidence, and confidence makes people more likely to complete their booking or proposal request.
Where It’s Headed Next
This round of prototyping helped me pressure-test ideas before committing to final visuals. With both flows mapped out in low-fidelity form, the next step is user testing. I’ll invite testers to explore both paths independently, without prompting, to engage in honest interaction and determine what makes sense, what doesn’t, and where the design can evolve.
Powered By EmbedPress
Come Back for the Next Ride
In the next phase, I’ll gather feedback, refine the flows, and prep the high-fidelity wireframes. The goal? A beautiful, intuitive app experience that still feels like Red Buffalo Ranch—charming, personal, and easy to navigate.
Until then, thanks for riding along. If you’re sketching your ideas, keep going—sometimes the best journeys start with a few rough lines and a strong sense of direction.
Have you ever tried to plan a peaceful trail ride… and ended up tangled in digital tumbleweed?
That was my experience the first time I booked at Red Buffalo Ranch. The ride was unforgettable, sunlight filtering through Evansburg State Park, the gentle sway of a well-trained horse, and that rare feeling of pure stillness. But getting there? A clunky website, an email form, and a follow-up call that took days. That contrast, between nature’s simplicity and the digital hassle, sparked the vision for HayDay, a conceptual mobile app that transforms how riders connect with the ranch.
User flows are at the core of that transformation. These unsung heroes of UX design became the trail map guiding us from frustration to delight.
What Are User Flows?
User flows are step-by-step diagrams that chart how users move through an app to achieve a specific goal. Each flow starts with a user’s intent, like booking a trail ride, and follows every decision point, screen, and interaction required to make that happen.
Think of a user flow like a trail map for the app experience: where you begin, where you might stop, and the most straightforward route to the destination. It helps designers, developers, and stakeholders focus on what the user needs at each step, not just what looks pretty.
This is an image showcasing a sketched visual user flow that maps out the step-by-step navigation between key mobile screens like Home, Search, Product, and Profile during the early stages of app design.
Why Are User Flows Essential?
User flows keep your team honest. They ensure your features are purposeful, your screens aren’t bloated, and your users don’t hit dead ends. Without them, you’re designing blind.
Here’s why they mattered so much for HayDay:
Clarity for Users: We designed each flow to feel natural, even delightful, especially for users unfamiliar with mobile booking.
Efficiency for the Business: Fewer back-and-forth emails and phone calls mean more time for Red Buffalo staff to focus on guests, not logistics.
Empathy in Action: The flows let us walk in our users’ boots, whether local families, event planners, or spontaneous weekend adventurers.
Bringing the HayDay App to Life
The HayDay app is all about making the magic of Red Buffalo Ranch more accessible, intuitive, and enjoyable from the very first tap. Users can explore, book, and personalize their experiences in one place without emailing for availability or waiting days for a call.
The app’s key features include:
Trail ride booking with real-time availability
My Reservations dashboard for edits/cancellations
Event & group ride inquiry forms (proposals, birthdays, scout rides)
In-app payments with Apple Pay and credit cards
Seamless waiver + confirmation handling
Let’s dig into the user flows that made this happen.
User Flow 1: Booking a Trail Ride
Lisa’s User Story:
As a first-time visitor, I want to browse trail ride options and reserve a ride from my phone, so I don’t have to call or wait for a reply.
Scenario:
Lisa, a 34-year-old marketing manager from Philadelphia, wants to plan a spontaneous Saturday adventure with friends. She downloads HayDay, taps “Book a Ride,” filters by date and group size, checks the availability calendar, and books a 1-hour ride in minutes. She pays with Apple Pay and gets an immediate confirmation and waiver to e-sign.
This user flow illustrates how a first-time visitor like Lisa can browse, select, and book a trail ride seamlessly using the HayDay app.
Flow Highlights:
Clear categories (Beginner, Intermediate, Scenic)
Real-time scheduling calendar
Instant confirmation = instant confidence
This flow tackled Lisa’s most significant pain point: waiting. She never had to leave the app or her couch.
User Flow 2: Viewing and Managing Reservations
Brian’s User Story:
As a returning customer, I want to check my upcoming rides and make changes, so I can stay flexible without contacting the ranch directly.
Scenario:
Brian, a father of two, has a family ride scheduled but just found out his son’s soccer practice was moved. He opens the app, finds his booking in “My Reservations,” and reschedules for the next day with just a few taps, so no rebooking is needed.
This flow shows how returning user Brian edits or reschedules an existing reservation directly within the HayDay app without contacting the ranch.
Flow Highlights:
Persistent navigation makes “My Reservations” easy to find
Edit, reschedule, or cancel without penalties
Intelligent alerts remind users of waiver completion and arrival times
This flow was built for flexibility, life happens, and the app needed to adapt.
User Flow 3: Submitting a Proposal Inquiry
Emily’s User Story:
As someone planning a proposal, I want to explore private ride packages and request more information, so I can plan something personal and unforgettable.
Scenario:
Emily, a veterinary student, dreams of proposing on horseback at sunset. She taps into the “Special Rides” section, finds the proposal package with beautiful imagery and testimonials, and submits a quick inquiry form. The next day, she receives a friendly call to plan the details.
This user flow captures Emily’s journey through the app as she explores private ride options and submits an inquiry to plan a memorable proposal.
Flow Highlights:
Inspiring content with emotional storytelling
Simple, low-friction interest form
Backend automation sends her info to the right ranch contact immediately
This flow prioritizes connection over automation; it’s personal, just like the moment Emily’s planning.
Want to see the full user flows in action?
Download the HayDay User Flows PDF to explore detailed visuals, user scenarios, and feature breakdowns that guided the mobile app concept from spark to storyboard. Whether you’re a fellow UX designer, a nature-loving planner, or just curious how digital journeys are mapped, this doc walks you through every thoughtful step, story, and scenario.
Powered By EmbedPress
What I Learned
Designing HayDay through user flows revealed something essential: even the most magical destinations can be derailed by a poor digital experience. My job as a UX designer isn’t just to make things look nice; it’s to remove the friction between a user’s intention and experience.
Every flow I created for HayDay started with listening. I held interviews, ran usability tests, and read through feedback from real Red Buffalo Ranch guests. That empathy shaped the wireframes, the buttons, the notifications, everything.
Here’s the truth: when a rider opens an app to book a trail ride, they’re already picturing the trees, the horses, and the moment. My job is to get them there with ease, joy, and no confusion.
Final Thoughts
HayDay may be a concept for now, but the approach behind it is accurate and replicable. Whether you’re designing for a ranch, a museum, or a university, the power of user flows is the same: they guide you to build for humans, not hypotheticals.
User flows helped me create a better ride, digitally and literally. And that’s what UX is all about.
Additional Reading & Resources
While researching how to do user flows, I came across several good references. Below are two articles. The video Intro to User Flow Diagrams below is a simple and quick tutorial with an example.
When crafting an app to complement your existing website, it’s tempting to replicate all your website’s content. However, a well-designed companion app needs its own thoughtfully curated information architecture (IA) that specifically suits mobile users’ needs. Let’s dive into why IA matters, how I approached creating the sitemap for our companion app, and some valuable insights from our usability study at Red Buffalo Ranch.
Why Information Architecture Matters
Information Architecture (IA) is essentially the backbone of your digital product, organizing content clearly and intuitively. When done right, IA makes navigation feel effortless, turning visitors into loyal users. This becomes even more critical when transitioning from desktop websites to mobile apps. Mobile users have unique behaviors: they’re typically on the go, have shorter attention spans, and prefer quick, task-oriented interactions.
A strong IA accounts for these factors, making mobile experiences efficient and enjoyable.
Crafting the Companion App Sitemap
Our research at Red Buffalo Ranch revealed key insights. Users, like Brian and Lisa, desired immediate access to booking, simplified reservation management, and real-time updates during their ranch visits. They didn’t need exhaustive details, just quick and relevant information.
Keeping this in mind, I structured the companion app around a clear, task-oriented IA:
Home: Immediate highlights, booking prompts, and notifications.
Book a Ride: Direct access to reservations, availability, and payment.
My Reservations: Manage upcoming bookings and get directions quickly.
Trail Map & Explorer: GPS-enabled interactive maps and safety guidelines.
Events & Groups: Streamlined forms for group events and specialized bookings.
Media & Memories: Easy photo uploads and social sharing.
This minimalist, action-focused design addresses the core needs of mobile users without overwhelming them with information that would be better suited for a website.
The companion app sitemap prioritizes easy navigation to key features, enabling swift access to bookings, updates, and reservations explicitly tailored for mobile users.
View and download a copy of the new proposed app here:
Powered By EmbedPress
Mobile vs. WebView: Finding the Balance
To prevent app clutter, I decided on a hybrid approach using WebView for detailed content like extensive FAQs and comprehensive galleries. This maintains app efficiency, ensuring it remains fast and responsive while providing access to all necessary information.
Our usability report highlighted users’ struggles with information overload on the website, something I was keen to avoid in the app. By shifting dense content to WebView, we maintained clarity and speed.
Visualizing the Companion App
Visual clarity is essential. To support our IA, I recommend including visuals such as:
User flow sketches showing booking and reservation paths.
An IA tree diagram clearly presenting navigation pathways.
Wireframes emphasizing intuitive design elements.
Additionally, videos illustrating IA concepts, like Understanding IA in App Design, can reinforce your understanding and effectively communicate the app structure to stakeholders.
Integrating Social Media Thoughtfully
Including Instagram in our app sitemap was strategic:
Media & Memories: A direct link to Instagram enhances visual storytelling without distracting from essential functions.
Social Proof: Encouraging user-generated content strengthens trust and engagement, amplifying community involvement.
However, the integration was kept subtle to avoid pulling users away prematurely, especially crucial when they’re about to book.
Humanizing the Process
Designing the IA wasn’t merely technical, it was empathetic. I imagined scenarios like Brian, who needs quick reassurance about his family’s safety, or Lisa, who wants visually appealing experiences to share with friends. The companion app is tailored to those genuine, human moments where simplicity and clarity count most.
Personas like Brian, who’s always traveling and needs quick booking management, and Lisa, a busy mom who depends on instant updates, show why designing around real-life mobile moments is so important.
Final Reflections
Our companion app’s sitemap isn’t just a simplified version of our website; it’s a distinct, user-focused experience explicitly designed for mobile contexts. By thoughtfully applying IA principles and responding directly to user feedback, we’ve created a companion app that supports, rather than duplicates, our website. It prioritizes immediacy, clarity, and actionability, enhancing user satisfaction and driving meaningful engagement.
This approach ensures that your companion app complements your website and excels at providing users precisely what they need, exactly when they need it.
When it comes to website design, we often focus on visual elements, flashy graphics, dynamic interactions, and engaging content. While these are crucial for capturing attention, they aren’t the backbone of user-friendly design. That role belongs to Information Architecture (IA) and sitemaps, essential tools that quietly guide users to exactly what they’re looking for.
What Exactly is Information Architecture?
Imagine walking into a grocery store without any signs or labels. You’d be lost, frustrated, and might leave without buying anything. Information Architecture works similarly—it organizes, labels, and structures digital content so users effortlessly find the information they need (NNGroup, 2020).
IA isn’t just about navigation menus or links. It’s about structuring content logically and intuitively, reflecting how users naturally search for information. Good IA improves user satisfaction, reduces frustration, and ensures visitors return.
Where Do Sitemaps Fit In?
A sitemap is essentially the visual blueprint of your IA. It provides an overview of your website’s structure, showcasing how pages interconnect and how users can navigate from point A to B seamlessly. Think of a sitemap as the directory in a shopping mall, showing every store’s location and the quickest routes to get there.
Sitemaps vs. Navigation: What’s the Difference?
It’s common to confuse sitemaps with navigation, but they serve slightly different purposes. While a sitemap is a comprehensive map of every page on your site, navigation is the actual pathway users take to travel through your content (Amherd, 2020). Effective navigation results from thoughtful IA and a clearly defined sitemap.
Practical Example: Red Buffalo Ranch Website Redesign
Current Structure Layout
I recently undertook a website re-design for Red Buffalo Ranch, a delightful horseback riding center located near Evansburg State Park in Southeastern Pennsylvania. Initially, their website had a straightforward yet flat layout (see image below).
The current Red Buffalo Ranch sitemap has a simple navigation structure highlighting key offerings, including trail rides, lessons, camps, lunch rides, and corral browsing, but lacks intuitive user pathways and clear booking options.
Usability testing identified significant challenges, including unclear navigation paths, hidden or hard-to-find information, and a complicated booking process. The usability report clearly outlined user frustrations, highlighting specific issues such as difficulty locating rider requirements and safety guidelines.
Redesign Using Usability Insights
Leveraging insights from the detailed usability report, I undertook an iterative redesign process, including card sorting activities. These activities revealed how users logically grouped information, informing the revised sitemap:
Home: Quick access to popular content, enticing visuals, and immediate booking options.
About Us: The ranch’s story, team introductions, and horse bios.
Trail Rides, Lessons, Camps: Clear pages with FAQs and streamlined booking.
Events & Groups: Tailored information for special occasions and group visits.
Visitor Info: Centralized safety guidelines, recommended attire, directions, and local attractions.
Media Gallery: User-submitted photos and videos, with social media integration.
Persistent ‘Book Now’ Button: Easily accessible from any page to simplify bookings.
This new sitemap addressed all the usability issues identified, resulting in significantly improved navigation and user satisfaction.
The redesigned sitemap for Red Buffalo Ranch integrates usability insights to offer visitors clear, intuitive navigation, to trail rides, lessons, camps, events, visitor information, and media content. It also features persistent booking links and streamlines pathways, significantly enhancing user experience and accessibility.
View and download a copy of the website’s sitemaps here.
Powered By EmbedPress
Why Continuous Improvement Matters
Information Architecture isn’t about perfection, at first try; it’s iterative. It evolves based on ongoing user feedback and behavior analysis. The goal is continuously refining the experience, keeping users’ needs at the forefront.
Morville and Rosenfeld (2007) emphasized that IA should always align with user goals, business objectives, and technological capabilities, forming a harmonious interaction between these elements.
Getting Started with Your Own IA and Sitemap
If you’re starting to think about your own site’s Information Architecture, here’s a simple roadmap:
Define Your Users’ Needs: What are users looking for?
Content Audit: Organize and prioritize existing content.
Card Sorting: See how real users naturally group information.
Develop the Sitemap: Create a visual representation of your content structure.
Test and Refine: Use usability testing to identify weaknesses and make improvements.
This Information Architecture (IA) process visually outlines a user-centered approach involving identifying user needs, auditing content, conducting card sorting, creating a sitemap, and iterative testing and refinement to continuously enhance user experience.
Final Thoughts
Practical IA and clearly defined sitemaps are crucial for creating intuitive and enjoyable user experiences. Remember, good design goes beyond visuals, it’s rooted in structure, logic, and empathy for your users.
Embrace iterative design, keep testing, and continuously refine your sitemap and IA. Your users, and your business, will thank you. For a clearer understanding of IA, watch this brief overview from Nielsen Norman Group (NN/g): What is Information Architecture?
Through thoughtful IA, Red Buffalo Ranch’s new website is user-centric, transparent, and inviting, just like the ranch itself.
