Major Project 2

02.02.2026 - 29.03.2026
Michael Chan Henn Loong / 0363611
Major Project 2 / BA of Design (HONS) in Creative Media / Taylor's University
Major Project 2 - Final Year Project

---

INSTRUCTIONS 

---

INTRODUCTION

    For this Final Year Project, I worked together with my group members, Ian, Jordan, and Nathan, to develop Beacon, a gamer matchmaking mobile application. The idea behind Beacon is similar to apps like Tinder or TanTan, where users can swipe left or right, but instead of dating, it focuses on helping gamers find teammates, connect with others, and build a community.

    Throughout the semester, our goal was to create a platform that improves the matchmaking experience, reduces toxicity in gaming, and provides a more enjoyable and safe environment for players. As a UI/UX designer in the team, my role mainly focused on structuring the app, designing user flows, and creating high-fidelity interfaces, while also contributing to documentation and presentation preparation.

My Contributions

    Throughout the whole semester, I worked on several important parts of the project, starting from planning all the way to final UI design.

    One of my main tasks was refining the information architecture (IA) map. Initially, our IA from the previous semester was not very clear as it was mixed together with user flows. Based on feedback from our lecturer, I restructured and cleaned up the IA to make the app’s structure more logical and easier to understand. This helped the team have a clearer direction before moving into detailed design.

Fig 1, Refined IA map for Beacon

    I've also created the user flows for the matchmaking and shop features. These flows mapped out how users would interact with the app step by step, such as swiping to match with players or browsing and purchasing items in the shop. During this process, I also updated the flowchart structure to follow more standard industry conventions based on feedback.

Fig 2, Matchmaking user flow

Fig 3, Shop user flow

    During the design phase, I also explored multiple mockups and visual directions. Some of these mockups were not used in the final version, but they were still important in helping me test different layouts and styles before deciding on a more suitable direction for the app.

Fig 4, Early mockup explorations

    I also experimented quite a bit with the onboarding pages, trying out different layouts, backgrounds, and styles. Based on feedback, I made several changes such as simplifying elements, adjusting icon usage, and improving the overall clarity. This iterative process helped me understand what works better in terms of first-time user experience.

Fig 5, Onboarding design explorations

    In terms of final UI design, I developed the high-fidelity screens for several key parts of the app, including:

• Splash screen
• Onboarding pages
• Log in and register pages
• User profile (self and other users)
• Settings page

Throughout this process, I also made improvements based on feedback, such as:

• standardising fonts and icon styles
• adding labels to icons for better clarity
• improving alignment and visual consistency
• adjusting colours and contrast for better readability

Fig 6, Final high fidelity UI screens

    Besides that, I also helped design one of the matchmaking filter page early stage, which allows users to refine their matches based on preferences. This feature plays an important role in improving matchmaking accuracy.

Fig 7, Matchmaking filter design

    In addition to creating the flows, I also helped arrange and organise the overall flow of our final layout, making sure that the transitions between screens were logical and consistent. This ensured that the user journey felt smooth and connected across different parts of the app.

    I also took the initiative to identify and correct smaller overlooked details throughout the project, such as inconsistencies in alignment, icon usage, typography, and layout spacing. Although these were minor issues, addressing them helped improve the overall quality and consistency of the final design.

Fig 8, Final flow arrangement

Fig 9, Small Details Added into Layouts

    Another responsibility I took on was updating the weekly progress documentation. Throughout the semester, I helped keep track of our progress, feedback from lecturers, and actions taken. This ensured that the team stayed organised and aligned with the project timeline.

Fig 10, Weekly progress documentation

Contributions of My Team Members

Each team member contributed to different parts of the project.

    Ian played a major role in shaping the visual identity and overall direction of the app. Throughout the semester, he worked on redesigning and refining the Beacon logo, starting from sketch exploration to final digital execution based on lecturer feedback.

    He was also responsible for searching and selecting suitable icon sets, ensuring that the app maintained a consistent visual language. In addition, he worked on the high-fidelity designs for the shop flow, helping to develop one of the key functional features of the app.

    Beyond UI screens, Ian also handled a large part of the branding and marketing materials, including creating visuals and mockups for how Beacon would be presented. He contributed heavily to the art direction, making sure the overall look and feel of the app stayed consistent across different sections.

    He also worked on setting up and refining the navigation bar, ensuring it aligned better with the rest of the UI after feedback from the lecturer. Throughout the project, he continued improving the visual consistency, including typography, icon usage, and layout decisions.

    Towards the final stages, Ian took the lead in designing the presentation slides, focusing on layout, visual hierarchy, and overall aesthetics. He also helped compile and organise files for submission, as well as tidying up the FigJam working board.

 
    As for Jordan he worked on the matchmaking and chat features, including designing the high fidelity screens for these flows. He also helped with connecting his own prototype and refining some of his own transitions later in the project. However, his contribution was limited in the earlier weeks and only became a little bit more noticeable towards the later half of the semester.

    As for Nathan he focused mostly on the community and event pages, where he designed the high fidelity screens for that section. His work mainly stayed within this area, contributing to working on the community pages.

BEACON FYP by IanChooXinZhe

Final Submission Links:

1. Project Document: 

https://www.figma.com/board/NjSgN88IbnTbja817w7KMl/Major-Project-2?node-id=0-1&t=hVVSwlaWsydeXMBZ-1

2. Project Presentation: https://canva.link/9jb9bno7dbmz910

3. Final Project Links

Working File:

https://www.figma.com/design/OSCWtiMc9ULiohs63BS5Zy/Maj-Pro-2-Layout?node-id=0-1&t=HvB5xFwYvPLZ8Kqz-1

Final Layout File
https://www.figma.com/design/fRuza4somhiwZtrm7hebma/Beacon?node-id=335-234&t=JRU8tr4pqyk6FLXs-1

---

REFLECTION

   Looking back at this FYP, it was a challenging experience, not only in terms of design work but also in managing team dynamics and maintaining consistency throughout the project.

    Throughout the semester, I found myself working very closely with Ian, especially when it came to pushing both the design work and overall progress forward. A large portion of the structuring, refinement, and execution was handled between us, especially during the earlier stages when momentum was still being established.

    During the first four weeks, one of our members, Jordan was not around as he travelled back to his hometown. At that time, we agreed to the arrangement under the assumption that contributions would still be consistent. However, this did not fully reflect in practice, as his involvement during that period was minimal. As a result, most of the discussions, consultations, and actual progress were carried out by the rest of the team.

    Because of this, several responsibilities that were initially meant to be shared had to be taken on by Ian and me to ensure that the project did not fall behind. While this allowed us to keep moving forward, it also meant that the workload was not evenly distributed from the beginning.

    As the semester proceed, Jordan came back and attended one consultation although consistency remained an issue at times. There were instances where consultations were missed, which made it difficult to stay aligned as a group, especially when feedback needed to be applied collectively.

    Another issue that became increasingly noticeable was the lack of alignment in design direction. As a team, we had already established a visual style for the app, which most of us followed when developing our high fidelity designs. However, there are problems where a different direction was pursued independently, resulting in visible inconsistencies across the app. This was later pointed out during feedback sessions, confirming that the misalignment was not just internal but also noticeable from an external perspective when we had a consultation with Mr. Shamsul.

    Even after this was highlighted, adjustments were limited. With the deadline approaching, the team had to prioritize completing and refining the existing work rather than revisiting major design decisions. As a result, some inconsistencies remained unresolved in the final outcome.

    There were also moments where communication within the team was not fully clear. For example, there was a disagreement regarding overlapping work such as Profile both did by me and Jordan and also the requirements, such as the individual blog submissions. Although this was eventually clarified, it reflected a broader issue of miscommunication and differing expectations within the group.

    At certain points, it became necessary to focus more on ensuring completion rather than attempting to resolve every issue, as doing so would have risked delaying the overall progress of the project which is pointless at this point. While this approach was practical, it also highlighted the importance of having stronger alignment earlier on.

    From this experience, I learned that successful teamwork depends heavily on consistency, accountability, and clear communication, not just task distribution. When any of these aspects are lacking, it places additional pressure on the rest of the team and affects the overall workflow.

    At the same time, this project pushed me to take on more responsibility than initially expected. I became more involved in structuring the app, refining flows, ensuring consistency, and addressing overlooked details to maintain the overall quality of the work. These experiences helped me grow not just as a designer, but also in how I handle collaborative projects.

    Overall, while the process was not always smooth, it was still a valuable learning experience. It gave me a more realistic understanding of group work, including the challenges that can arise when contributions and direction are not fully aligned. Moving forward, I believe I will be more prepared to manage similar situations and contribute more effectively in team-based environments.