The concept of “Mutant Haven” is based on an existing game “Monster Sanctuary”. Some features and styles were based on the original however all assets included in the final project are original and are created for this project specifically.
Problem space
Stakeholders
User profiles
In order to start thinking about creating my companion app, I first needed to find a reason for its existence and a target audience for it. I have based the problem space as well as user archetypes on my own and other peoples’ experiences with the game “monster sanctuary” and have compiled their playstyles as well as their issues with the game in order to ensure my companion app provides support based on what would seem to be the most popular demand.
The next step was to use my primary research and personalise the user archetypes into user profiles. This helps me envision the problem space in a more humanised manner, assigning a face to the issue has helped me think of personalised solutions to their concerns.
Inspiration images/moodboard
After deciding on what should be included in my app, I started to look into the wiki as well as the official website for monster sanctuary in order to take inspiration from the way they use composition to condense valuable information into 1 easily comprehensible page. Based on prior research, I am aware that it takes a user only approximately 0.05 seconds to judge a website based purely on its design and structure, so I will need to take inspiration and learn from the composition of the examples I compiled in order to keep my users interested in my app.
Official Wiki layout of the monsters, as well as an example of the map and how I could simplify it and label it for my users.
MONSTER WIKI – to, C. (2025). Spectral Familiars. [online] Monster Sanctuary Wiki. Available at: https://monster-sanctuary.fandom.com/wiki/Spectral_Familiars [Accessed 5 May 2025].
MAP WIKI – to, C. (2025a). Keepers’ Stronghold. [online] Monster Sanctuary Wiki. Available at: https://monster-sanctuary.fandom.com/wiki/Keepers%27_Stronghold#Map [Accessed 5 May 2025].
Game guide for the game “The binding of isaac rebirth”, structured similarly as to how I envision my final project, with multiple categories to separate and filter the content better. Every category has an icon next to it featuring an item that fits into the category, making it much easier to identify what the category is before reading it.
Camesc (2021). Guide BOI: Repentance + Afterb. [online] Google.com. Available at: https://play.google.com/store/apps/details?id=com.camesc.isaac&hl=en&pli=1 [Accessed 5 May 2025].
A guide for the game “Genshin impact” with a more modern looking dark mode UI.
Genshin Assistant (Unofficial) – apps on Google Play. (n.d.). https://play.google.com/store/apps/details?id=com.kagura.genshin.assistant&hl=en
A guide for the game “Animal crossing”, the inclusion of rounded shapes and unsaturated colours gives it a more friendly and harmless interface which perfectly goes with the cozy vibe of the game.
Sy, G. (2021). Unofficial ACNH.Guide. [online] Google.com. Available at: https://play.google.com/store/apps/details?id=dev.genesy.animalcrossingnhguide&hl=en [Accessed 5 May 2025].
Colour and design considerations
Layout and colours of the wiki detailing important information about a monster, both things that I could use as inspiration for my own app.
to, C. (2025c). Vaero. [online] Monster Sanctuary Wiki. Available at: https://monster-sanctuary.fandom.com/wiki/Vaero [Accessed 5 May 2025].
The official real life monster journal released as merchandise by Moi Rai Games (the creators of monster sanctuary). The pages feature official artwork from the game and provide a lot of valuable information like monster variants and move sets. The beige colour of the pages make them seem very medieval which fits with the time period of the game. This has gotten me to consider the aesthetic of my app based on the time period and vibe of the fictional game I have in mind.
Moi Rai Games (2022). Monster Sanctuary. [online] Monster-sanctuary.com. Available at: https://monster-sanctuary.com [Accessed 5 May 2025].
I was a big fan of the colour schemes of these 2 companion apps, so by colour picking these screenshots of the UI I have created 2 very distinct but pleasant colour pallets. I am leaning towards the second one, despite it having a lot of colours, it is way less limiting due to that factor. Those colours also create a good harmonious design where the colours are not battling for attention and instead sit together very naturally even with their own distinct purposes (like the beige being the background elements whilst the green being the interactive/highlighted elements).
Other references.
- How Mobile Gaming Companies Make Money. (2016). Stakeholders and Power in the Mobile Gaming Industry. [online] Available at: https://howmobilegamingcompaniesmakemoney.wordpress.com/2016/10/24/stakeholders-and-power-in-the-mobile-gaming-industry/ [Accessed 5 May 2025].
- Bentley, R. (2023). Website first impressions – you have just 0.05 seconds to impress. [online] Michon Ltd. Available at: https://michoncreative.co.uk/articles/website-first-impressions-you-have-just-0-05-seconds-to-impress/.