Major Project 2

02.02.2026 - 20.03.2025 / Week 1 - Week 7

IAN CHOO XIN ZHE / 0369451

Major Project 1 / Bachelor of Design (Honours) in Creative Media

---

MIB

Major Project 1: https://ianchoodesign.blogspot.com/2025/02/major-project-1.html

Major Project 2

Fig 1.1 Task 1 Deliverables 

Major Project 2 is essentially the continuation of Major Project 1. In the first module, we focused on the proposal stage, where our main goal was to conceptualize the app, define the core features, and develop basic flows. At that stage, our lofi prototypes only included a few pages with basic functionality, giving a general idea of how Beacon would work but without full interactivity or a polished feel.

For Major Project 2, the focus shifts from concept to execution. This means taking everything we planned in the proposal and turning it into a more complete, cohesive app experience in Figma. Our goal is to expand the basic flows into fully fleshed-out screens, include realistic interactions, and make the app feel like something users could actually navigate. Essentially, we’re moving from a conceptual skeleton to a full-bodied prototype that demonstrates not just functionality but also usability, visual design, and overall user experience. This stage challenges us to think about the finer details, interactions, and consistency across the app while maintaining the core vision we established in the proposal.

Logo Update/Redesign

Mr Shamsul gave feedback regarding our logo design. He mentioned that while the concept was a good start, it could be developed further to make it stronger and more distinctive.

He suggested exploring alternative directions, such as incorporating the letter “B” more clearly into the design, or using a lighthouse concept to reflect the meaning of Beacon, with light shining in one direction.

Fig 1.2 Old Logo

Based on his feedback, I decided to go back to the drawing board and start sketching out different ideas first before refining anything digitally. This helped me explore more variations and think more critically about the concept before committing to a final direction.

Fig 1.3 Sketches of new logo ideas

I volunteered to take charge of the logo design because it’s something I genuinely enjoy, and I feel confident in my ability to develop a strong visual identity. To start the process, I explored different websites and design platforms to gather inspiration and study how other brands approached their logo concepts. This helped me understand different styles, structures, and visual strategies. After that, I began sketching extensively. I generated many rough ideas and experimented with different concepts before narrowing them down to the seven strongest designs that best represented the direction of the brand.

From the beginning, I was determined to incorporate a star element into the logo design. I felt that the star was a strong and versatile symbol that could carry multiple meanings at the same time. In gaming culture, stars are often associated with ranking systems, achievements, and progression. This makes the symbol instantly relatable within the context of our app. At the same time, stars have historically been used to guide travelers, especially before modern navigation systems existed. This connects directly to the idea of a beacon guiding people toward the right direction, which aligns well with the purpose of our platform.

Fig 1.4 Chosen Concept

The following week, I presented my logo sketches to Mr Shamsul. I walked him through each concept and explained the thinking behind every design, including the symbolism and how it connects to the brand identity. After reviewing all the options, he selected the logo shown in the image above. He felt that it was the strongest overall in terms of both meaning and functionality.

The chosen concept features the letter “B” divided by a star in the center. The star splits the B into four panels, representing multiple users connected through the platform. At the same time, the letter B clearly reinforces the name Beacon, making the logo both symbolic and directly tied to the brand.

Fig 1.5 Logo Digitalization in Illustrator

After finalising the selected concept, I moved on to digitalising the logo in Adobe Illustrator. I carefully reconstructed the design using vector shapes and tools such as the Shape Builder Tool to ensure everything was precise and clean.

During this stage, I focused a lot on refinement. I adjusted spacing, balanced the proportions, fine-tuned the curves, and made small visual corrections to ensure the logo looked stable and well-crafted. I also paid attention to kerning for the wordmark to maintain consistency with the overall UI typeface.

Fig 1.6 Logo Variations & Colour

Once everything felt visually balanced, I applied our app’s three main brand colours to the logo so it aligns with the overall theme and identity of Beacon. At that point, the logo was finalised and ready to be implemented into the app design.

Fig 1.7 Old Navigation Bar

Mr. Shamsul gave us useful feedback on our original navigation bar. He mentioned that the icons we were using looked a bit cheap and overly abstract, which made them feel unclear rather than intuitive. Because the navigation bar is one of the most frequently used parts of the app, he suggested we revisit the design and make it cleaner and more readable. One of his key recommendations was to include text labels under the icons, so users can immediately understand what each icon represents.

To improve the design, I spent time searching for inspiration that would match Beacon’s visual identity, something modern, minimal, and easy to navigate. I looked at examples of user interfaces with clean navigation bars that balanced simplicity with clarity, and took note of how icons paired with labels helped improve usability. This research helped guide my redesign direction, ensuring that the updated nav bar would feel consistent with Beacon’s brand style and overall user experience.

Fig 1.8 Updated Navigation Bar

After gathering inspiration, I went into Figma and started experimenting with different navigation bar layouts. I tested spacing, icon sizes, and label placements to see what felt the most balanced and clear.

In the end, I came up with the version shown above. The selected icon is highlighted in white, while the unselected ones remain grey. This creates a clear visual hierarchy and makes it obvious which page the user is currently on.

At first, the design felt a bit too basic. To improve it, I added a thin purple line above the selected icon. That small detail helped the active state stand out more and made the navigation bar feel more polished and on-brand.

I also realized that displaying text labels under all the icons at once made the bar look crowded. To keep it clean, I decided that the text should only appear when an icon is selected. This keeps the interface minimal while still maintaining clarity when needed.

Fig 1.9 Brainstorming for Advertising

While building and designing the app’s high-fidelity prototype, I started thinking about ways to push the project further and gain extra points. I wanted to find something that could add more value to the project and create a stronger “wow” factor.

This was when I thought about proposing an idea to the team members who were working on the branding, marketing, and advertising side of the project. I shared my idea with them and asked if they would be open to it. They all agreed and felt that it was a good direction for the project.

Since I was already responsible for the design and overall art direction of the app, I offered to handle this part myself as well. This allowed me to make sure the visuals and concept stayed consistent with the rest of the project.

Fig 2.0 Cinematic Poster Design

I started by creating a single cinematic poster that could build mystery and curiosity around Beacon. The idea was to make something that felt intriguing and would catch people’s attention at first glance.

To get some inspiration, I looked through platforms like Behance, Pinterest, and Cosmos to explore different poster styles and visual directions.

In the end, I designed the poster shown above. It features the headline “Follow the BEACON” with the subline “Discover players, build squads, better together.” The word BEACON is highlighted with a glowing effect, using a purple inner glow to give it a slightly ethereal, sci-fi feeling. This visual treatment helps reinforce the idea of Beacon as something that guides players and brings them together.

Fig 2.1 Adjusted Poster Design

After completing the first version, I felt that the design looked a little flat and did not fully match the direction of the project. Because of that, I decided to ask Mr. Shamsul and my groupmates for feedback. The overall feedback was that the concept was good, but the execution could be improved. Based on their suggestions, I decided to revise the design again.

This time, I used the Gradient Map tool in Adobe Photoshop to better apply and highlight our brand colours. This helped bring out the purple tones more strongly and made the overall poster look more vibrant. I also decided to remove the inner glow effect on the text. Instead, I changed the text to solid white and made it bold, while still keeping a subtle outer glow to maintain the glowing “beacon” idea.

In the end, I arrived at the final design shown above. The colours are much more vibrant, and the art direction feels more clear and straightforward, which matches Beacon’s overall visual identity better.

Fig 2.2 Final Design on Mockup

I then applied the poster design to a subway train mockup. This was to show how the advertisement could appear in a real-world setting, since apps and digital services often promote their products through ads in public transport spaces.

Fig 2.3 Billboard Design

Next, I moved on to designing a billboard for the campaign. For this design, I wanted to feature the Beacon logo as an app icon so that people could immediately recognize it as a mobile application.

To do this, I used a high-quality phone mockup and placed the Beacon logo on the screen. I then removed the background of the phone and applied Beacon’s purple brand colour as the main background. I also added a glowing effect around the phone to further match the overall art direction and the “beacon” concept of light.

The billboard features the headline “Gaming is better with a SQUAD.” with the subline “Find teammates that match your playstyle.” At the bottom, I added a clear call-to-action that says “Download Beacon.” I also included the Google Play and App Store logos to make it immediately clear that Beacon is a mobile app that can be downloaded.

Fig 2.4 Series Poster

Next, I decided to create a series of three posters. The idea was to have a logo-focused poster in the middle, with the left and right posters featuring bold copywriting. I sourced the images from free stock websites such as Pexels and Unsplash.

For the middle poster, I used an abstract long-exposure photo of a glowing neon figure at night. The lighting created a strong futuristic mood, and I placed the Beacon logo on top so it became the main focus.

The left poster took the longest to design. I wanted to incorporate parts of the Beacon logo to strengthen the branding. In the end, I used the left panel shapes from the logo to frame two images: one showing a player gaming alone, and the other showing the same player celebrating with a teammate. The headline reads “Better wins with better TEAMMATES.”

For the right poster, I used the negative space of the Beacon logo to create a star-like shape in the center. Inside it, I placed the copy “Where players CONNECT.” with a subtle purple glow.

After completing the three posters, I presented them using a nighttime mockup. For now, I paused the branding work to focus on developing the app and refining the user flow.

Fig 2.5 Lo Fi Screens

I was in charge of designing the Shop section for Beacon. This section is divided into three parts: Beacon Premium, Battle Pass, and Purchase. Before starting, I revisited the low-fidelity user flow that I had created back in Major Project 1 to make sure the structure was still clear and consistent.

The Premium section is where users can subscribe to Beacon Premium. It includes different plans along with the benefits of upgrading.

The Battle Pass is designed similarly to game systems, where users complete missions to gain experience points and level up. Each level or tier unlocks rewards, which helps keep users engaged over time.

The Purchase section allows users to spend in-game currency earned from the Battle Pass. This can be used to redeem digital items or even physical items such as Beacon merchandise.

Fig 2.6 Art Direction

I also revisited the art direction that we established back in Major Project 1 to refresh my understanding of the visual style.

Our brand identity is centered around three main colours: Stealth Purple (#22003C), Quantum Blue (#6851FF), and Beacon White (#F6F0FE). These colours define the overall look and feel of the app.

For typography, we use Unbounded as the headline and display typeface to create a strong and modern visual presence. For body text, we use Hanken Grotesk to ensure readability and consistency across the interface.

Fig 2.7 Shop Page Hi Fi

I started by designing the base page for the Shop, which brings together the three sections: Premium, Battle Pass, and Purchase.

For the visuals, I explored different illustration styles online and came across toools.design, a design resource library. From there, I found thiings, which offers a set of illustrations and graphic assets that fit well with Beacon’s style. I decided to use these assets and shared them with my groupmates so that everyone could stay consistent in terms of visuals.

The screens above show the Shop interface. For the Beacon Premium section, I used a purple border to make it stand out, since it is the main monetization feature of the app. I also designed a “Get Premium” call-to-action button using a gold gradient to give it a more premium feel.

I created two versions of the Shop screen: one before unlocking Premium and one after. In the unlocked version, the border changes from purple to gold, and the button updates to “Premium Activated” with a darker tone. This helps clearly show the change in state and gives users a sense of progression.

Fig 2.8 Premium Flow

I then moved on to designing the Beacon Premium section of the shop. The flow I created consists of three main steps: first, the Beacon Premium page, where users can view the benefits and select a plan; second, the payment page; and finally, a confirmation page after the purchase is completed. I focused on designing all the page interfaces first before working on the functionality, so I could ensure the overall flow and visual consistency were clear from the start.

Fig 2.9 Beacon Premium Page

The Beacon Premium page features the headline “Level up with Beacon Premium,” with “Beacon Premium” made larger, bold, and styled in a gold gradient to emphasize its importance. Below that, I added a short supporting line: “Priority matches. Advanced filters. Zero limits.” to quickly highlight the key benefits.

To strengthen the premium feel, I included a 3D gold mockup of the Beacon app icon. I sourced the mockup online and refined it in Adobe Photoshop so it better matched the app’s visual style. Under this, I listed the different benefits along with short descriptions. At the bottom, I designed a scrollable section for plan selection, where users can choose between monthly, annual, and lifetime options.

Fig 2.9 Components

After completing the UI for the Premium page, I moved on to creating reusable components. I designed components for the different payment methods, as well as for the scrollable plan selection, allowing users to easily select and deselect their preferred option. This helped keep the design more consistent and made it easier to manage interactions across the flow.

Fig 3.0 Battlepass

Fig 3.1 Battlepass Rewards

I then moved on to designing the Battle Pass page. For this section, I focused on creating a system that feels similar to in-game progression. The main mechanic is for users to complete featured missions, gain experience points, and unlock each tier after reaching a certain amount of EXP.

I designed the layout to clearly show the user’s current level, progress bar, and upcoming rewards, so they can easily track their progression. Each tier displays the rewards that can be unlocked, which helps motivate users to stay engaged. I also designed and decided on the rewards system. The Battle Pass is split into two tracks: a free tier and a premium tier. Users on the free plan can unlock basic rewards, while those with Beacon Premium can access additional, more exclusive rewards. Overall, the goal was to make the Battle Pass feel interactive and rewarding, while staying consistent with Beacon’s visual style.

Fig 3.2 Reward Pop Up

After designing the Battle Pass, I felt like something was missing. I realised that there was no clear feedback when users claimed a reward, so I added a confirmation pop-up such as “Reward Claimed!”

From a UI/UX perspective, this is important because it provides immediate feedback, letting users know that their action was successful. It also helps reduce confusion, as users don’t have to guess whether the reward was claimed or not.

At the same time, this kind of confirmation adds a sense of satisfaction and reward, making the experience feel more engaging and motivating for users to continue progressing through the Battle Pass.

Fig 3.3 Purchase Items

I then moved on to designing the Purchase page. This is where users would likely spend the most time, as they can browse and redeem different products using the in-game currency, Beams.

I created two main types of rewards: digital and physical items. For the digital rewards, I included items such as boost tokens, extra swipes, emotes, profile customisation options, and a mystery box. These are mainly targeted towards free users to keep them engaged within the app. For the physical rewards, I designed a range of Beacon merchandise, including items like a keychain, mug, keycap, and mousepad, as well as potential sponsored products such as a mouse and headphones.

Fig 3.4 Rest of the Purchase Flow

I then created the rest of the flow for the Purchase section. First, users are taken to a product page, which displays the selected item along with its description and price in Beams. From there, users can click on “Redeem with Beams” to proceed.

This brings them to the checkout page, where they can review the selected item, its cost, their current Beam balance, and the remaining balance after the purchase. This helps make the transaction clear and transparent.

After completing the redemption, users are taken to a confirmation page, indicating that the purchase was successful.

Fig 3.5 Flow Arrows

After completing the design, I moved on to adding the interactions and functions for each page to ensure the flow was smooth and seamless for users. Once the flow was working properly, I proceeded to start working on the presentation slides.

Fig 3.6 Slides

I then moved on to working on the presentation slides. I wanted the cover page to be attention-grabbing, so I looked for a 3D iPhone mockup featuring an app icon and placed the Beacon logo on it. The goal was to achieve a modern and premium look that reflects the app’s branding.

After that, I designed the rest of the slides based on the required structure. The presentation starts with the final output, followed by a quick recap of the project. I then highlighted the key changes and iterations made since the proposal, along with the rationale behind those changes. I also included sections on technical and creative highlights, how the app meets user needs, and finally a reflection on what I learned and future plans for the project.

Throughout the process, Michael helped a lot with the slides. He contributed by adding screenshots of our work and assisting with writing the content, which made the overall process smoother.

Fig 3.7 Presentation Feedback

Presentation week arrived, and we presented our project within the 10-minute time limit. After the presentation, we received feedback from Mr. Shamsul.

One of the main points was that some parts of the app did not fully align with the overall art direction, especially the matchmaking interface compared to the rest of the app. He suggested that we work on making the design more consistent so everything feels unified. He also raised questions about whether the app could potentially sync with games, which is something we could explore further. Another point was about age restrictions, especially since the app includes payment features like credit card options. Overall, the feedback was to refine and align the design, make final improvements, and ensure everything is properly prepared before submission.

Fig 3.8 Sketches

I did not have much to change on my side based on the feedback, so I decided to further develop the marketing aspect of the project.

I brainstormed a few ideas and decided to design a set of three social media posts to show how Beacon could promote itself on platforms like Instagram and other social media. This allowed me to expand on the branding and make the campaign feel more complete.

Fig 3.9 Social Media Posts

To design the social media posts, I explored platforms like Behance and Pinterest for app and tech-related social media design inspiration, while making sure everything stayed aligned with Beacon’s branding.

I then designed the three posts in Adobe Photoshop.

Post 1 – Follow the Beacon
This post features a shooting star visual to represent guidance and direction, linking back to the idea of Beacon as a signal. The message focuses on not gaming alone and finding your squad.

Post 2 – Problem-Based
This post highlights common gaming frustrations such as bad teammates, lack of communication, and poor teamwork. It first builds relatability, then introduces Beacon as the solution.

Post 3 – Reasons to Choose Beacon
This post breaks down the app’s features into simple, easy-to-understand points. It focuses on the value of Beacon, such as matchmaking, the battle pass system, and social features.

Fig 4.0 Final Submission @ Teams

After that, I spent the rest of the week compiling and polishing all our materials, including the working files, final outputs, FigJam board, and presentation slides to prepare for submission.

As the group leader, I was responsible for submitting everything on behalf of the team. I worked closely with Michael, and we spent a lot of time refining and cleaning up the FigJam board as well as the final prototype files. At the same time, Nathan and Michael focused on connecting all the flows in the prototype to ensure everything worked smoothly.

Overall, this stage was mainly about finalising, organising, and making sure everything was complete and ready for submission.

Final Submission Links:

1. Project Exploration: https://docs.google.com/document/d/12l1_itesInJ9Gio1l0Em5j64YEU6b3brlY5yxEVrlh8/edit?tab=t.3qdfhmnr05qi

2. Project Execution Files: https://drive.google.com/drive/u/3/folders/18ntJOWeP3jBPmGn5DBrS1qiSbRPW_BA8

3. Project Presentation: https://canva.link/chn8yvnt8eezrtq

4. Final Project Links

Working File:

https://www.figma.com/design/fRuza4somhiwZtrm
7hebma/Beacon?node-id=335-234&t=jEiRMiOvFN
sSlLGY-1

Prototype:
https://www.figma.com/proto/fRuza4somhiwZtrm7h
ebma/Beacon?node-id=1000-3121&p=f&viewport=
455%2C1352%2C0.3&t=YS15l0IhuQieiTMC-1&sc
aling=scale-down&content-scaling=fixed&starting-
point-node-id=1000%3A3106&show-proto-sidebar
=1&page-id=335%3A234

Reflection

Throughout this FYP, Michael was undoubtedly the person who supported me the most across both design and overall execution.

In the first four weeks of the project (out of a total of seven), one of our members, Jordan, was working remotely as he had travelled back for the festive period. Mr. Shamsul had asked if we were comfortable with this arrangement, and we agreed as we trusted that he would still contribute consistently. In hindsight, this was a decision we should have managed more carefully. During that period, his involvement was minimal, and most of the work and consultations were handled by the rest of the team. Despite this, we continued to give him the benefit of the doubt

Although Jordan was initially assigned as the group leader, I gradually took on the leadership role to ensure that progress was maintained, even though this was never formally stated within the group.

During the early stages, both Jordan and I were supposed to work on key tasks such as developing new logo sketches, sourcing updated icon sets, and exploring marketing collaterals. However, as there was little to no output on his end, I took on these responsibilities to keep the project moving forward.

From Week 5 onwards, Jordan began attending classes, although attendance was inconsistent. While minor delays were manageable, there were instances where consultations were missed entirely. At that point, the team chose to stay focused on completing the work rather than escalating the issue, prioritising overall output and quality.

As we progressed into the hi-fidelity stage, it became clear that there was a lack of alignment in design direction. The group had initially agreed on a modern, playful, and tech-oriented visual style, which most of us followed. However, Jordan chose to pursue a glass-like UI approach, using Figma’s glass effect, with the intention of making the app stand out. While the intention was understandable, the direction did not align with the established visual language of the project.

This misalignment was further highlighted during our presentation, where Mr. Shamsul pointed out the inconsistency between different parts of the app, particularly between my designs and Jordan’s. He advised us to align the visual direction before final submission.

Following this, Jordan suggested that the team adopt his design style. While I remained open to discussion, there were concerns regarding both the suitability of the style and the limited time left before submission. To ensure clarity, I reached out to Mr. Shamsul directly, who reaffirmed the preference for the original art direction that the group had established. He also mentioned that he had already advised Jordan to align his designs accordingly.

As the submission deadline approached, it became evident that no significant changes had been made to address this feedback. This was disappointing, especially considering the clarity of direction provided. It is worth noting that Jordan was managing a full-time job during the semester, which may have impacted his availability. However, the lack of adjustment at this stage made alignment difficult for the team.

There were also moments of tension within the group, including a disagreement between Jordan and Michael regarding overlapping work and the requirement for individual blog submissions. While this was eventually resolved, it reflected underlying communication gaps. I later shared confirmation from Mr. Shamsul regarding the blog requirement, as it had been a standard component in previous modules. In the end, Jordan chose not to complete his blog, and we proceeded with submitting the work completed by the rest of the team.

Overall, this experience was challenging and, at times, exhausting. However, it was also a valuable learning process. I learned the importance of addressing issues earlier, setting clearer expectations, and ensuring alignment within the team from the start. I also realised that I tend to be overly accommodating, and that being more direct and decisive is sometimes necessary, especially in group settings.

Taking on a leadership role midway through the project taught me a lot about responsibility, communication, and managing different working styles. This experience has made me more aware of the realities of teamwork, and I believe it will better prepare me for future collaborative environments. Despite the challenges, I am grateful for the lessons learned, as they will help me grow both as a designer and as an individual.