.jpg)
LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / MAJOR PROJECT I
Task 03: Concept Presentation
JUMPLINK
Instructions
Task 03: Concept Presentation
Feedback
Reflections
In this task, we need to brainstorm ideas using sketches and gather design inspiration from various websites. Each member must also conduct at least one card sorting session with a user and compile the data to create the information architecture for our proposed solution.
Based on the information architecture, we will develop a user flow diagram. For the design guidelines, which include color schemes, typography, and UI components, we can choose to complete them individually or as a group. Lastly, each member must create an initial low-fidelity prototype, either as sketches or wireframes. All these elements will be compiled into a presentation slide and presented to the supervisors on March 19.
Progress
To begin the card sorting process for all members, we first needed to compile a complete list of features for our proposed mobile application. These features would serve as the cards for the card sorting method. I listed down all the essential features to ensure the platform is comprehensive and includes an MVP that stands out from others. I also incorporated features from Task 01 (our initial concept) and those based on user feedback, interview insights, and observed data patterns.
 |
| Figure 1.1 Features list. |
Each member was required to contribute their own feature list so we could gather diverse ideas and merge them into a more complete set. After collecting all inputs, the leader and I worked together to finalize the list.
 |
| Figure 1.2 Finalize. |
We chose to use Optimal Workshop for the card sorting method because of its clear layout and instructions, making it easier for users to understand the process. Additionally, since it is an online platform, users could complete the card sorting anytime and anywhere through a shared link. For the card sorting method, we decided to use a hybrid approach, which provided five predefined categories (representing the main pages of the app) while allowing users the flexibility to create new categories as they saw fit.
.png)
Figure 1.3, 1.4, 1.5 Optimal workshop.
I reached out to 2 potential MeetMatch users to participate in the card sorting, specifically those I had previously interviewed, as they are our target users and have relevant needs for the platform.
.png) |
| Figure 1.6 Optimal workshop. |
Once I collected their card sorting results, I organized the data into a FigJam board for easy review and discussion with the team.
 |
| Figure 1.7 Card sorting result. |
At the same time, I encouraged group members to start drafting the information architecture and user flow beforehand to avoid unnecessary delays during our online meeting. I used Miro to create an initial user flow draft, focusing on common mobile app flows, such as onboarding, sign-up, login, and password reset, as these processes remain consistent across most applications.
I also took the time to create a structured template in FigJam for both the information architecture and user flow before the online meeting. This helped streamline the discussion and decision-making process, allowing us to focus on refining the content rather than spending time on layout and formatting.
Figure 1.12, 1.13 Template.
After gathering all card sorting results, we held an online meeting to finalize the information architecture and user flow. However, I noticed that the team members had not prepared drafts, which led to spending additional time discussing ideas from scratch.
Figure 2.1, 2.2, 2.3 Progress screenshot.
During the meeting, we reviewed the card sorting results and refined our information architecture. Initially, we had planned for five main pages, but we decided to merge the Explore page with the Home page, reducing it to four. My original idea was to have the Home page dedicated to AI-powered activity matching, allowing users to receive event suggestions or assistance through text or voice. However, both the card sorting results and team members suggested incorporating manual search options for events and activity groups within the same page. To balance both approaches, we integrated AI-powered and manual search features into a single, switchable interface.
 |
| Figure 2.4 Progress screenshot. |
Additionally, we noticed that some users preferred an extra category to organize additional features, such as gaming and coin collection. To prevent clutter, we introduced subcategories to group detailed features logically.
 |
| Figure 2.5 Final information architecture. |
Finally, we proceeded with finalizing the user flow. I incorporated the draft flow I had prepared before the meeting and adjusted it according to the finalized information architecture.
Figure 2.6 Progress screenshot.
As we finalized the user flow, I pointed out that the flow I had previously created was linked to an endpoint, so we needed to ensure all paths connected properly. After making these adjustments, we completed the user flow and moved on to gathering design inspirations.
 |
| Figure 2.7 Final user flow. |
While preparing the feature list, we also researched design inspirations from online sources. I explored event applications, analyzing how they organize information and incorporate features. I focused on finding creative UI elements and visual styles that are engaging, as our app shouldn't feel too formal or dull—it needs to match our theme of discovering fun activities, event groups, and meeting new friends. I also studied how other apps balance a playful yet professional design. After selecting relevant inspirations, I saved and uploaded them to the FigJam board for reference.
Figure 3.1 Progress screenshot.
After uploading our design inspirations, we discussed and explained the choices we made. As a group, we aligned on a design direction that best suited our mobile application. We decided on a minimalist and modern design while incorporating fun and creative visual elements, illustrations, and colors. Our goal was to strike a balance between playfulness and a sleek, professional aesthetic to keep the app engaging yet polished. Additionally, we planned to integrate a mascot for the AI feature, ensuring a consistent and recognizable presence throughout the user experience.
 |
| Figure 3.2 Final design inspiration. |
In Week 6, Mr. Shamsul reviewed our work and praised us for having a well-developed and complete user flow. Moving forward, he advised us to complete the remaining tasks. He suggested that we design a logo for the mobile application that aligns with the style and concept of our proposed solution. Additionally, each member needs to create a unique task flow, ensuring that all members contribute different application pages. For the brainstorm ideation, only rough sketches of the application are required. We need to finalize all these tasks, compile them into a presentation slide, and present them in Week 7 on Wednesday.
Since there was limited time left, we quickly assigned tasks to each member, focusing on design guidelines, including the color palette, typography, UI components, logo design inspirations, and task flows.
Color palette
I preferred including one to two bright colors to make the overall style more attractive and fun. However, I didn’t want the entire palette to consist of bright colors, as we are designing an event app. While the app encourages outdoor activities, it also needs some formal tones to maintain clarity and professionalism in presenting event details. This balance would enhance readability and create a visually appealing yet functional design.
Figure 4.1, 4.2, 4.3 Research. (Pinterest)
After researching and gathering visual references from Pinterest, I used PaletteMaker to test the suitability of different colors for a mobile application.
 |
| Figure 4.4 PaletteMaker. |
Through a process of trial and error, I ultimately finalized two color palettes that I found to be the most suitable.
 |
| Figure 4.5 Shortlisted color palette. |
Typography
For typography, I researched sans-serif fonts commonly used in mobile applications for readability and style. After reviewing several articles, I shortlisted Raleway and Work Sans. I preferred Raleway because, besides being readable, it has subtle fun elements, such as the unique shape of the letter "W", adding a playful touch without compromising professionalism.
Figure 4.6, 4.7, 4.8 Shortlisted typography.
UI Components
I uploaded two reference images for UI components:
A uniquely designed navigation bar with a curved and rounded edge, deviating from the usual straight or standard designs. I felt this suited our theme well. A creative card layout where one corner has a larger rounded edge than the others. This slight asymmetry adds a unique visual element compared to the usual evenly rounded cards.
 |
| Figure 4.9 Shortlisted UI components. |
Logo Design
As discussed in our design inspiration, we wanted a mascot to be present throughout the app. I thought of designing the logo to resemble a robot or mascot, symbolizing our AI-powered activity matching feature, which is our app’s MVP (Minimum Viable Product). I also found some logos featuring the letter "M" as references, aligning with our app name, "MeetMatch", ensuring the logo visually represents the brand.
Figure 4.10, 4.11 Shortlisted logo design.
Task Flow
I listed four different task flows, each representing different user scenarios. My goal was to ensure that each task flow focused on one of the four main pages of the application, demonstrating distinct interactions and core features. This approach would allow us to showcase the app’s most important functionalities when creating the low-fidelity prototype.
 |
| Figure 4.12 Task flow. |
 |
| Figure 4.13 Design inspiration board. |
We then held a meeting to finalize these elements, deciding to keep the design guidelines consistent as a group rather than individually, ensuring a unified style throughout the project. We also combined and refined the task flows to ensure they are more logical and effectively showcase the features of our application. Each task flow includes a similar number of pages to maintain fairness among team members. Additionally, the member assigned fewer pages will be responsible for creating the logo.
Figure 5.1, 5.2 Progress screenshot.
Besides finalizing the design guidelines, I suggested creating a UI components set to ensure consistency when developing the low-fidelity prototype. This set includes the chosen typography along with text styles such as font weight and size. It also covers the color palette, iconography (including a standardized icon set), as well as the margin and icon sizes used throughout the app. For iconography, I recommended using the Iconify plugin in Figma, as it is free and offers a wide range of icon styles. After reviewing different options, we decided to use Fluent UI System Icons from Iconify, setting the icon size to 32px. Additionally, we determined the frame option and grid system, selecting iPhone 14/15 Pro Max as the base and setting the margin to 22px.
Figure 5.4, 5.5, 5.6 Progress screenshot.
After that, I proceeded with creating the low-fidelity prototype for my assigned task flow. Before starting, I researched the status bar spacing for iPhone 14/15 Pro Max to ensure the prototype would be more professional and responsive. I found that the previously decided spacing was insufficient, so I shared my findings in the WhatsApp group and asked for the team's agreement to adjust the status bar space to 59px and the bottom space to 34px.
Figure 6.1, 6.2 Research.
Additionally, I researched the appropriate bottom navigation bar size for iPhones to avoid making it too small or too large, which could cause inconsistency. I shared my findings with our leader and informed her that 24px is the standard icon size for most mobile applications. However, she preferred 26px, so I announced in the group that our final icon size would be 26px.
 |
| Figure 6.3 Research. |
Then, I also updated these changes in the FigJam board so that all members could follow the latest decisions. This ensured that everyone was aligned with the new status bar spacing, bottom space, and icon size, maintaining consistency throughout our low-fidelity prototypes.
 |
| Figure 6.4 Refined design guidelines. |
Low-Fi Prototype
To ensure the layout and design are both user-friendly and creative, I reviewed several visual references. I analyzed how other applications structure their UI elements, spacing, and interactions, focusing on designs that effectively balance creativity and usability.
 |
| Figure 7.1 Visual references. |
Bottom Navigation Bar
After resolving these issues, I started creating the bottom navigation bar. I found a design similar to what we wanted in the Figma Community, so I opened it to analyze how it was built. However, I noticed that the approach used in that design could cause issues—since it relied on a white vector overlaying a rectangle bar, the effect would become visible if the app’s background wasn’t white.
 |
| Figure 8.1 Issue. |
To avoid this problem, I redesigned the bottom navigation bar from scratch. Instead of using a vector overlay, I used the subtract function with the rectangle bar, ensuring it worked seamlessly on any background color. Next, I created four components, each representing a different navigation state—where a different icon would float up with a circular background when clicked. Finally, I used Smart Animate in Figma’s prototype mode to link the states, allowing the icons to animate smoothly when users interact with the navigation bar.
Figure 8.2 - 8.5 Progress screenshot.
After completing all the prototypes, I revisited the bottom navigation bar because I noticed that the animation wasn’t as smooth as I wanted. Additionally, I wanted to adjust the size of the circular background behind the icons for better visual balance. To improve the design, I redid the bottom navigation bar from scratch, refining the animation transitions and ensuring a smoother, more polished interaction. After making these adjustments, I successfully created a functional and visually appealing bottom navigation bar that enhances the overall user experience.
Figure 8.6, 8.7 Refinement.
Home Page (Voice & Text AI-Powered Activity Matching)
After completing the bottom navigation bar, I proceeded with designing the home page, which features the Voice & Text AI-Powered Activity Matching. To enhance usability and flexibility, I created a switching component that allows users to toggle between AI Assist and manual explore mode. When users are in AI mode, the page displays “AI Assist,” while clicking the icon beside it switches the interface to manual explore mode, displaying “Explore.”
Figure 9.1, 9.2 Progress screenshot.
By default, the home page opens with Voice & Text AI-Powered Activity Matching, allowing users to either type in the text field or click on the microphone icon to start a voice chat with the AI. I kept the design and layout minimalistic to reduce unnecessary clicks, ensuring that users can quickly access the AI-powered feature, which is one of the app’s most innovative functionalities.
After completing the prototype, I showed it to a potential user for feedback and suggestions for refinement. He pointed out that the icons for manual explore and AI Assist were not obvious enough, which might make it unclear to users that they could be clicked to switch modes. He suggested using more recognizable icons and redesigning the button layout, as the current version looked a bit off. He also recommended using text for both buttons instead of a mix of text and icons for better clarity.
Based on his feedback, I made adjustments:
I initially changed both buttons to text-only but found that it made the layout feel too crowded with less white space.
Figure 9.3, 9.4 Button adjustment.
To maintain a clean and balanced design, I reverted to the original format (one button with text and the other with an icon), but I improved their clarity. I changed “AI Assist” to “Chat with AI” to make the feature’s purpose more intuitive. I also updated the icons: manual explore now uses a simple search icon, while Chat with AI features a conversation icon with “AI” inside, making them more recognizable.
Figure 9.5, 9.6, 9.7 Refinement.
AI Chat Page
After completing the home page, I proceeded with designing the AI Chat page. When the user clicks on the text field or records a voice message on the home page, the chat page smoothly slides up, and if the user selects the text field, the keyboard automatically appears.
For the chat page layout, I included:
An exit button at the top left corner for easy navigation.
A chat history button at the top right corner, allowing users to refer back to previous conversations.
Suggested questions from the AI, displayed above the text field, to help users who may not know what to ask. This improves usability by saving time and making interactions more convenient.
To make the prototype more realistic, I used an official iPhone keyboard component from Figma.
 |
| Figure 10.1 Progress screenshot. |
Once the chat page was complete, I duplicated it and positioned it below the home page, then linked them using Smart Animate in Figma. This setup enables a smooth slide-up effect when the user taps the text field on the home page, and a slide-down effect when they press the exit button on the AI Chat page.
 |
| Figure 10.2 Progress screenshot. |
After showing the prototype to a potential user for feedback, he suggested changing the chat history icon because it might cause confusion and make it hard for users to recognize its function. Based on his feedback, I selected a new icon that better represents chat history, making it more intuitive and easier for users to understand.
 |
| Figure 10.3 Refinement. |
Event Suggestions
Next, I proceeded with designing the AI-generated replies that appear after a user selects a suggested question. The AI will generate responses along with event suggestions based on the user’s input. For the event suggestions, I decided to use a card-based layout with rounded edges, aligning with the design inspiration we previously established. To enhance usability, I included tags at the top of each card, allowing users to quickly identify the activity type and duration at a glance.
Each card features an attractive event image, the event name, and its location, providing essential details at a glance. This structure enables users to quickly scan through the options, identify activities that interest them, and click for more details, instead of having to review every event individually.
Figure 11.1, 11.2 Progress screenshot.
To achieve the effect of an automated response generation, I utilized "After Delay" and "Scroll To" interactions in Figma. This ensures that, after a set time, the event cards appear automatically, creating a more dynamic and realistic AI-generated experience. Additionally, the screen automatically scrolls to the latest replies, making the interaction feel seamless and intuitive for users.
 |
| Figure 11.3 Progress screenshot. |
Initially, I included a love icon beside each event card to allow users to save suggested events directly. However, after receiving feedback from a potential user, he suggested that users would likely need more details before deciding to save an activity. Instead, he recommended placing the save option inside the event details page rather than on the card itself. Based on this feedback, I removed the save icon from the event cards and replaced it with an arrow button to indicate that the card is clickable, making it clearer for users to access more details about the event.
 |
| Figure 11.4 Refinement. |
Event Details
After that, I proceeded to complete the event details page. I placed the event image at the top to immediately capture users' attention. Below the image, I included tags to help users quickly identify the type of activity. Following the tags, I added the event name and key information such as location, operating hours, and ticket price to ensure users can quickly access the most relevant details. Below this section, I included a description of the event, an embedded map for location reference, a "Friends Going" section displaying friends attending from the user's list, and a "Reviews & Shared Moments" section. The Reviews & Shared Moments section is presented in an image card format to include not just ratings and reviews but also visual content shared by users, making the experience more engaging. For the bottom navigation, I added a “Join the Fun” button, allowing users to add the event to their calendar with a single tap. Additionally, there is a plus icon button for users to create event groups and invite friends or platform users to join. Lastly, a share button is included to let users easily share the event with others.
 |
| Figure 12.1 Progress screenshot. |
I struggled with the placement of the share button, unsure if it should be part of the bottom navigation bar. I initially tried placing it next to the event name, alongside the save button, to keep only the "Join the Fun" and "Create Event Group" buttons at the bottom. However, this made the top section feel too crowded.
 |
| Figure 12.2 Button adjust. |
After reconsidering the importance of each feature, I decided to swap the save and share buttons. Now, the share button is placed next to the event name, while the save button is positioned in the bottom navigation bar, ensuring a more balanced and user-friendly layout.
Figure 12.3, 12.4 Refinement.
Save Activity/ Event
Then, I created a pop-up notification for the save activities feature. When a user clicks to save an activity, a slide-up notification will appear, confirming that the activity has been successfully saved. The notification also informs the user that they can review their saved activities in the saved list. This ensures better user feedback and improves the overall user experience by making the action clear and intuitive.
Figure 13.1, 13.2 Progress screenshot.
Home Page (Explore)
After completing all the required pages for the task flow, I noticed that there was still some time left. So, I decided to enhance the completeness of the design by creating the manual explore page. This also ensured that the switching button between AI-powered search and manual explore functioned properly.
The manual explore page allows users to search using text and includes an advanced filter where users can filter events based on budget, location, and type of activity for more accurate recommendations. Additionally, the page features a weather forecast and a map-based search, enabling users to explore events based on their current or preferred location.
Final Individual Prototype
Upon completing the prototype, I proceeded with creating the presentation slides for our upcoming presentation. I was in charge of the Card Sorting Method and Information Architecture sections. I ensured that all the necessary details were included while bolding key points to make it easier to follow during our presentation with the supervisor.
Figure 15.1 - 15.5 Progress screenshot.
However, after I completed my slides, the team leader felt that they were too lengthy and decided to revise them into a more concise, point-form format for better clarity and readability.
 |
| Figure 15.6 Point form. |
During the presentation, Dr. Wong suggested that we include more detailed slides showcasing the final user personas, user journey map, and information architecture. We explained that due to the limited presentation time, we had summarized the content to keep it concise. Additionally, Mr. Razif recommended adding the MVP (Minimum Viable Product) of the application and clearly highlighting its value proposition. He emphasized the importance of communicating the unique selling points of our app compared to competitors. He also suggested that we create a tagline that captures the essence of the mobile application.
Based on the feedback we received, I was responsible for adding the user persona and user journey map, along with more detailed explanations. Additionally, I included the user interview process, which covered the interview question set, collected user interview data, and key takeaways from the interviews.
Final Concept Presentation
FigJam Board
Link to FigJam
Task Flow:
2. User utilizes the Voice & Text AI-Powered Activity Matching feature to get instant activity suggestions for the day.
3. User explores "Digital Art Wonderland", the suggested event details for more information.
4. User finds an interesting event and saves it for later.
Final Presentation Slides
Week 06
Mr. Shamsul reviewed our work and praised us for having a well-developed and complete user flow. Moving forward, he advised us to complete the remaining tasks. He suggested that we design a logo for the mobile application that aligns with the style and concept of our proposed solution. Additionally, each member needs to create a unique task flow, ensuring that all members contribute different application pages. For the brainstorm ideation, only rough sketches of the application are required. We need to finalize all these tasks, compile them into a presentation slide, and present them in Week 7 on Wednesday.
Week 07
Dr. Wong suggested that we include more detailed slides showcasing the final user personas, user journey map, and information architecture. Additionally, Mr. Razif recommended adding the MVP (Minimum Viable Product) of the application and clearly highlighting its value proposition. He emphasized the importance of communicating the unique selling points of our app compared to competitors. He also suggested that we create a tagline that captures the essence of the mobile application.
REFLECTIONS
At the beginning of this task, I felt overwhelmed by the workload, as there were many tasks to complete within a short time before presenting to the supervisors. However, thanks to the active participation of my group members in this task, we managed to complete most of the tasks individually first before coming together to combine and finalize them.
Through this task, I realized that finalizing ideas as a team can be challenging because everyone tends to be persistent about their own ideas. While it's natural to prefer the ideas we generate ourselves, it's crucial to consider and accept others' suggestions, as this is a group project. Incorporating different perspectives often leads to a more well-rounded and complete solution.
Additionally, I learned that early task assignment is essential in a team project. Proper time management allows enough time for refinement, ensuring higher-quality work and a smoother overall process.
Comments
Post a Comment