Design and Research
I have decided to create a mobile companion app for the video game series Persona. This is because I have a lot of respect for the game series and have many ideas how to develop an app around it. When creating a Figjam board to come up with ideas, I decided to make a general idea in the middle, and split off from there.
It was thought best to decide on an intended audience first. Considering the Persona series has a lot of dark themes, then its best to stick to the general age rating, which is around 16-18. Of course, I want to go further than that, as a lot of adults like the series as well. Along with this, I made 5 Personas of what I would like in terms of an audience and what I’m trying to market towards.
On the Inspirations/Design Mood Board, I have used screenshots from the game series, specifically of menus from Persona 3 Reload and Persona 5 Tactica, along with pictures of an area called The Velvet Room from Persona 3, Persona 4 and Persona 5, and menus from Persona 3 Reload’s Velvet Room, and finally a logo of The Velvet Room. All of these images are copyright and are owned by the company Atlus. The Velvet Room is the main source of inspiration as it is a prominent area in each game and has a major role in each game. Along with this, the style is very unique and helps connect each game.
When looking into competitor research, it was best to look at other big apps that might help with layout like Disney+ (copyright of Disney) and Amazon Prime (copyright of Amazon). After that, going more specific was considered the better option. Which is why the Nintendo App (copyright of Nintendo), the Xbox App (copyright of Microsoft), and the Playstation App (copyright of Sony) are there. They are all based on video games, specifically video game companies, and would give a better idea of layout. However, it may also be best to look at video game websites as well.
When doing the colouring and styling, the best option was to take colours from each main series game, but specifically all the colours used in The Velvet Room as they will be the main one used. Velvet Blue and Gold will be the main two colours, with Velvet Blue being the more dominant. And then black and white will be used as borders to help everything stick out. When it comes to the styling, it is best to use sharp corners as they help everything stand out and have a personality of their own, while keeping true to the series style. Lastly, smooth animations are great as they compliment the sharp style and smooth animations are a staple of the series.
Lastly, it was best to have a small area dedicated to concept designs for what the app might look like, as to give an idea of what should be done. Of course, these are just incredibly simple concept designs and will most likely get replaced. But its best to have an idea of what to do.
User Flow and U.I Framing
When coming up with User Flow and U.I Framing, it was best to consider what type of app this would be in the first place and what was necessary. It was decided that the app would be used to help give information about the series and its characters, along with presenting the style of each game in a visual way.
Thanks to this style and layout choice, there is no need to include a log in page or any type of sign in, as there is nothing that will be or needs to be personalised. This might also help with people’s opinions, as there are some people that don’t like giving personal information or logging in, so that will help with public perception.
With each game, I want to try and replicate the style of every single game, while keeping the normal theme uniting them all. While this will be difficult, I think every game should have a chance to show its style as the persona series is famous for all its styles.
Lastly, the about section will be used as a place for a general explanation and where to find each game and what they’re all available on, as I feel this is necessary for advertising purposes.
UI Prototyping for Mobile Application
Mobile App Figma Design: https://www.figma.com/file/flcdeZnFEX3KuKWW23hhfq/Persona-Velvet-Room-app?type=design&mode=design&t=rZSzExwqhLZ4jLwn-0
When designing the website, the main idea was to capture the look and vibe of The Velvet Room overall. Thanks to it being a reoccurring area in each persona game, it was thought that it’d work well as a uniting theme and design.
When designing the home menu, the goal was to make an overall introduction of each game before getting more into each story and all characters, along with saying when the games released. The home menu is also the only time Persona 1 and 2 get mentioned. This is because the team that worked on them is a different team to the current persona team, along with the games not getting as much attention as the main 3 from Atlas themselves.
When it came to the menus for both the Story and Characters sections, it was important to capture the feel and animations of each game in a simplistic form. In Characters, it was decided to include each main character as a small introduction, along with each tarot card that’s used in the game to represent them, as Tarot Cards are a very important part of the games. While in stories, the cover art for each version of each game was included to give something visual to look at.
Lastly, In the About section, after a quick overall explanation of what Persona is, it was best to show where Persona 3 through 5 could be bought and what it was available on, as the main goal is to get people to get into the series and buy the games.
Overall, this mobile app achieves what I wanted it to and gives a good showcase of every persona game (minus 1-2), and would potentially get people to get into the series and buy it.
Adapting Your Design for Web Deployment
Website Figma Design: https://www.figma.com/file/7ZrRiL2XLsEQ0q0FYLs2ZR/Website-design?type=design&mode=design&t=rZSzExwqhLZ4jLwn-0
WordPress Web Development: https://price-bateman-2023.hulldesign.co.uk/2024/05/08/web-design-development/
When designing the website, I decided to keep most design choices made on mobile on the website, but added more side stuff and designs that wouldn’t work on an app. This is because both the app and website serve the very same purpose of getting information of the series out there. Also, it was decided to keep all writing and information the same on each, as locking information on one wouldn’t help the goal I’m trying to achieve.
While the backgrounds are very similar to the mobile app, it was decided that they should be expanded to fit the pc instead of simply making the mobile art bigger. To not use the pc background and size to its advantage would have made it worse than it is now. Along with this, unlike the writing and background elements made on Figma, the specific backgrounds were made on Photoshop, so changing their size to fit a pc would have messed with the quality heavily.
I decided to include Personas on thew website thanks to the improved space and as its a nice added detail the website can have without having to say anything about them, keeping to app and website having the same information.
The Tarot Card border helps keep stuff in the middle, while keeping the website interesting and centring the information. Tarot Cards are a massive part of the series, and while they were used in the character bios, it was best thought that they and to be somewhere thanks to their importance. Thanks to them being a uniting theme throughout the series, their role as a border suits every theme used. Along with this, only using them in the character bios would’ve left a lot of tarot cards with no role or place, and including them anywhere else would’ve had them serve zero purpose.
When looking at inspirations, I looked back at the Nintendo, PlayStation and Xbox websites that began the design process on Figjam. However, I also decided to look at the official persona web pages, specifically the ones dedicated to Persona 5 Royal and Persona 4 Golden. Once I saw how they showed the characters, I decided to use a similar way of showcasing information. This definitely influenced my decision to include persona characters on my website.
Overall, the website achieves its purpose of being a version of the app that’s been adapted to a desktop/iPad. Just like the app, it conveys all the information it needs to well while having improved design choices to suit a website.
References
Atlas (1996), Revelations: Persona, Available Online: https://www.retrogames.onl/2022/02/persona-ps1-play-online.html (accessed on 06/05/2024)
Atlas (2009), Shin Megami Tensei: Persona, Available Online: https://www.emulatorgames.net/roms/playstation-portable/shin-megami-tensei-persona/ (accessed on 06/05/2024)
Atlas (1999), Persona 2: Innocent Sin, Available Online: https://www.ebay.co.uk/itm/386251436202?chn=ps&_ul=GB (accessed on 06/05/2024)
Atlas (2000) Persona 2, Eternal Punishment, Available Online: https://www.amazon.com/Persona-2-Eternal-Punishment-PlayStation-Sony/dp/B00004WLZ7?th=1 (accessed on 06/05/2024)
Atlas (2011), Persona 2: Innocent Sin (PSP), Available Online: https://uk.webuy.com/product-detail/?id=5036675013910 (accessed on 06/05/2024)
Atlas (2012), Persona 2: Eternal Punishment (PSP), Available Online: https://github.com/sayucchin/P2-EP-PSP/ (accessed on 06/05/2024)
Atlas (2006), Persona 3, Available Online: https://uk.webuy.com/product-detail/?id=SLEGPS2S1407B (accessed on 06/05/2024)
Atlas (2007), Persona 3 FES, Available Online: https://uk.webuy.com/product-detail/?id=SLEGPS2S1408C (accessed on 06/05/2024)
Atlas (2009), Persona 3 Portable, Available Online: https://store.steampowered.com/app/1809700/Persona_3_Portable/ (accessed on 06/05/2024)
Atlas (2024), Persona 3 Reload, Available Online: https://store.steampowered.com/app/2161700/Persona_3_Reload/ (accessed on 16/4/2024)
Atlas (2008), Persona 4, Available Online: https://www.amazon.co.uk/Shin-Megami-Tensei-Persona-PS2/dp/B001Q9EK82 (accessed on 06/05/2024)
Atlas (2014), Persona 4 Golden, Available Online: https://store.steampowered.com/app/1113000/Persona_4_Golden/ (accessed on 06/05/2024)
Atlas (2016), Persona 5, Available Online: https://www.amazon.co.uk/Persona-5-for-PlayStation-4/dp/B01GKHJP98?th=1 (accessed on 06/05/2024)
Atlas (2019), Persona 5 Royal, Available Online: https://store.steampowered.com/app/1687950/Persona_5_Royal/ (accessed on 06/05/2024)
Atlas (2023), Persona 5 Tactica, Available Online: https://store.steampowered.com/app/2254740/Persona_5_Tactica/ (accessed on 16/4/2024)
Disney (2019), Disney+, Available Online: https://www.disneyplus.com/en-gb (accessed on 16/4/2024)
Amazon (2005), Amazon Prime, Available Online: https://www.amazon.co.uk/amazonprime (accessed on 23/4/2024)
Nintendo (2018), Nintendo Switch Online App, Available Online: https://lounge.nintendo.com/ (accessed on 23/4/2024)
Sony (2011), Playstation App, Available Online: https://www.playstation.com/en-gb/playstation-app/ (accessed on 23/4/2024)
Microsoft (2013), Xbox App, Available Online: https://www.xbox.com/en-US/apps/xbox-app-for-pc (accessed on 23/4/2024)
Atlas (2022), Persona 4 Golden Webpage, Available Online: https://persona.atlus.com/p4g/?lang=en (accessed on 08/05/2024)
Atlas (2021), Persona 5 Royal Webpage, Available Online: https://persona.atlus.com/p5r/?lang=en (accessed on 08/05/2024)