Major Project 1
03.02.2025 - 25.03.2025 / Week 1 - Week 7
IAN CHOO XIN ZHE / 0369451
Major Project 1 / Bachelor of Design (Honours) in Creative Media
MIB
TASK 1
Project Brief & Scope
|
| Fig 1.1 Task 1 Deliverables |
For our Major Project module, we are required to work collaboratively as a team to develop a comprehensive design solution. The project involves multiple key stages, beginning with finalizing the project title and proposing a suitable group name that reflects our concept. We must also establish a clear timeline and a structured project development plan to guide our progress and ensure we meet all deliverables.
Timeline
|
| Fig 1.2 Timeline |
Our first step in the project was to create a rough timeline to outline the key stages of our work. This timeline serves as a guide for us to follow — not as a rigid schedule, but as a flexible plan to keep us on track.
We understand that unexpected circumstances may arise, so the timeline is open to adjustments as we progress. The main goal is to ensure we maintain steady momentum while allowing room for changes based on project developments or feedback. This approach helps us stay organized without feeling restricted by fixed deadlines, promoting both structure and adaptability in our workflow.
|
|
|
We then refined these ideas by drafting short descriptions for each one, giving us a clearer understanding of their potential direction and purpose. This preparation was essential as we planned to present all the ideas to Mr. Shamsul for feedback. The goal was to gather his insights and identify which concepts had the most promise, helping us move forward with a more focused and informed approach.
|
|
|
Leading up to our consultation with Mr. Shamsul, we were instructed to individually select the idea we found most convincing and prepare a proposal for it. This step encouraged us to think critically about each concept, going beyond surface-level ideas.
We each conducted more in-depth research on our selected ideas, carefully identifying the core problem they aimed to solve, possible solutions, target audiences, project aims, and a few key features. This process helped us build a solid foundation for every idea, ensuring they were not just creative but also meaningful and impactful.
After thorough discussions, we narrowed our options down to four final ideas:
- Health App — focused on promoting healthier lifestyle habits.
- Social Game App — designed to help gamers connect and build meaningful friendships.
- Digital Detox Companion App — aimed at encouraging users to manage screen time and balance their digital and offline lives.
- First Aid Guide App — providing quick and accessible first aid instructions for emergencies.
These ideas were then prepared for presentation during the consultation, allowing us to gather feedback and move closer to selecting our final project direction.
|
|
|
Following the session, we developed a more structured plan for the app, which we’ve named Beacon — a platform designed to be like Tinder for gamers, helping players find compatible friends and teammates.
Following the refinement of our Beacon concept, we moved on to an intensive brainstorming session to generate as many potential features for the app as possible. Our goal was to think freely and creatively, without limiting ourselves at this stage.
|
|
|
After receiving approval from Mr. Shamsul for our Beacon app concept, we moved on to the next crucial phase — conducting user interviews.
We interviewed a total of 12 gamers, with sessions held both online and in-person to accommodate different participants' availability. The main purpose of these interviews was to gather valuable insights on key aspects of the gaming experience, specifically focusing on:
- Team Formation — How gamers currently find teammates and form squads.
- Matchmaking Experiences — Their experiences with existing matchmaking systems, including any frustrations or positive moments.
- Relationship-Building — How (or if) they form lasting friendships through gaming and the challenges they face in maintaining these connections.
The feedback collected from these interviews will play a critical role in shaping Beacon's features, ensuring our design choices directly address real user pain points and expectations. Our next step is to synthesize the data using an Affinity Diagram to uncover patterns and user insights.
Before conducting the user interviews, we went through several rounds of refining our interview questions. Initially, as we tested the questions, we noticed a few key issues:
- Repetitive Questions — Some questions overlapped, leading to similar responses and unnecessary redundancy.
- Lack of Clarity — A few questions were vague, which could confuse participants or result in unclear answers.
- Leading Questions — Certain questions unintentionally guided participants towards specific answers, risking biased feedback.
Recognizing these flaws, we carefully revised and restructured the interview guide. Our focus was on crafting clear, open-ended, and unbiased questions that encouraged honest and thoughtful responses from participants.
After several iterations, we finalized the best set of questions — ones that aligned closely with our research goals, particularly exploring team formation, matchmaking experiences, and relationship-building in gaming communities.
This refinement process ensured that the data we gathered would be both reliable and insightful, providing a strong foundation for the next phase of our project.
|
|
Fig 1.7 Interview Answers |
With our refined set of interview questions, we proceeded to conduct the user interviews. The sessions went smoothly, and we successfully gathered feedback from 12 gamers through both online and physical interviews.
By the end of this process, we had collected a wealth of valuable data. This information will be crucial for the next stage — synthesizing the feedback using an Affinity Diagram to identify patterns and uncover meaningful user insights. These insights will guide us in shaping Beacon's core features to better meet the needs of our target audience.
|
| Fig 1.8 Final Proposal |
After completing the user interviews, we shifted our focus to developing the final project proposal — the version we will submit and present through our slides.
Our group decided on the name "MAIN" — inspired by the initials of our names, but also carrying a clever double meaning, as "main" means "play" in Malay, perfectly aligning with our social gaming app concept.
We finalized the project title as:
"A New Era of Social Gaming"
With the title and group name locked in, we worked on refining the core elements of our proposal, ensuring they were clear, concise, and impactful. This included:
- Problem Statement — Highlighting the difficulties gamers face in finding like-minded teammates, the lack of effective social features on gaming platforms, and the struggle to build long-term gaming friendships.
- Project Aim & Objectives — Centered around fostering meaningful connections among gamers, reducing toxic behavior, and enhancing the overall social gaming experience.
- HMW (How Might We) Statement — Framing thought-provoking questions to guide our design process.
- Target Audiences
At this stage, we also started designing the proposal slides, structuring them in a way that flows logically and effectively communicates our app concept. This step marks a solid progression in our project, moving from research and ideation into the formalization of our ideas for presentation.
|
| Fig 1.9 Empathize |
Following the completion of our user interviews, we moved on to creating the Affinity Diagram — an essential step in synthesizing the data we gathered.
The process went smoothly, as we were already familiar with this method from our Minor Project last semester. As a team, we:
- Organized the Data — Each team member contributed their interview notes, and we laid out all the key points.
- Grouped Similar Notes — We carefully sorted the data into clusters based on recurring ideas and patterns, ensuring every relevant observation had a place.
- Identified Themes — Once the clusters were formed, we discussed and assigned a clear theme to each group, capturing the essence of the feedback.
- Generated User Insights — Finally, we analyzed the patterns and themes to extract meaningful user insights. These insights reflect the core issues gamers face.
This step was crucial in shaping our app’s direction, ensuring every design decision for Beacon directly responds to the real needs and pain points of our target users. With the user insights clearly outlined, we’re now ready to integrate them into our project proposal and design strategy.
|
| Fig 1.10 Competition Research & Analysis |
After finalizing our user insights, we moved on to conducting competitor research to gain a clearer understanding of the existing landscape and identify how we can differentiate Beacon from other social gaming apps.
We focused on four key competitors:
- Lita App — A team-finding app for gamers.
- Steam Chat — The built-in messaging and community feature within Steam.
- Noobly — A platform that connects gamers with similar interests.
- E-pal — A service allowing gamers to hire companions to play with.
Our approach involved a thorough analysis of each competitor, breaking down their:
- Pros — Highlighting their strong points and successful features.
- Cons — Identifying their weaknesses or areas that lack user satisfaction.
- Opportunities — Exploring how their strengths could inspire Beacon's features or spark new ideas.
- Threats — Recognizing how these apps could pose competition to Beacon, either through existing user bases, unique features, or strong branding.
- Strategic Moves & Recommendations — Based on the above points, we brainstormed strategies to strengthen Beacon.
This competitor analysis not only clarified where Beacon stands in the market but also helped us refine our app’s core features and value propositions.
Looking back on Task 1, the process of developing our project proposal for Beacon has been both insightful and challenging. It wasn’t just about coming up with an app idea — it required deep thinking, strategic planning, and constant collaboration to ensure our concept addressed real user needs.
One of the most valuable experiences was conducting user interviews. At first, creating the right set of questions seemed simple, but as we tested them, we realized the importance of refining them — avoiding repetitive, vague, or leading questions. This taught me that user research is not just about asking — it’s about asking the right questions to gather meaningful data.
Building the Affinity Diagram was another smooth yet crucial step. Thanks to our previous experience from the Minor Project, we were able to organize feedback efficiently, spot patterns, and develop user insights. It reinforced how essential it is to let users' voices shape design decisions, rather than relying solely on assumptions.
The competitor research was eye-opening as well. Analyzing similar apps like Lita, Steam Chat, Noobly, and E-pal pushed us to think critically about what makes Beacon unique. It also highlighted the importance of not just identifying competitors’ flaws but learning from their strengths — turning those insights into opportunities for innovation.
Overall, this task strengthened my skills in research, collaboration, and critical thinking. It also emphasized that design isn’t just about aesthetics — it’s about solving problems and creating meaningful experiences for users. Moving forward, I plan to apply these lessons by staying user-focused, asking the right questions, and continuously refining ideas based on research and feedback.
This task has set a solid foundation for the rest of our project, and I’m excited to see how Beacon evolves from concept to reality.
TASK 2
Design Proposition
|
|
|
|
|
|
For our user persona development, each team member was assigned a different persona to ensure diversity and avoid overlap. After discussing our approach, I chose to develop "The Solo Explorer" persona.
Persona: The Solo Explorer (Ryan)
Ryan is a software developer who treats gaming as both a personal escape and a mental challenge. He enjoys open-world exploration, indie games, and solo-ranked modes, valuing the freedom to play at his own pace. However, when necessary—such as for ranked grinding or raid bosses—he looks for teammates with aligned playstyles. Ryan prefers brief, purposeful interactions and avoids casual, off-topic conversations while gaming.
After presenting our personas, Mr. Shamsul advised us to refine them by adding psychographics and scenarios to make them more well-rounded. This meant delving deeper into Ryan’s motivations, frustrations, and behavioral patterns in gaming.
User Journey Map
|
|
|
After finalizing my user persona, "The Solo Explorer" (Ryan), the next step was to map out his user journey within Beacon. The goal was to understand how he interacts with the app, what his pain points are, and how Beacon can provide a seamless experience tailored to his needs.
Developing the Journey Map
Since Ryan is a self-reliant gamer who occasionally seeks teammates for specific in-game goals, his journey had to reflect that. I structured the journey map around his key motivations, actions, emotions, and touchpoints within the app.
-
Awareness
-
Trigger: Ryan gets frustrated with random matchmaking in ranked games.
-
Touchpoint: He hears about Beacon from a gaming subreddit discussing better teammate-finding options.
-
-
Onboarding & Exploration
-
Action: Ryan downloads the app, sets up his profile, and customizes his preferences (game type, playstyle, communication style).
-
Pain Point: Skepticism about whether the matchmaking system will find him suitable teammates.
-
Solution: Beacon’s synergy quiz helps match him with like-minded players.
-
-
Finding Teammates
-
Action: Uses swipe filters to refine his search, prioritizing strategic teammates over casual players.
-
Emotions: Initially unsure but becomes confident as he sees detailed profiles with stats and playstyles.
-
Solution: Beacon’s trust-based toxicity filter reassures him about the community quality.
-
-
Engagement & Matchmaking
-
Action: Connects with a compatible player and schedules a ranked session.
-
Pain Point: Concerned about poor communication mid-game.
-
Solution: Beacon’s pre-game communication tools help set expectations before the match.
-
-
Retention & Long-Term Use
-
Action: Ryan successfully finds a teammate that fits his playstyle and saves them as a preferred player for future matches.
-
Emotions: Satisfied that he can rely on Beacon instead of random matchmaking.
-
Solution: The XP and badge system incentivizes long-term engagement.
-
TASK 3
Concept Presentation
|
|
|
Card Sorting
To refine the navigation and feature organization for Beacon, we conducted a card sorting exercise to understand how users naturally categorize different features.
We began by discussing and finalizing the categories and features based on the ideas we brainstormed earlier in the semester. This ensured that:
-
The categories accurately represented the core functionalities of the app.
-
We aligned on what features we wanted to include or remove.
After careful structuring, we finalized the following key categories:
-
Matchmaking (e.g., synergy quiz, role preferences)
-
Profile (e.g., customization, game stats)
-
Events (e.g., challenges, monthly most played)
-
Social (e.g., user content, user reviews)
-
Settings (e.g., color-blind mode, font scaler)
-
Premium (e.g., priority placement, profile exposure)
-
Filter (e.g., swipe filters, history)
-
Currency (e.g., Beam, rep points)
.png)
|
| Fig 3.2 Card Sorting Results |
.png)
|
|
Fig 3.3 Card Sorting Results |
.png)
|
| Fig 3.4 Card Sorting Results |
Conducting the Card Sorting
Once the structure was ready, we sent out the card sorting activity to 12 participants. Their task was to organize the features into groups that made the most sense to them. This helped us:
-
Validate whether our categories were intuitive or needed adjustments.
-
Identify any overlapping or misplaced features based on user perception.
With the results collected, our next step was to analyze patterns in how participants grouped the features. This would help us finalize the app’s information architecture and create a more user-friendly experience.
Information Architecture
|
| Fig 3.5 Information Architecture |
After conducting the card sorting exercise, we used the results to build Beacon’s information architecture (IA)—the backbone of how users navigate the app.
Refining the Structure
Using the card sorting data, we identified clear category groupings based on how participants naturally organized the features. However, some features were placed in multiple categories by different participants. To resolve this:
-
We discussed as a group to determine the most logical placements.
-
Considered how each feature fit into the user journey and experience.
-
Ensured consistent organization to keep navigation intuitive.
Finalizing the Information Architecture
Once we resolved the uncertainties, we structured the IA to ensure a seamless flow. The finalized architecture helped us:
-
Establish a clear and logical hierarchy for features.
-
Make it easier for users to find what they need quickly.
-
Prepare for the next stage of wireframing and prototyping.
Before moving on to the low-fidelity (lo-fi) prototype, we first established a design guideline to ensure consistency and clarity across Beacon’s branding and interface.
We had discussions as a team to decide on fonts and colors that would best represent Beacon’s personality and purpose. We wanted a look that felt modern, dynamic, and engaging while staying readable and accessible.
Finalized Choices
-
Colors:
-
Stealth Purple (#22003C) – Represents mystery, strategy, and depth.
-
Quantum Blue (#6851FF) – Symbolizes technology, innovation, and connection.
-
Beacon White (#F6F0FE) – Ensures clarity and contrast, balancing the dark tones.
-
-
Typography:
-
Unbounded (Headline Font) – A bold, eye-catching font that adds a playful yet futuristic touch.
-
Hanken Grotesk (Body Font) – A clean and modern sans-serif typeface for easy readability.
-
|
| Fig 3.6 Design Guideline |
After finalizing Beacon’s color palette and typography, my next task was to properly document the design guideline so that everyone on the team could follow a consistent and structured approach in the UI design process.
To ensure the documentation was clear and professional, I explored Figma Community for design guideline and UI toolkit templates. This helped me understand best practices in structuring the document.
Structuring the Guideline
I formatted the guideline in a brand documentation style, breaking it down into key sections:
-
Color Palette – Displaying Stealth Purple, Quantum Blue, and Beacon White, along with their HEX codes and descriptions.
-
Typography – Defining the use of Unbounded for headlines and Hanken Grotesk for body text, with explanations of their roles.
-
Margins & Spacing – Establishing a 32px margin for consistency.
-
Type Hierarchy – Outlining the font sizes and styles for headlines, titles, and body text.
I also added captions and explanations to ensure the documentation was easy to follow. This design guideline became an essential reference for the team as we moved forward with the lo-fi wireframes.
Lofi Prototype
As part of the low-fidelity (lo-fi) prototyping phase, each team member was assigned one or two pages to design. I took on the Shop Page, a crucial feature of Beacon that not only enables monetization but also enhances user engagement.
The Importance of the Shop Page
The Shop Page plays a significant role in Beacon’s ecosystem. It allows users to:
-
Upgrade to Premium for exclusive perks and better matchmaking.
-
Progress through the Battlepass, unlocking rewards as they play.
-
Use in-game currency (Beams) to purchase digital and physical items, which also opens up opportunities for brand partnerships and collaborations.
Designing the Lo-Fi Prototype
For the lo-fi version, I focused on:
-
Creating a clear layout that makes it easy for users to navigate between Premium, Battlepass, and Purchase sections.
-
Ensuring that purchasing and upgrading flows were straightforward and intuitive.
-
Highlighting engagement elements, such as rewards and incentives, to encourage user participation.
|
| Fig 3.6 Moodboard and References |
Before diving into the low-fidelity (lo-fi) prototype, I first conducted research to gather inspiration and references. This helped me ensure that the Shop Page would have a clear structure and align with industry standards while also being user-friendly.
|
|
Fig 3.7 Lofi Sketches |
To kick off the process, I sketched multiple layout ideas to explore different ways to structure the shop page. Since this page plays a crucial role in monetization and engagement, I wanted to ensure the layout was intuitive and functional. After evaluating my sketches, I selected the best layout that aligned with user needs and the app’s goals.
|
| Fig 3.8 Lofi Sketches |
Digitalizing in Figma
Once I finalized my sketch, I moved to Figma to create the lo-fi wireframe. I focused on establishing a clear, organized structure for:
-
Premium – Highlighting exclusive benefits for paid users.
-
Battlepass – Allowing users to level up and unlock rewards.
-
Purchase/Exchange – Enabling users to spend in-game currency on digital or physical items.
Logo
Even though designing a logo wasn't a formal requirement in our Module Information Booklet (MIB), I took the initiative to create one because of my passion for logo design.
|
| Fig 3.9 My Logo Ideas |
I dedicated time to sketching and brainstorming multiple logo concepts, exploring different ways to visually represent Beacon. After several iterations, I selected a few strong concepts that I felt best aligned with the app's identity.
Another team member, Jordan, also worked on his own set of logo ideas. To streamline our process, we narrowed it down to two main logo concepts—one from each of us—to present to Mr. Shamsul for feedback.
|
| Fig 3.10 Selected Logo (right) |
After reviewing both designs, Mr. Shamsul selected Jordan’s idea, as it had a stronger connection to the app’s name and concept. From there, we refined and digitalized the chosen logo, ensuring it aligned with Beacon’s branding and overall aesthetic.
Final Presentation
On March 18th, we had our final presentation where we showcased our work on Beacon. While we aimed to keep our slides concise and to the point, the feedback we received indicated that some slides felt too general. Instead of conveying a summarized yet well-researched approach, it unintentionally gave the impression that we hadn’t put in enough effort.
Additionally, some of our lo-fi wireframes were too simplistic and lacked clarity, making it difficult for the lecturers to understand certain design choices.
Post-Presentation Refinements
After receiving this feedback, we took the initiative to improve our work by:
-
Revising the slides to ensure they still remained concise but more informative.
-
Refining our lo-fi prototypes, adding more details to make interactions clearer.
-
Finalizing and preparing everything for submission, ensuring that our work effectively represented our efforts and progress throughout the semester.
Throughout the semester, I was responsible for designing the slides for our presentations. Initially, I kept them concise and visually clean to ensure clarity, but after receiving feedback from our lecturers, I made several improvements.
Final Submission Slides
For the final slides, I made them far more detailed compared to our presentation slides, addressing the feedback we received. Some key improvements included:
-
Expanding on the content to ensure the slides were informative yet structured.
-
Revising the lo-fi wireframes, making necessary adjustments, and re-recording them to provide clearer visual explanations.
At this stage, everything was finalized, and Beacon was ready for submission!
Reflection on Major Project 1
Working on this Major Project has been an eye-opening experience. Unlike previous assignments where we had to strictly follow a set guideline, this time, we were given complete freedom to propose any topic we wanted. This flexibility was both exciting and challenging, as it allowed us to explore an idea we were truly passionate about, but it also meant we had to be responsible for defining our own project scope and direction.
From the very start, we chose to develop Beacon, a networking and matchmaking app for gamers. Throughout the semester, we went through the entire UX design process—from user research and personas to user journey mapping, wireframing, and prototyping. I took on multiple roles, from conducting research to designing the UI guidelines, creating lo-fi prototypes, and preparing the final presentation slides.
However, one of the biggest challenges was the misalignment between the lecturers’ expectations and our actual project workflow. At times, it felt like different lecturers had different views on what we were supposed to deliver. This created some confusion, especially when feedback contradicted what we had already been working on. In the end, we decided to follow our supervisor, Mr. Shamsul, as he was directly managing our group and had the clearest vision for our project. I am very grateful for his guidance and patience, as he helped us stay on track when we felt lost due to the conflicting requirements.
Despite the challenges, this project has been a valuable learning experience. I’ve gained deeper insights into user-centered design, teamwork, and problem-solving in real-world scenarios. It also reinforced the importance of adaptability—being able to adjust based on feedback while still staying true to our original vision. Looking back, I’m proud of the work we accomplished and how much I’ve grown as a designer through this journey.
Comments
Post a Comment