Was this helpful?

Custom Design

Creating your own custom design to display Itineraries can create a rich and rewarding user experience and integration within your application or website.

The following guide is provided to assist in the design process by providing a list of requirements to consider in presenting your custom design. By no ways is this a comprehensive list, and you will ultimately have your own considerations of needs for your use case, but we aim to help consider some of the functionality that content teams leverage in creating compelling designed trips, trails and lists.

Docs IconConsider starting with our Design Goals section before jumping in to the custom design topic. This should help understand the problem we are designing for.


The alpaca platform allows content to be attached to a number of elements appearing within an itinerary. This can include the itinerary itself, as well as elements such as the locations appearing within the itinerary.

Basic content for elements include:

  • Title
  • Synopsis
  • Description, controlled by a WYSIWYG
  • Gallery of Media (e.g. Photo gallery)
  • Tags and Attributes covering classifications and additional information
  • YouTube, Vimeo, Soundcloud and Spotify
  • Read more Links

Content Formatting

Users that place in content against a description could express formatting including;

  • H1 / H2 / H3
  • Link, Paragraph, Bulletpoints
  • Blockquotes

Your design should anticipate how your heading hierarchy will work. We recommend you consider the additional hierarchy of the associated title and synopsis separate to the h1, h2, h3 formatting variants.

While the description field can be used for

Docs IconUser of the alpaca travel platform can customise the colours and fonts associated with their profile. See Brand Styling

Key Itinerary Information

Itineraries can contain a number of additional information you will want to allow for presenting. Some common elements you may need to consider displaying include:

Common ContentDescription
Area/RegionThe area or reference to region where the itinerary goes.
Itinerary TypeA short classification of the itinerary, such as Weekend Escape
DurationsA recommended duration (possibly a range )

In addition, depending on the activity, you could consider also displaying additional information based on the activity or type:

Activity ContentDescription
Trail NameA reference to the trail if advertised or signed
Distance / DistancesOutline the distance of the activity, often required if a physical activities
ElevationsConsider the Elevation gain/loss and any minimum/maximum altitudes if relevant for the activity
TerrainConsider describing the terrain and obstacles
Difficulty RequirementsPresent the difficulty or fitness requirements required
Route TypeConsider the requirements logistically around the route; return, open leg, back over path, etc

The content team are prompted to fill in a wide range of fields in order to complete their content to a high standard. You should consider how you display this content within your platform. An approach may be to introduce a number of sections that can expand in your design, allowing for field sections to have a place to be displayed in your design.

Docs IconThese sections are typically populated with a variable width content. You should consider how your design expands to allow additional information to be shown.
Information IconIn addition to content sections with content, Alpaca also collects a number of classifications from the user around their itinerary and type. This assists in organising, filtering and finding content and building listing screens that can locate relevant itineraries.

A number of photos can be uploaded by content creators to help showcase itineraries and locations.

In addition to the photo media that is uploaded, you should provide a design that allows for the content team to attach vital information along with the photo, including:

  • Caption
  • Copyright and Photographer Attribution
Warning IconOften in tourism, photography is heavily licensed and the content team will have obligations to credit and display copyright along with images.

Enhanced Content


The enhanced statistics statistics element allows content teams to inject creativity into their content through highlighting some key representations of stats and data.

The content elements allows teams to;

  • Create a number of label / value metric
  • Associate a Icon (silhouette)

We've seen some excellent use cases, such as highlighting the number of wines tasted, caves explored, and more. These provide content creators flexibility and creative license.

Examples of how this might be used include;

  • Wines Tasted: 4
  • Caves explored: 2
  • Nights: 2
  • Burgers eaten: 3


Users also can create structured highlights. These highlights should be displayed creatively to highlight unique experiences from the itinerary. This technique can help strengthen the thematic appeal and communicate key experiences within an itinerary.


Ultimately, the itinerary presents information to the user around a list. The itinerary will contain a sequence of various types of content to communicate the itinerary to the user.

Designing the way content is listed in an itinerary is a key design challenge.

Common List Structures

When getting started, the immediate considerations should be around what type of list you are presenting:

  • Lists are typically either ordered, or unordered
  • Locations may have directions between them

Typically, you should consider the hierarchy of your list around common content structuring patterns;

List of venues, possibly ordered or un-ordered

  • Venue
  • Venue
  • Venue

Places with optional venues at each location

  • Location
    • Venue
    • Venue
  • Drive/Transport
  • Location
    • Venue
    • Venue
  • Drive/Transport
  • Location

Possible Optional Activities

  • Location
    • Venue
    • Venue
  • Drive/Transport
    • Optional Venue
    • Optional Venue
  • Location
    • Venue
Docs IconIt is also possible to create collections and segments that could represent breaking lists into segments, groups of locations such as grouping options or day by day trip legs.

Locations and Narrative

When displaying locations on the itinerary within a list, it is important to consider the story being told. You may need to consider differences in your presentation such as:

  • Storytelling narrative
  • Highlighting the type of location, such as using an icon
  • Clicking through to more information

A typical location card should consider as a minimum;

  • Title
  • Icon to communicate classification (e.g. stay, eat, etc)
  • Short synopsis
  • Numbering requirement
  • Hero Photo or photos

Optional Stops

Lists can also feature optional stops. These stops are different than your standard presented locations as they can be an optional activity to do along the way if time permits. This can create hierarchy that may look similar


Segments form a mechanism to 'filter' down the current listed content into discrete sections. This could take a list of 50 different types of places, and then allow the user to pull out all the places to eat, or other segments such as parts of a trail.

  • Segments provide an option to display the full list, then reduce the list into parts
  • Segments have broad use cases, such as breaking apart a trip into legs or to filter a list of locations down by groups

Collections and Sub-lists

Collections provide a mechanism to structure your list under a parent called 'collections'.

  • Collections appear within the itinerary, and can be placed beside locations
  • Collections can perform similar content grouping responsibilities as segments
Information IconWhile they appear on first description to be a similar mechanism to segments, the important concept to understand here is that it is hierarchically structured. The collection is placed within the list, and serves to be able to introduce a group of content within the broader list.

Start and End Location

An important consideration when thinking about an itinerary is the start and end location. Typically, an itinerary may suggest a road trip from a gateway town or city to explore a region.

When presenting an itinerary to a user, it is important to recognise that the gateway location may not be the location the user is departing from and is instead used to help guide users around typical driving times from locations.

A consideration in how to present this information may mean that you intend to design the display of the first and last locations differently. It can be difficult for your content team to produce information around start and end-locations when they are instead suggested start locations.

Docs IconAlpaca supports being able to create multiple alternative gateway start and end locations. You may need to discuss this requirement with your content team if they intend to do this.

Location Information

How you present locations is a primary consideration.

  • Provide a design for when users click in to a location
  • Display the narrative for the itinerary
  • Display associated place information
  • Consider how the user navigates back to where they were
  • Consider presenting additional list of content. The location may be town or city, with some recommended things to do in that location before moving on.
Docs IconWhile initially, you may feel the quickest approach is to click out to location information, it can create a undesirable user experience, where the user is removed from the itinerary narrative. Don't be tempted to simply open in a new tab.

Place Information

Place providers can provide a lot of information for you to include in your itinerary. Depending on the focus of narrative and storytelling, such as when showcasing trips, it is important to create separation between place descriptions that are typically generic broad information, and the narrative that may speak directly to the audience of the itinerary. A simple curated list though may be able to avoid the narrative, and simply be presenting a place amongst options for the user to consider.

Generally speaking, place information commonly includes:

  • Address
  • Call to actions: Visit Website, Call, Email
  • Opening Hours, or possibly 'Always Open' if relevant
  • Cuisine types

Other key information will include;

  • Accessibility information
  • Rates (min, max)
Docs IconAgree with your team about the goal of place information. Sometimes it may be limited information just to highlight the place and link somewhere for more information. Alternatively, if someone is following this itinerary in destination, it would be helpful to provide actions such as calling, opening hours, and more.


Consider the call to action buttons that help users with their trip planning or in-destination experience.

  • Links to social accounts, such as Instagram, Facebook
  • Links to visit website
  • Phone Nunmber (with call CTA on mobile - n/a desktop)
  • Link to book

Arrival and Departure

For each location, there is potentially an opportunity to display information about arriving or departing from this location. If your content team has created alternative transportation options for moving between locations, they may want to show more than one arrival or departure transport option.


Alpaca offer an existing designed map style. This design style can be leveraged or customised by our users in order to display itinerary content.

  • Consider whether you want to leverage the Alpaca map style or create your own derivative
  • It is possible to keep the Alpaca map base style, and create your own interactions on top of the style, such as interaction with map markers.


An element often excluded from design is the allowance for various map controls that need to be placed on designs;

  • Scale; allowing the user to determine how far distances area
  • Zoom Controls; Typically used in desktop environments to move in/out of the map and often denoted with a zoom +/-
  • Geolocation; Allow the user to find their location


Mapping clients require the display of attribution, such as a watermark and a copyright notification. By designing your own user interface, it is important to comply with the licensing requirements of the data.

Typically the minimum will include:

  • (c) OpenStreetMap Contributors
  • (c) Made with Alpaca

Additionally, your development team may need to display attribution for other content sources, such as Strava.


Copyright © 2023 - Made with love ❤️ in Australia.