Above is the link to my Figma work. For the web adaptation pages, please navigate to ’06_WebAdaptation’.
When adapting my mobile festival companion app into a web-based version, I focused on redesigning the key pages so they would work more effectively on a desktop screen while still keeping the same branding and style as the mobile app. Instead of redesigning every screen, I focused on the landing page and the watch live page, as these were the most important areas to demonstrate how the app could successfully transition from mobile to web.
For the landing page, I combined elements from the original homepage and map page into one layout. On desktop, there is more screen space available, so this allowed me to display more information at once without overcrowding the interface. I included the festival map directly on the landing page alongside key information and navigation options so users could quickly access important features without switching between multiple screens. I also adjusted the layout using a grid structure and wider spacing to make the design feel more suitable for desktop viewing.
For the watch live page, I redesigned the interface to better suit streaming content on a larger screen. I made the live stream the main focus of the page by increasing the video size and adding full size screens for other live performing artists. This creates a more immersive viewing experience for users watching performances from home or remotely during the festival.
I also changed the navigation style from the mobile bottom navigation bar to a horizontal navigation menu at the top of the page, as this is a more common web UI pattern.
Leave a Reply