Figma Link
Initial Ideas
BF4BF is an app centered around the k-pop boy group named BOYFRIEND.
The initial idea behind this app is that its purpose is to have information on different music artists easy to access for fans, and also to allow for creativity and communication to grow amongst the fanbase. This app is called BF4BF because it specifically focuses on the K-pop group under the name of Boyfriend (or BF), and their fanbase is named “Bestfriends” therefore I wanted the title of the app to reflect the core purpose of the app.
Mission Statement
“We inspire, encourage and foster fan creativity for the bands fans feel passionate about. We also promote the hard work of the artists and celebrate it through this app.”
BF4BF Mission Statement
Personas & Target Audience
The target audience of BOYFRIEND are mostly young adult women and older teenagers, similarly to most other k-pop bands. However, when creating personas for the BF4BF app, I wanted to consider the different types of fans that would benefit from the app and how their experiences may differ based on how long they were fans, what apps are they familar with, and what do they contribute to the fandom. I have decided to split the personas into two categories – a person who is looking for social connection to talk to other fans, and someone who wants to share their creativity.
Competitors
For this task, I have decided to focus on apps that revolve around k-pop archive and fan apps, as well as the most commonly used social media websites. The reason that I have focus on these two types of apps is to ensure that the user is familiar with the interface before even using it. This is the reason why I did not want to make the app completely different and unconventional as it would be difficult for the user to adjust to it.
Accessibility
For an app to be considered accessible, it has to carefully consider how the features are presented to stop any audience from feeling alienated – for example, the text should be legible and clear to understand to stop any confusing from arising. Also, one thing that must be taken into consideration are the colour combinations – there should be enough contrast for a colour blind person to be able to get the meaning of the elements included in the app, and the colours should not be used as a substitute for elements that can explain functions (for example, call-to-action buttons or icons could be used instead).
Moodboards
In this moodboard, I chose to focus on specific features that are common amongst “fandom” apps, such as Weverse, [] FANS, and SMTOWN. My main priority was to make the app convenient to use frequently, in the same way that a person would check their regular social media – in order to do this, I made sure to place the most common features in the most convienient places where the user’s thumb can reach to access the app easier. Also, I have selected some of the more iconic album covers of Boyfriend, since the app is themed around them and it is important for the app to be cohesive in terms of branding and style.
Style & Colour
When it comes to the colour palette for BF4BF, I have decided to select colours that appeared often in Boyfriend’s album covers and logos in order for the user to recognize similarities between the design styles of the BF4BF app and the graphic design used to represent Boyfriend’s music. The logo that I created for BF4BF consists of a script font being modified to look like a music note, as well as drawing similarities to Boyfriend’s logo for Janus (2012). I have used the pink gradient, which will be a common element in the app and website’s design, because it creates a connotation of elegance and dimension. As for the font, I have decided to choose the SF Pro font as it is commonly used in iOS apps and it fits with the slightly elegant style that the logo was going for. Also, it is clear and legible, which is extremely important in the context of being the body text on an app as the users will have to read all of the text in that font.
The colour palette for BF4BF consists of dark blue, red, pink and light purple – I have tried to pick complimentary colours which match the colours that are commonly used in BOYFRIEND’s graphic design so that it fits the user’s perception of them. I have tried to follow the 60-30-10 rule which, according to Lopez (2023), is used as a design tool to distribute the colour in an app in a balanced way to achieve the effect that it is aiming for. For example, I have made sure that anything that is meant to be clicked or pressed by the user is in a bold colour such as the dark blue or red.
Referencing
Lopez, J. (2023) The 60–30–10 rule: a foolproof way to choose colors for your UI design. Available online: https://uxplanet.org/the-60-30-10-rule-a-foolproof-way-to-choose-colors-for-your-ui-design-d15625e56d25 [Accessed 4/4/2024].
Meta Platforms, Inc. (2024) Facebook (Version 465.0.0.63.83) [Mobile app]. [Accessed 12/5/2024].
Pinterest (2024) Pinterest (Version 12.19.0) [Mobile app]. [Accessed 12/5/2024].
WEVERSE COMPANY Inc. (2024) Weverse (Version 2.16.17) [Mobile app]. [Accessed 12/5/2024].
Space Oddity (2024) Blip (Version 4.11.2) [Mobile app]. [Accessed 12/5/2024].
SM ENTERTAINMENT (2024) SMTOWN (Version 4.0.8) [Mobile app]. [Accessed 12/5/2024].
JYP Three Sixty Corporation (2024) FANS (Version 1.2418.8) [Mobile app]. [Accessed 12/5/2024].
Daum Cafe for BOYFRIEND (2020) Boyfriend Fancafe. Available at: https://cafe.daum.net/BOYFRIEND [Accessed 12/5/2024].
Imagery
BOYFRIEND (2012) Janus [Digital]. Starship Entertainment.
BOYFRIEND (2012) Kimi to Dance Dance Dance / My Lady ~Fuyu no Koibito~ [Digital]. Being Group.
BOYFRIEND (2011) I’ll Be There [Digital]. Starship Entertainment.
BOYFRIEND (2019) Boquet [Digital]. Starship Entertainment.
BOYFRIEND (2013) Pinky Santa [Digital]. Being Group.
BOYFRIEND (2012) Love Style [Digital]. Starship Entertainment.
BOYFRIEND (2012) Be My Shine [Digital]. Being Group.