Figma Link
High Fidelity App
After developing the functional mid-fidelity prototype, I have then proceeded to make it high-fidelity and stylized by applying the colour palette that I have established earlier; applying different shading and borders to make the design more dynamic, as well as adding images in the gallery spots to make it feel complete. I have decided to only add official images and scans of BOYFRIEND’s albums to fit with the entire idea of the app – providing reliable information for the fans.
When it comes to the functionality, I have fixed any small errors with routing and way finding to make sure that the user experience is as smooth as possible and for example, that the ‘back’ button leads back to the correct page to avoid user confusion. In addition, I have added some smaller details to make the app feel more fleshed out, such as the translation button for example (although it would be an important function if it was a fully interactive app).
The navigation bar that I ended up using includes the home page, the calendar, the “add new…”, community and user. I have tried out multiple combinations of features to be included in the navigation bar but decided to choose those five. This is because theywould probably be the most commonly used features, therefore I wanted them to be within a thumb’s reach for the user.
I have ensured that all of the icons are of a similar art style (a combination or round and angular with thicker lines) in order to avoid user confusion. When it comes to the call-to-action buttons, I have tried to make them stand out against the background in order to let the user know that it is fully clickable. I have added contrast between the text and the background in order for it to be easy to read for as many people as possible.
References, Imaging, Sources
K-Profiles Forum (2024) Forum. Available at: https://kprofiles.com/forums [Accessed 12/5/2024].
K-Pop Fandom Wiki (2024) BF/Gallery. Available at: https://kpop.fandom.com/wiki/BF/Gallery [Accessed 12/5/2024].
Generasia Wiki (2024) BF (Group). Available at: https://www.generasia.com/wiki/BF_(group) [Accessed 12/5/2024].
K-Profiles (2024) Boyfriend Members Profile. Available at: https://kprofiles.com/bf-boyfriend-members-profile [Accessed 12/5/2024].
mxmbwhwn514 (2024) Photograph of Boyfriend albums for sale. [Photograph] Available at: https://twitter.com/mxmbwhwn514/status/1795301585486303426/photo/1 [Accessed 28/5/2024].
BFofficial_JP (2024) Photograph of the k-pop group BF. [Photograph] Available at: https://twitter.com/BFofficial_JP/status/1794743787602022676/photo/1 [Accessed 28/5/2024].
BFofficial_JP (2024) Photograph of the k-pop group BF. [Photograph] Available at: https://twitter.com/BFofficial_JP/status/1794565125934133660/photo/1 [Accessed 28/5/2024].
BOYFRIEND (2011) Boyfriend [Digital]. Starship Entertainment.
BOYFRIEND (2011) Don’t Touch My Girl [Digital]. Starship Entertainment.
BOYFRIEND (2011) I’ll Be There [Digital]. Starship Entertainment.
BOYFRIEND (2012) Love Style [Digital]. Starship Entertainment.
BOYFRIEND (2012) Janus [Digital]. Starship Entertainment.
BOYFRIEND (2012) Be My Shine [Digital]. Being Group.
BOYFRIEND (2012) Kimi to Dance Dance Dance / My Lady ~Fuyu no Koibito~ [Digital]. Being Group.
BOYFRIEND (2013) Pinky Santa [Digital]. Being Group.
BOYFRIEND (2013) Hitomi no Melody [Digital]. Being Group.
BOYFRIEND (2013) I-Yah [Digital]. Starship Entertainment.
BOYFRIEND (2013) Seventh Mission [Digital]. Being Group.
BOYFRIEND (2013) On & On [Digital]. Starship Entertainment.
BOYFRIEND (2014) My Avatar [Digital]. Being Group.
BOYFRIEND (2014) Obsession [Digital]. Starship Entertainment.
BOYFRIEND (2014) Witch [Digital]. Starship Entertainment.
BOYFRIEND (2014) Start Up! [Digital]. Being Group.
BOYFRIEND (2014) Seventh Colour [Digital]. Being Group.
BOYFRIEND (2015) Boyfriend in Wonderland [Digital]. Starship Entertainment.
BOYFRIEND (2016) To My Bestfriend [Digital]. Starship Entertainment.
BOYFRIEND (2016) Glider [Digital]. Starship Entertainment.
BOYFRIEND (2016) Jackpot [Digital]. Starship Entertainment.
BOYFRIEND (2017) I Miss You [Digital]. Starship Entertainment.
BOYFRIEND (2017) Never End [Digital]. Starship Entertainment.
BOYFRIEND (2018) Sunshower [Digital]. Starship Entertainment.
BOYFRIEND (2018) Try My Wings [Digital]. Starship Entertainment.
BOYFRIEND (2018) Call Me [Digital]. Starship Entertainment.
BOYFRIEND (2019) Boquet [Digital]. Starship Entertainment.
BF (2021) Adonis [Digital]. Cross Phase Inc.
BF (2021) Ending Credit [Digital]. Cross Phase Inc.
BF (2022) Canvas [Digital]. Cross Phase Inc.
BF (2023) Curtian Call [Digital]. Cross Phase Inc.
BF (2023) That Day in May [Digital]. Cross Phase Inc.
Birkett, A. (2024) Palm trees [Photograph]. Available online: Unsplash via Figma. [Accessed 6/5/2024].
Loughlin, R. (2024) Beach [Photograph]. Available online: Unsplash via Figma. [Accessed 6/5/2024].
Leung, J. (2024) Blue pattern [Photograph]. Available online: Unsplash via Figma. [Accessed 6/5/2024].
Kharawala, R. (2024) Hamster [Photograph]. Available online: Unsplash via Figma. [Accessed 6/5/2024].
Hocking, S. (2024) Frog [Photograph]. Available online: Unsplash via Figma. [Accessed 6/5/2024].