Major Project I | Discover Bangka Belitung: Process and Final Outcome
FEILYCIA JOY KURNIAWAN / 0373400 
Major Project I / Bachelor of Design (Honors) in Creative Media
Discover Bangka Belitung - Final Outcome (MP1)
TABLE OF CONTENTS
1. Lectures
2. Instructions
3.Process & Final Outcome
4. Feedback
5. Relfection
LECTURES
Special thanks to our lecturers & supervisors - Mr Kannan, Mr Shamsul, Mr Razif, and Ms Noranis :))
Additionally, our friends who we keep asking for opinions.
At the beginning, we focused more on the app wireframes because we wanted to explore features like activities, challenges, rewards, and gamification for visitors during their trip. The website was initially planned as a supporting platform that would mainly provide official and verified information about Bangka Belitung.
However, after receiving feedback, we realized that users first needed to understand and become interested in Bangka Belitung before they would consider using an app. Because of this, we shifted our focus in Week 5 and Week 6 to developing the website wireframes, with clearer sections for destinations, experiences, events, and travel planning. Although the app became a secondary focus, the early wireframes still helped us define how the website and app could connect as one travel journey.
> First Attempt ( W5-W9)
Moodboard
Wireframe
After clarifying the website direction, we started building the foundation of the project through a moodboard, sitemap, and early wireframes. We also conducted interviews to understand our target users better, including their travel habits, concerns, and expectations. These findings helped us develop personas and identify what users actually need when discovering and planning a trip to Bangka Belitung.
WEEK 9 PROPOSAL
After the Week 9 proposal presentation, we received feedback that the design direction was not strong enough yet. Instead of continuing with the same frames, we decided to step back and rework the foundation of the visual direction first.
Before sketching the new wireframes, we did another round of research on references, typography, colour, and interaction style to find a direction that felt more suitable for the project. Once we were more confident with the overall look and feel, we started rebuilding the wireframes from a new point of view.
This led us to move away from the previous scroll-triggered layout and explore a map overview approach instead. We began with the Destination page because the map was the strongest part of the website, then expanded the same direction into the other pages to make the overall experience feel more consistent.
This was one of the first layout trials I explored in Figma after restarting the direction. At that stage, the idea for the Destination page was to make the destination cards draggable, so users could explore the content in a more interactive way.
However, after testing the idea further, we realised that it could become too overwhelming because there was already a lot of information for users to process. Because of that, we decided to simplify the interaction and rethink the layout again. Around the same time, we also started working on the Experience page, which was more challenging because we had to figure out how to present different activities and events clearly without making the page feel too crowded.
After the wireframes were approved by the lecturers, we started testing the coding side to see whether the website interactions were achievable. This step was mainly to check if the platform and tools could support the direction we wanted, especially the map interaction, motion, and page transitions. It is still an early coding progress, but it helped us understand what is possible and what needs to be adjusted before moving further into development.
For the coding stage, my teammate used AI tools such as ChatGPT and Claude to help translate the Figma design into HTML, CSS, and JavaScript. This was applied to features like the interactive map, hover effects, destination previews, filters, and page transitions while keeping the visuals close to the wireframes.
She also faced challenges with page linking, scroll movement, and map interactions, especially making the zoom, hover, and movement work smoothly. Through testing and adjustments, these interactions helped make the website feel more engaging and less like a basic tourism information site.
Although the website became the main focus, we still included the app wireframes because the app was part of our initial project direction. At this stage, the app is not final yet, but it helps show how the user journey can continue after users discover Bangka Belitung through the website.
The idea is that users first use the website to explore destinations, experiences, events, and planning information. Once they are interested, the app supports them during the actual trip through features such as onboarding, saved places, event details, maps, and destination information. For Major Project II, this can be developed further with more meaningful activities, rewards, and event-based features, so the app becomes a companion for on-ground exploration rather than just another travel information platform.
Click here for Google Drive link - There is a rundown video of both website and app, and other submissions
Final Figma Prototype - Click here to see
App Prototype - Click here to see
FEEDBACK
REFLECTION
Experience
At the beginning of the semester, I was not fully clear about the project expectations, which made the ideation stage feel quite overwhelming. My partner, Jesslyn, and I explored several ideas before deciding on Bangka Belitung as our final topic. Throughout the process, we faced many changes and challenges, especially when we realised that our early concept and direction were not strong enough to support the whole project.
Observations
As the project developed, I noticed that having a weak foundation affected many parts of our work, from the wireframes to the visual direction and user flow. I also observed that Jesslyn and I had different strengths, where I focused more on the design and user experience side, while Jesslyn handled more of the technical and coding aspects. This helped us divide the workload more clearly and work based on our strongest skills. We also had to meet frequently and revise many parts of the project, which was tiring but necessary to improve the final outcome.
Findings
From this project, I learned the importance of building a strong concept, user flow, and project direction before moving into details. I also learned how to receive feedback more critically by understanding which feedback supports the project goals and which ones need to be filtered out. Time management was another important lesson, especially because the project required many changes within a limited time. Looking back at our first version, I can see how much the project has improved, and for Major Project 2, I hope to continue with a clearer direction and develop the app as the next major outcome.
Comments
Post a Comment