Custom Design

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.

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

Content

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

User 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:

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

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.

These sections are typically populated with a variable width content. You should consider how your design expands to allow additional information to be shown.

In 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.

Photo Gallery

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

Often in tourism, photography is heavily licensed and the content team will have obligations to credit and display copyright along with images.

Enhanced Content

Statistics

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

Highlights

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.

List

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

It 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

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

While 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.

Alpaca 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.

While 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)

Agree 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.

Actions

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.

Map

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.

Controls

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

Attribution

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.