The Shadow of Ayrshire
Empowering players to cope with anxiety through interactive story-telling.
OVERVIEW
An interactive visual novel that spreads awareness on coping with anxiety in young adult Australians through choice-based scenarios.
Role
UI/UX Designer
Team
Solo
Timeline
6 Months
DESIGN CHALLENGE
How might we create an interactive visual novel that spreads awareness on anxiety and increase engagement?
SOLUTION PREVIEW
Eye-catching menu screen with animated gusts of wind and text.
The title on the menu stands out when a user launches the visual novel game. Visuals and sound increases user engagement. They can access saved files, GUI & sound options to create a better user experience.
Colourful, visually appealing artwork and fun interactions with characters throughout the story.
Lively imagery and animated character expressions increases interest and desire to continue playing.
Choices influence the outcome of the story.
Users are taken on the character's journey and their choices during encounters influence the story as well as character's lives.
Certain scenarios require more than one choice to assist the character.
To increase engagement and maintain user's interest, some scenarios require more than one choice to influence the story's outcome.
Research Methods
-
User Interviews
-
Contextual Reviews
-
Prototype Testing
-
Persona & Empathy Map
Research
Context
‘The Shadow of Ayrshire’ is a visual novel that incorporates quest elements. The visual novel is an interactive narrative that highlights the theme of anxiety experienced in young adults; it uses a rewind feature to reverse time and correct the user’s mistakes. It utilises an extent of the ‘choose-own-adventure’ experience. Within the story, the visual novel incorporates anxiety coping methods in which the user interacts with to progress the story and learn from. For instance, the user would encounter an enemy which would cause the main character to experience an anxiety attack. The user would then help the game character by choosing correct coping choices in this sequenced interactive activity. However, if the user chooses incorrectly, they can rewind time to change their decision and progress through the narrative. The user would be able to learn from the anxiety coping methods and adopt it into real-life practices and spread awareness.
User Research
I interviewed a focus group of 25 users who are between the ages of 15 - 25 years and have experienced anxiety at some point in their lives. The interview data is used to support my research for anxiety in young adults and to empathise as well as understand the user needs.
Key questions during the interview were asked:
-
Do you experience anxiety and how often do you experience it?
-
Have you ever used calm or destress apps to help with anxiety?
-
Have you come across any visual novels or games that spread awareness on anxiety?
The users reported their experience with anxiety and the results are as follows:
80%
Experience anxiety frequently
60%
Used calming apps
20%
Used games that spread awareness on anxiety
Majority of the users reported that they experience anxiety on a frequent basis and used calming apps to help calm them down or used as a distraction. The latter advised they used breathing techniques and focus on things in their environment. Lastly, a small part of the group used visual novels or PC games that spread awareness or highlighted themes of anxiety.
With these results, there is a gap within the interactive visual novel industry that highlight mental health involving anxiety or spread awareness on these issues.
Target Audience
The Shadow of Ayrshire’s intended target audience for users is between the age of 15 – 25 years and it aims to create a new approach to mental health and to become a game for change. From the user research, I created a persona and empathy map to help keep the focus of the project and goals.
User Persona:
Empathy Map: Angela Tiley
Each persona has their own specific wants, issues and motivations but they all share the same goal. Personas and empathy maps help keep focus of the project and give it identity, it also allows insight of user needs as well as providing constraints.
Scope
The scope of my project focuses primarily on two things: narrative engagement and mental health awareness. The visual novel storyline must move and impact the user as well as spreading awareness on how to cope with anxiety, panic attacks and triggers, their symptoms as well as understanding it.
Constraints
The project must have a short engaging story that explains to the user how to cope with anxiety and have a level of interactive elements. The UI has to be executable for coding in Ren’py and the landscape & art style has to be consistent throughout the novel to not break user engagement.
Findings
I researched anxiety in young adult Australians and anxiety coping mechanisms to better understand my target user and how construct my project to spread awareness in a positive way.
Anxiety is an increasing concern in young adult Australians aged 15 – 24 years old. As of 2018, 1 in 5 (20%, or 4.8 million) Australians reported that they had a mental health condition. The youth is more susceptible to obtaining anxiety disorders, depression, and other mental health disorders. Although anxiety is more prominent in young females, the project is aimed at young adult Australians to be inclusive.
Coping mechanisms to help with anxiety are using deep breaths, 54321 grounding technique, smelling lavender, counting to 10 and speaking to loved ones. There are more coping mechanism options, however, I chose the first 3 of these options as it is more accessible to users and makes sense within the visual novel narrative.
Contextual Reviews
I conducted a contextual review of three interactive games/experiences that spread awareness on anxiety.
I was inspired by Anxiety Attacks as it aims to simulate an anxiety attack experience to spread awareness, and uses dark colours to enforce that theme. The user would develop an attack when walking into obstacles and would need to press keys in a timed sequence to calm down. However, the simulation is not replayable and does not explore other avenues to cope with anxiety. The Shadow of Ayrshire would educate the user on other coping methods.
With Irrational, the RPG game uses a pixeled aesthetic with warm colours and introduces characters along the user's journey. However, the panic attack scenes are quite intense and can trigger people who do have anxiety when playing the game. The main character's coping mechanism is only seeking refuge in her cat which can be unrealistic for the majority.
Lastly, My Oasis is a calming, stress relieving app that is a distraction for users from reality. The cool colours induce a calming effect along with the music and the process of building your oasis is therapeutic. However, the process involves a continuous loop of repetitive tasks to gain rewards. In which can cause users to be deterred from the app in the long run and it does not educate users to cope with their anxiety but to be distracted from it.
Key Aspects
The Shadow of Ayrshire is an interactive and visual novel game that uses a rewind feature. The narrative will use the Gauntlet approach, this will be beneficial for the user when they make the 'wrong' decision and will be transported back to the moment of the decision to make the 'right' choice. This will prevent any triggers from users and to prevent any dissatisfaction as the aim of the project is to convey the moral of the story in a positive way.
Narrative Arch
DESIGN PROCESS
As a UI and UX Designer, I created wireframes to better understand the visual novel and how it would be presented.
Initial Wireframes
As the visual novel uses the same dialogue format, I created wireframes below illustrating the game main menu screen, story dialogue, story choice scenarios and GUI screens.
Ayrshire World Map - World Building
I created a fictional map of the land of Ayrshire to enhance world building and add depth to the visual novel.
Ayrshire is situated where the elves live, they are associated with nature and magic. The land is divided up between 8 regions and they are protected by the Eight Guilds of the Night, Valinor as the top guild. Each guild name represents a type of Elvish tree. They protect the elves from Shades which are evil shadow creatures which prey on fear, anxiety and feed off souls. Shades are active after dusk as they are more powerful in the dark.
The Shadow of Ayrshire is situated in the land of elves and protected by eight guilds, each name meaning an elvish tree. These guilds unite and fight their common enemy, the Shades, they are evil shadow creatures that drain souls. The Shades have not been in Ayrshire for centuries until now
Background Art
For my project and to enhance world building, I used bright vibrant colours for calm and 'happy' scenes to contrast the 'dark' enemy encounter scenes. The flat design and bright aesthetic conveys a fantasy world and to engage the user. I used Illustrator to create these scenes and sourced some free stock assets to create background art.
Character Art
For character design, I used an anime style as it great style to convey expressive emotions and to keep the fantasy aesthetic throughout the visual novel.
Nymra - Main character who deals with anxiety
Reuben - Brother of Nymra and is a second class ranger
Samwise - Nymra's best friend and support, also a first class ranger
Shade - Antagonist and invokes fear in Ayrshire
Feedback
The users liked the artwork and style, they thought the process to navigate the novel is simple and easy to use. However, they stated a few changes would improve the design and experience:
-
Buttons: Change the colour and text to match the forest-fantasy theme.
-
Dialogue box: Each character speaking has a different coloured name to help differentiate who is speaking.
-
A High-Fidelity version to test.
Final Screens
Final Usability Testing
The users navigated through the visual novel and had extremely positive feedback regarding the story, visuals and the theme of anxiety addressed throughout the story.
The overall feedback was very positive and the users were engaged throughout the story. The navigation is simple with a click system, users can adjust their game volume and text speed to their preference. However, the some of the users requested more choices in the story to give them more scenario variety.
Please see & download the visual novel here:
Project Takeaways
Throughout this process, I enjoyed researching how anxiety occurs as well as understanding it more. I loved creating the UI side of the story and coding in Ren'py, seeing the work fleshed out became very exciting as this research project took months to make. I learned a few things from this project, but I had many obstacles along the way.
Time management.
During the making of this project, I severely overestimated and underestimated my time spend on different sections of the project. Especially with the artwork, creating both the character and background art took a few weeks longer than it was originally planned for. I become too much of a perfectionist with the art as some character anatomy was disproportionate or background features did not sit well in the scene. In future, I will construct a better timeline and be honest with myself regarding time in project areas.
Focus on strengths.
I was stuck on which tools I need to use to make this project successful which caused me to waste time on the project. I could not decide whether to use my new Procreate tool on my iPad to draw images or use Illustrator, however, I am more well versed with Illustrator than hand-drawn images. I also spent time learning Twine to code my project but could not grasp the coding language, within the last few weeks of the project, I opted for Ren'py to code my work as I found it easier to use and understand. I will need to invest time learning other softwares to be fully comfortable applying effectively in projects.
Fully understand the project deployment.
As I was short on time and changed software, I did not broaden my investigation in the deployment section. I originally wanted the visual novel to be accessed through a HTML web browser instead of being downloaded. There was a lack of Ren'py tutorials at the time and I did not know how to incorporate HTML code into Ren'py effectively. In future, I will manage my time better to fully understand the software and its output it produces. Even though I wanted it to be accessed via web browser, it was still successful being downloaded as the platform its hosted on - GameJolt and Itch.io - is mainly for downloadable games.