Figma Link
Tablet Adaptation
When converting the app into the tablet version of the app, I have decided to use responsive layout to scale the UI up to be suitable for the tablet edition. The tablet version of the app is almost identical to the app, except for the scaling and the auto layout having to be adjusted to fit into the guideline measurements of a tablet screen. I also wanted to preserve the clickability of the elements by scaling some of the interactable icons up slightly more so that the user will find it hard to miss.
Web Adaptation
Before adapting the BF4BF app into its web form, I have selected a few competitors who offer similar features to BF4BF. The Little Mix History page shows the timeline of the group and the events that occured in their career – I have decided to include this in both the app version and desktop version as it would fit the purpose of my app and website perfectly.
When converting the app into its desktop format, multiple element had to be adjusted for it to fit. For example, the navigation bar had to be placed at the top of the website to fit the conventional layout of a website – as mentioned earlier, I did not want to cause inconvienience for my users by forcing them to adjust to a completely new UI style that is not familiar to them. Also, in the web version of BF4BF, I have shifted the focus from different features to another to accomodate the user styles (for example, one user might exclusively use the desktop version for the forum and posts). I have decided to put priority on some of the social features such as the forum, as well as the purpose of the desktop version being for archiving purposes and being the place where fans can access media related to BOYFRIEND. The main difference between the mobile app and the desktop website is that the desktop allows for more elements to be shown on one screen, therefore the content should be distributed evenly to make sure that it is still clear and not too cluttered with too many elements at once.
In addition, the logo had to be adjusted slightly to fit the navigation bar of the desktop version.
References
K-Profiles Forum (2024) Forum. Available at: https://kprofiles.com/forums [Accessed 12/5/2024].
Weverse (2024) Weverse. Available at: https://weverse.io/ [Accessed 12/5/2024].
Little Mix (2024) Little Mix History. Available at: https://history.little-mix.com/ [Accessed 12/5/2024].