Major Project 1: Discover Bangka Belitung | Process & Final Outcome
Major Project 1
23/04/2026 - 29/07/2026 | Week 01 - Week 15
Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honours) in Creative Media
Major Project 1 / Exercises / Taylor's University
We first started with the app wireframes, focusing on features such as activities, challenges, and gamification to help users explore Bangka Belitung. At that stage, the website was mainly meant to provide official and verified information, while the app would support users during their trip.
After receiving feedback, we realised the website should come first because it needed to introduce Bangka Belitung and help people understand what the destination has to offer. By Week 5 and Week 6, we shifted our focus to the website wireframes and started developing a clearer structure for destinations, experiences, events, and travel planning. The earlier app wireframes were still useful in helping us shape the overall direction of the project.
PROCESS WORK OF INITIAL WIREFRAMES
SITEMAP
.png)
The sitemap organises the website into five main sections: About, Home, Destinations, Experiences and Plans. Each section contains related content, such as history and FAQs under About, maps and destination listings under Destinations, events and tour packages under Experiences, and arrival or transport information under Plans. This helped us plan the website structure and make sure users could move through the information clearly.
COMPETITOR ANALYSIS & INTERACTIVITY INSPIRATION
We also analysed competitors in two areas: UI/UX interactions and travel website content. From this research, we refined the website structure and moved into Figma to create our first prototype, focusing on clearer destination discovery, practical travel information, and a smoother connection between the website and a
By looking at the Orken and Ironhill websites, we learned that motion should support the story without distracting from the content. Smooth transitions, readable information, clear CTAs and simple navigation are important for creating an immersive but easy-to-use experience. Based on this, we tried to apply similar principles to our wireframes by planning clearer interactions, smoother page transitions and layouts that keep the information easy to follow.
MOODBOARD
For the initial visual direction, we were still undecided. So we looked through the perspective of how to capture people's attention instead and to become a differentiator from others; we wanted the website to feel crafty, comfortable, and relaxing, while still looking modern and eye-catching. We also explored more trendy layouts, bold typography, collage-style visuals, and travel-inspired elements so the website could attract attention while still feeling connected to the character of Bangka Belitung
.png)
Using this moodboard, we created the first iteration of the website wireframes. The structure included five main pages: Home, Destinations, Experiences, Planning and About. Together, these pages were intended to introduce Bangka Belitung, showcase places and activities, provide practical travel information, and share more about the province.
This became our starting point after shifting the main focus from the app to the website. The layouts were still in an early stage, but they helped us organise the content and understand how users would move through the website before we continued refining the design and interactions.
Throughout these processes, we are able to refine the website structure and moved into Figma to create our first prototype, focusing on clearer destination discovery, practical travel information, and a smoother connection between the website and app and finally finishing our first proposal for this module.
MAJOR PROJECT WEEK 9 PROPOSAL Link to the Proposal
Before moving into the prototyping stage, we presented our finalised concept and wireframes in Week 9. The feedback showed that our concept, problem statement and interactions were already strong, but the project still needed a clearer special factor beyond being an interactive tourism website. We were also advised to begin testing the design through coding and decide which platform would be most suitable for development.
.png)
We knew the earlier direction needed to change, so we developed a new art direction that felt more modern, polished and trustworthy. We introduced a cleaner editorial style with deep blue tones, soft neutrals and a brighter accent colour, supported by bold Unbounded headings and Albert Sans for readability. Travel stamps, photography and structured layouts were also used to keep the design connected to tourism without making it feel too playful. This allowed us to improve the overall structure, strengthen the visual consistency, and create a website that felt more reliable and suitable as an official source of travel information.
She explored a new website direction by moving away from the previous scroll-triggered layout and developing a map-based approach, starting with the Destination page. After sketching different ideas, she brought the direction into Figma and experimented with several layouts, including draggable destination cards and different Experience page structures. As a result, these ideas were later simplified to make the website easier to understand and less overwhelming.
The trials of prototyping
She continued refining the Destination, Experience, and Homepage layouts based on lecturer feedback, improving interaction cues such as the map glow, carousel, and overall page structure. One of the biggest changes was redesigning the Homepage to include more introductory content about Bangka Belitung and removing the separate About page. After the wireframes were approved, she also helped test whether the planned map interactions, motion, and transitions were achievable through coding.
Here's our current and final wireframes for the websites in Figma:
For the coding stage, I used AI tools such as ChatGPT and Claude for guidance on how to translate the Figma design into a working webpage. This helped me understand how the design could be separated into HTML structure, CSS styling, and JavaScript interactions. I applied this to features such as the interactive map, region hover effects, destination previews, filtering and page transitions, while continuing to adjust the visuals so they stayed close to our original wireframes.
I faced quite a few problems while building it, especially when linking one page to another and making sure the scrolling sections moved properly. The map interactions were also difficult because the zooming, movement and hover effects had to work smoothly without affecting the rest of the layout. I had to test and adjust the code many times, but these interactions were important because they made the website feel more engaging and helped it stand out from a basic tourism information site.
Based on the feedback, I also thought about how the app could be useful beyond just showing travel information. The low-fidelity wireframes helped me map out how users might move from onboarding into saving places, checking events, using the map and viewing destination details during their trip.
For Major Project II, I can build on this by adding more meaningful activities, rewards and event-based features. This would give users more reason to keep using the app while exploring Bangka Belitung, instead of only opening it once.
MAJOR PROJECT WEEK 16 PROPOSAL
OBSERVATIONS
Throughout this module, I noticed that developing a full UI/UX project takes time, patience and consistent effort. We were stuck for a few weeks because our direction was still unclear, which showed us that having a strong foundation is more important than rushing into the design stage. We also had to learn how to prioritise our tasks and focus on what needed to be solved first.
FINDINGS
I learned how UI/UX can be applied through user flows, wireframes, testing, micro-interactions and macro-interactions. I also realised that feedback is important, but it must be considered carefully. We had to stay open to criticism while deciding which suggestions supported our main project goals, as trying to follow every opinion could make the direction more confusing.
EXPERIENCES
Personally, this project taught me a different level of determination. I wanted the work to feel established and meaningful, so I had to keep improving it instead of settling too early. The process helped me understand that strong outcomes require time, passion, planning and a willingness to make changes. It also gave me more confidence in developing and presenting a large UI/UX project, while showing me how many possibilities there are to explore further in the future.
Comments
Post a Comment