Major Project - Task 3: Concept Presentation

on

12.03.2025 - 25.03.2023 (Week 05 - Week 07)
Gam Jze Shin / 0353154
Major Project / Bachelor of Design in Creative Media
T3: Concept Presentation

Index

1. Instructions
2. Task 3: Concept Presentation
3. Feedback
4. Reflection

Instructions

fig 1.1  Major Project MIB

T3: Concept Presentation

Task 3 required a significant amount of work. Task
  • Brainstorm Ideations [Group]:
  • Utilize storyboarding, sketches, and other ideation techniques.
  • Design Inspiration [Group]:
  • Research and gather design inspiration from relevant design resources and websites.
  • Information Architecture [Group]:
  • Develop the Information Architecture for the proposed solution using the Card Sorting Method.
  • User/Work Flow Diagram [Group]:
  • Create User Flow or Work Flow diagrams.
  • Design Guidelines [Individual/Group]:
  • Design guidelines (color scheme, typography, UI components, etc.) relevant to the project topic and target user personas.
  • Initial Lo-fi Prototype [Individual]:
  • Create initial low-fidelity prototypes (sketches or wireframes).
  • Group Presentation:
  • Present project on-site, 19 March 2025.

Progress
fig 2.1 App features list draft

We began by brainstorming the required app features. Each team member generated their own list of ideas, which we then consolidated in Figjam. After everyone was done, Xiao Hui and I looked at all the features, combined the ones that were the same, and made a final list. Our App Features List (We developed a preliminary page structure based on perceived feature requirements):

Home
  • Voice & Text AI-Powered Activity Matching  
Explore
  • Trending & Popular Events
  • Search
  • Advanced Filters
  • Weather Forecast for Outdoor Events
  • Map-Based Search
  • Join Groups / RSVP
  • User-Generated Reviews & Ratings  
Community
  • Friend List
  • Built-in Event Chat / Forum 
  • In-App Direct Messaging  
  • Visual Content Sharing  
My Event
  • Host an Event 
  • Event Calendar 
  • Past Events  
  • Saved Events  
  • Going Events  
  • Push Notifications & Reminders  
  • AI-Powered Attendance Verification  
  • Invite Friends
  • Event Cancellation
My Account
  • User Profile
  • Theme Customization  
  • Avatar Customization  
  • Customizable Activity Preferences / Interest
  • Invite Rewards  
  • Credit System for Event Participation  
  • Exclusive Group Creation for High-Rated Users  
  • Coin Collection & Redemption / Reward System 
  • Leaderboards
  • Achievement Badges
  • My Voucher / Rewards
  • History  
  • Settings  
  • FAQs  
  • Enquiry & Feedback  
  • Privacy Policy / Terms & Conditions  
  • Help Center

fig 2.2 Card Sorting Page

In compliance with Mr. Shamsul's requirement for each member to perform card sorting, I used Optimal Workshop to facilitate the process. I organized the card sorting activity using our app's feature list and implemented a hybrid method, enabling participants to define their own category structures.

fig 2.3 Invitation of Card Sorting

I generated a link and shared it with my friend. Due to time constraints, we allowed approximately four hours for participants to complete the card sorting activity. Following this, we held a group meeting to analyze the results and finalize our app features. In my case, while two people responded, only one completed the task before the meeting, so I used that single response for analysis.

fig 2.4 Result from Card Sort

We compiled the results from each participant onto a Figjam board, facilitating analysis prior to our group meeting.





fig 2.5 - 2.7 Group Meeting Link

Our Week 6 group meeting lasted approximately two hours due to extensive discussion regarding information architecture and design guidelines. As Zoom and Google Meet have meeting time limitations, I generated and shared a new meeting link with the group.

fig 2.8 Information Architecture

We began by addressing the information architecture. Our proposed structure involved merging the 'find' pages into four core pages: home, community, events, and account. To enhance user experience, we integrated the 'explore' page into the home page.

fig 2.9 - 2.10 User Flow Before & After

Building upon the information architecture, we began designing the user flow. The complexity of the application, with its many pages and potential flows, resulted in a cluttered diagram, which we subsequently revised for improved clarity and sequential understanding. We also designed the individual page flows and integrated them into the comprehensive app flow.

fig 2.11 - 2.12 Design Inspiration by me

We discussed design inspiration and guidelines. Prior to the meeting, each member contributed their ideas to Figjam. During the meeting, we presented and evaluated these ideas to select the most suitable approach.

fig 2.13 Design Reference

My design concept centered on a modern, professional AI aesthetic. I recommended incorporating a robot mascot to create a personalized and engaging user experience, thereby improving app usability.

fig 2.14 Font Suggested by me

Additionally, I recommended Poppins as the font, citing its modern and professional aesthetic that balances credibility with a touch of playfulness, aligning with our app's event exploration and social matching focus.

fig 2.15 User Flow by me

I developed the user flows for our prototype, dividing them into four stages: initial onboarding, first-time use, and frequent use, corresponding to our user personas.

fig 2.16 Our Final Design Inspiration

After collaborative discussion, we established our final design concept for MeetMatch. This concept blends a minimalist and modern design with fun, creative visual elements, illustrations, and color palettes. Our objective is to achieve a professional yet engaging look by balancing playfulness and sophistication. Furthermore, we intend to integrate a recognizable AI mascot throughout the application.

fig 2.18 Font Choices

We faced difficulty in font selection, as group members suggested alternatives like Raleway, Work Sans, and Quicksand. Janice advocated strongly for Quicksand, citing its cute aesthetic and suggesting a cute design approach for our app.

fig 2.19 Font Attempt

Despite initial consideration, sample testing revealed Quicksand's aesthetic to be excessively cute and therefore unsuitable for our young adult demographic, as well as lacking professional polish. Raleway, on the other hand, presented an overly formal and stark appearance. Consequently, we opted for Poppins, which offered the optimal balance between professionalism and engaging interest.

fig 2.20 Icon we Used

For our icon set, we chose 'fluent' from Iconify, as it aligned with our design requirements.

fig 2.21 Sample for Low-Fi

Since we're all making our own prototypes, we talked about things like layout, font size, and spacing, so they'd all look the same. We did a quick test to figure out what worked best.

fig 2.22 Design Guidelines

This is an overview of our low-fidelity prototype guidelines.

fig 2.23 Low-Fi References

A few days later, Xiao Hui shared online resources that would benefit our low-fidelity prototypes. Consequently, we decided to adjust our previous guidelines.

fig 2.24 User Flow Separation

To ensure efficient progress on the low-fidelity prototype, we distributed task flows among the team members before the meeting's conclusion. Each member was assigned to develop at least four pages.

fig 2.25 Logo Choices

Kai Xin, tasked with creating the app logo, presented her work to the group. I recommended the logo design that included a background, finding it to be more aesthetically pleasing.

fig 2.26 Progress of Low-Fi Prototype

During prototype development in FigJam, I utilized Pinterest as a reference source, copying desired visuals to inspire and improve my designs. This allowed for direct comparison with established artwork, enhancing the final outcome

fig 2.27 Bottom Menu Bar Comparison

Based on our design guidelines, I changed the usual bottom navigation from the left to a special design on the right.

fig 2.28 Prototype Flow

After finalizing the design of all pages, I developed a user flow visualization.

User Flow
Step 1: The user, seeking outdoor activity ideas, navigates to the "Community" page within the app.
Step 2: The user scrolls through the "Visual Content Sharing" feed to discover potential outdoor activities.
Step 3: The user finds a "hiking club" group that aligns with their interests and decides to join it.
Step 4: The user utilizes the "Invite Friend" add their friends into group, encouraging them to join.
Step 5: The user locates a specific user within the hiking club group and initiates a "Direct Message" to communicate with them.


fig 2.29 - 2.30 Community Page

On the community page, the top section displays a 'Leaderboard' showcasing users with the highest activity points, encouraging participation in app-organized outdoor activities. Below, user-generated posts are featured, with links to relevant community groups for interested users.

fig 2.31 Group Description

Users can access group details by clicking on a community group. The details page displays the group name, member count, and description. A large, easily clickable 'Join Group' button is located at the bottom.

fig 2.32 Group Chat

Upon joining a group, users gain access to the group chat, allowing them to view member messages directly. In the upper right corner of the group chat interface, users can find the 'more' options button.

fig 2.33 Group Chat Settings

Users wishing to invite friends to join the group can access the 'more' options, which reveal the group's member list and a clearly visible 'Invite' button, designed for intuitive use.

fig 2.34 - 2.35 Invite Friends

Users can select friends to add to the group. After selection, a distinctively colored 'Done' button appears for confirmation.

fig 2.36 User Profile

Users can directly access another user's profile for more information. The profile includes a brief description, a star rating based on user feedback regarding attitude during outings, and a list of hobbies and characteristics. This design aims to simplify the process of connecting with users who share similar interests. 

fig 2. 37 Inbox Page

Users can directly message each other within the app, eliminating the need to navigate to external messaging platforms.

fig 2.38 Final Presentation Slide Template

After reviewing several options in Canva, I chose an appropriate template for the final presentation slides.

fig 2.39 - 2.40 Cover Page Comparison

However, I was not satisfied with the slide color. I tried both dark and light versions. After asking for suggestions from my group members, they thought the light version would be better.

 
fig 2.41 - 2.42 Final  Presentation Cover Page

I then determined that our presentation slides should reflect the color scheme of our project app and applied it accordingly.

fig 2.43 Presentation Slide Progress

I volunteered to create the Task 01 and Task 02 slides, covering the selected problem through the user journey map. Despite the extensive content and time commitment, I ensured thorough completion prior to the presentation. I also reviewed the slides for omissions and added any missing information.



fig 2.44 - 3.47 Comparison of the slide

I refined the presentation slides created by other members, summarizing extensive text into concise bullet points to prevent visual fatigue during the presentation. I believed detailed explanations were unnecessary on the slides, as we could elaborate during the presentation. The first two slides represent the 'before' state, and the subsequent two, the 'after' refinement.

fig 2.48 Separation for Presentation Flow

I divided the presentation segments among the group members based on their respective strengths. As I created the initial slides, I presented the project overview. Xiao Hui, having designed the card sorting slides, presented that section. Janice, who developed the design sketches, presented her work. Kaixin, who created the design guideline slides, concluded the presentation.

fig 2.49 Conversation with Group Member

As team leader, I encouraged my group members in their task work, recognizing its importance for advancing group progress.

fig 2.50 Comments for Slide

I added comments in Canva to certain slides, providing explanations for key points to ensure group members understood the intended presentation and delivery.

fig 2.51 Conversation in WhatsApp Group

Our presentation was scheduled for 12:20 PM. I arrived at 11:00 AM and informed the group of our meeting location. We collectively decided to arrive early for practice and preparation.

fig 2.52 Final Presentation

The scheduled presentation time of 12:20 PM was delayed, and we were ultimately rescheduled to present at 2:00 PM due to the preceding groups' extended presentation times.

fig 2.53 Final Presentation Slide Refinement

Based on the feedback received, we supplemented our project presentation with additional information to enhance clarity, specifically detailing the app's MVP features, conducting a competitor analysis, and highlighting our app's unique differences.

Final Concept Proposal
Figjam Board Link
Figjam Board

Card Sorting Link (Individual)
Card Sort

Final Low-Fi Prototype (Individual)
Final Low-Fi Prototype Link

fig 2. 54 Low-Fi Prototype Video

fig 2.55 Low-Fi Prototype (Individual)

Task 03 Final Presentation Slide (Group)

fig  2.56 Final Presentation Slide (Group)
Feedback
Week 6
During the Week 6 feedback session, we received the following instructions: We are required to design a logo for the application. The low-fidelity prototypes can be created individually, and it is not necessary for everyone to develop all of them. Next week, we will present Task 3. The presentation time limit will be updated and communicated to the group. Our brainstorm ideations should focus on wireframe development. We are only required to create the main user flow, rather than all possible flows.

Week 7
To proceed effectively, Dr. Wong mentioned that we need to clearly define the Minimum Viable Product (MVP). Ensure that the user personas are presented in their entirety. Mr. Razif recommended that we can explore narrowing down the activities or identifying a niche market to refine our focus. It is crucial to clearly articulate how our app differentiates itself from competitors and what makes it unique. Finally, we need to develop a compelling tagline that encapsulates the essence of our application.

Reflection

The final task of this module, constrained by a shortened semester, required rapid execution and emphasized the critical importance of time management for timely progress. As project leader, I developed valuable interpersonal skills (GCS) and gained a deeper understanding of team dynamics, recognizing how collaborative efforts enhance project outcomes. I acknowledged the leader's responsibility in task assignment and ensuring team adherence to deadlines. Maintaining team motivation, particularly during challenging situations, was also a key leadership aspect.

During team discussions, we navigated the common issue of diverse viewpoints and individual preferences. We prioritized respecting all ideas and implemented a majority-rule decision-making process. While some team members experienced disappointment when their ideas were not selected but I understand as the UI/UX principle of prioritizing user preferences, even when personal opinions differ.

Ultimately, this project was a collective effort, with each member contributing significantly. We consider it a valuable learning experience.

Comments

Post a Comment