Creating context for unified visual design and user experience
In 2019, Velcrobelly had the pleasure of collaborating with Flo-Culture on the design of an app promoting tourism and exploration of Alston, a rural market town in the North Pennines Area of Natural Beauty.
Exploration and discovery
In the early stages of design development for Alston Explorer, the creative team at Flo-Culture determined a range of activities our users were going to participate with, the location of those interactions, and the types of content they would experience.
What we didn’t yet know was why they should participate – beyond proximity to the Alston area and awareness of the app itself.
Alston Explorer comprised two distinct strands of content:
- Information about Points Of Interest in the area (POI’s)
A mix of text, images, audio recordings and video content - Interactive tasks
A series of in-app activities, puzzles and challenges. Their successful completion rewards the user with a point score, medals and trophies
Our research had determined that the app’s target audience was primarily families with young children (and pets!). Content from strand 1 would likely appeal most to adults while the interactive tasks in strand 2 would be the main attraction for younger app users.
How could we ensure that both strands where cohesive and appealing?
Our solution was to create context for the user experience through narrative.
Although not a story-based game, we created a simple background scenario to provide structural narrative for the user experience.
Welcome to Alston A.C.E.S – The Adventure, Challenge and Exploration Society
A.C.E.S. was an adventurers society, established in 1745. The Alston branch was searching for adventurous and inquisitive young people to help build their archive of local knowledge and encourage exploration.
The Alston branch of A.C.E.S. is headed by Tassie Mapsalot; an adventurous young woman who challenges our users with interactive tasks and provides them with local information. Working alongside Tassie is her trusty companion, Fletcher Rouge, a red squirrel who provides clues and unwavering enthusiasm for our users.
Using narrative to create context for design
The narrative scenario for A.C.E.S. allowed the creative team to tap into archetypes for explorers and adventurers; and redesign them to modern standards of social accessibility and inclusion.
Tassie’s design was heavily influenced by Gertrude Bell, in particular her hair, which has been wildly exaggerated like the mutton chops on an archetypal 19th century explorer. She presents a positive visual focal point for our young users.
When designing Fletcher Rouge, we chose an animal with positive emotive characteristics which would also be native to the Alston area. Fletcher provides support to our users and his depiction with a human-sized mobile phone adds a sense of scale and humour to the overall design.
Our character design extend into the rewards system. When a user completes a task they receive a medal or trophy. Using our characters, we were able to create unique rewards which reflect the achievement or location while building on our narrative of an historic exploration society.
Our user research determined that young players love shiny, elaborate reward icons – and this connected perfectly with a historic society displaying their trophies in a wooden display case.
The creative team made several trips to Alston; to take photographs and get a sense of the town’s aesthetic.
This was incredibly useful when designing the app as it allowed us to create a visual representation of Alston, in a stylised form, which would be recognisable to our users as they walked our trails.
Alston is a town of texture. It’s hardy and weathered. There are many different types of stone and timber present throughout the buildings, cobbled streets and dry-stone walls. The surrounding fields and hills appear to layer in parallax.
It feels like a town where an adventure society could establish in 1745 – and in point of fact that date was chosen for it’s historic relevance to Alston.
The aesthetic of the town in conjunction with our simple narrative is represented through design.
Container element backgrounds are comprised of texture – stone, wood, metal or paper – to represent the aesthetic of Alston and to convey the narrative of an established exploration society. No surface is pristine – this is a hardy app for adventurers on the go!
Using narrative to create content context
Our narrative scenario provided context for why users were interacting with our app.
Through an on-boarding process when first using Alston Explorer, our users are welcomed into A.C.E.S. by Tassie Mapsalot. Tassie asks our users to choose a name and avatar.
Throughout the app, Tassie presents our users with challenges at Points of Interest (POI’s), explaining why the task is a beneficial skill for budding explorers, and how successful completion will improve the A.C.E.S. archive of local knowledge.
To solve some challenges our users must refer to video, audio and text content about the POI they are visiting. Tassie herself also speaks to the user through some audio content.
The vernacular Tassie uses was inspired by explorer archetypes and her own visual design.
Her written content was edited to reflect her character and can-do attitude; which results in cohesive balance between what our users are reading and what they see represented through visual design.
Through focus group testing we refined Tassie and Fletcher’s vernacular so that it would resonate with our target audience of young people. We wanted to ensure that it was inclusive and encouraging, while retaining a sense of character and place.
We learned that not all young people are familiar with ‘pip-pip’ and ‘tally-ho!’ as phrases, so while vernacular can create context it must be tailored to suit the target audience – and not just the whims of a forty-something designer who grew up with Eagle comics, Indiana Jones and Blackadder Goes Forth.
A simple narrative device provided the Alston Explorer design team with the context to create a rich visual and verbal language; and helped to integrate user interaction with interface and content.
Tally-ho, Explorers!
Alston Explorer is available to download for free from the App Store and Google Play.