MAJOR PROJECT 1 / PRJ64904

20/4/2026 -26/7/2026 / (Week 1 - Week 14)

Aricia Man Yi Xuan / 0375026

Major Project I / PRJ64904

Bachelor of Design (Hons) in Creative Media

TABLE OF CONTENT

3.3 Lo-Fi Wireframe Development

Today was our first class for Major Project 1. Miss Anis briefed us on the module information and clearly explaining what we are expected to do throughout the project. After that, we were asked to form our own groups. We had the option to work individually or in groups of 2–3 people. I decided to team up with my friend Alicia for this project.

Towards the end of the class, we began discussing our initial ideas together and explored possible directions for our project. Later, we consulted Miss Anis to get feedback and to confirm whether our ideas is suitable for the assignment.

Week 2 (30/4/2026)

This week, we continued developing our ideas and find some visual references of the design and overall styles.

Week 3 (7/5/2026)

This week, discussed our campaign name and start sketching the mascot ideas, we also showed Ms. Anis the user personas.

Week 4 (14/5/2026)

This week, we already sketched out our initial mascot appearance, TiTi, which drew by Alicia. We also think of our slogan, the colour palette, and the walking routes journey using Google Map.

Week 5 (21/5/2026)

This week, we showed Ms. Anis the the lo-fi wireframe I drew in Figma, site map, and user flow diagram, and then received feedback to improve. Alicia also did some Logo design choices to decide,

Week 6 (28/5/2026)

This week, we conducted our lecture online via Teams, I've refined the lo-fi and Alicia also done visualizing the Mascot and logo design. We have consultation with Ms. Anis and continue doing the other stuffs.

Week 7 (4/6/2026)

This week, we've already have our full lo-fi wireframe, logo grid structure, merchandise ideas prepared and we discussed with Ms. Anis.

Week 8 (11/6/2026)

We have a presentation to Professor Phil Cleaver of our proposal on 9/6/2026, showing him our project concept ideas. On 11/6/2026, we continue developed the hi-fi wireframe and merchandise ideas.

Week 9-10 (18/6/2026 & 25/6/2026)

Presentation week, we presented our final proposal to Ms. Anis and she gave us feedback for improvements on 18 June 2026.

Week 11&12 (2/7/2026 & 9/7/2026)

These two weeks are self-directed learning, me and Alicia are preparing for the final presentation and we sent our progression via Teams to Ms. Anis for feedback.

TAP ME BACK TO TOP

INSTRUCTION

Fig.2.1.1 Module Information Booklet

TAP ME BACK TO TOP

MAJOR PROJECT 1

Group Leader: Alicia Low Ker Chia (Graphic Design)

Group Member: Aricia Man Yi Xuan (UI/UX Design)

3.1 Initial Idea Development

- Week 1 -

After forming into groups, we started brainstorming our project ideas in Google Docs. Since Alicia specializes in graphic design and I specialize in UI/UX design, we decided to combine our strengths to develop a project that integrates both visual branding and interactive experience.

Main Idea:

A Malaysia / Kuala Lumpur Travel Guide that includes both a printed illustrated paper map and a digital interactive map (app/website).
The concept focuses on helping tourists and locals explore KL in a more engaging way through walking routes, hidden spots, local food, and small interactive missions.
The paper map will act as a collectible and visual guide, while the digital map will provide interactive features like QR missions, mini games, and location-based content.

- Week 2 -

Fig.3.1.1 References from Pinterest

We continued finding references from Pinterest for design styles. We also expanded our concept by:

Adding interactive "photo stitching spots"
Merchandise package

Pinterest Mood board: Link

Fig.3.1.2 User Personas / (Week 2, 30/4/2026)

I also created our user personas, which our target audience were mainly tourists and Malaysians, and the age group was all age.

TAP ME BACK TO TOP

3.2 Sketches (Mascot & Logo)

- Week 3 -

Fig.3.2.1 Mascot Sketches / (Week 3, 7/5/2026)

This week, we discussed and explored different ideas for our campaign name. Then, we started sketching logo concepts and mascot ideas to create a stronger visual identity for the campaign and app branding.

Eventually, we decided our campaign name as "Notes from KL". It's because we can actually change the "KL" into different other locations like "Selangor, Penang, etc", allowing the campaign to expand and adapt to different places and themes over time.

- Week 4 -

Fig.3.2.2 Mascot Ideas & Campaign Logo / (Week 4, 14/5/2026)

Our mascot is a little mouse called "TiTi" (suggested by Ms. Anis) drew by Alicia, it wears a vest and a headband, holding a paper map that reflects our walking campaign. We showed Ms. Anis our mascot appearance and name, our campaign slogan, colour palette options, user personas #3, and initial plan of the campaign walking routes journey with google map.

TAP ME BACK TO TOP

3.3 Lo-Fi Wireframe Development

- Week 5 -

Fig.3.3.1 Lo-Fi Wireframe Process in Figma / (Week 4-5)

Fig.3.3.2 Lo-Fi Wireframe Development

After presented the current progress of the walking campaign project to Ms. Anis (Week 5, 21/5/2026), I started refining the wireframes to improve the user experience and make the application flow more engaging.

Things to refine:

Add TiTi pop-up interactions along the walking route (recommendations)
Add walking guidance tips inside the app (reminders such as bringing water bottles and wearing proper shoes)

Fig.3.3.3 Added TiTi pop-up interaction / (Week 5, 21/5/2026)

I added a TiTi pop-up guide during user's walking journey (Fig.3.1.13). TiTi will randomly appear as a small animated chat bubble on screen now.

Pop-up Content Type:

Nearby restaurants
Cafés
Fun spots / landmarks
Photo-worthy places
Rest stops / shaded areas

Fig,3.3.4 Lo-Fi Wireframe Overview

Lo-Fi Wireframe Link: click here

TAP ME BACK TO TOP

3.4 FigJam Development

Fig.3.4.1 FigJam Overview / (Week 5, 18/5/2026)

This week, I will start drawing the Lo-fi wireframe (Fig.3.1.5) in Figma for our campaign app and also do the user journey map, cite map, and user flow in FigJam (Fig.3.1.5).

Figma Dev Mode: Link
Figma Prototype: Link
FigJam File: Link

Fig.3.4.2 User Journey Map #1

Fig.3.4.3 User Journey Map #2

Fig.3.4.4 User Journey Map #3

Fig.3.4.5 Site Map #1

Fig.3.4.6 User Flow #1

TAP ME BACK TO TOP

3.5 Logo & Mascot Design

Fig.3.5.1 Mascot Design

Fig.3.5.2 Logo Design

In addition, our logo and mascot design created by Alicia have been completed and approved by Ms. Anis.

- Week 7 -

Fig.3.6.2 Logo Grid

This week, Alicia had completed our logo construction grid, minimum size, clear space, black and white version. We started drawing the merchandise design in class.

TAP ME BACK TO TOP

3.6 Merchandise Design Process

- Week 6 -

Fig.3.6.1 Merchandises References - Pinterest

This week, we started developing the merchandise design. We began by gathering several references and inspirations on Pinterest (click here for resources) to explore different types of merchandise design. The merchandise we included were:

Paper Map Kit:

Transparent Film Reversal Printing
Paper Map
Pen

Freebies Kit (Box): Limited redemption

Sticker
Bookmark
Postcard
Embroidery patch
Memo pad

Fig.3.6.2 Transparent Film Reversal Printing / (Week 8, 14/6/2026)

For one of our paper map kit (transparent film) design, I draw it in Adobe Illustrator. I design both vertical and horizontal layout. Participants will explore the city through a framed view and capture unique moments along their journey.

Fig.3.6.3 Transparent Film Reversal Printing - Horizontal / (Week 8, 14/6/2026)

Fig.3.6.4 Transparent Film Reversal Printing - Vertical / (Week 8, 14/6/2026)

- Week 8 -

Fig.3.6.5 Proposal - Canvas

Canvas Link: click here

This week, we presented our proposal to Professor Phil Cleaver for feedback.

- Week 10 - 11 -

Fig.3.6.6 Instruction Card Design #1 (Week 10-11)

For our stamping booth, we have an instruction card for the tutorial of stamping on the paper map kit. I came out with two design options, both layout and colour schemes are different. However, the final graphic design and stamp ink colours have not yet been decided, as we are still testing which ink colours will appear most clearly and effectively on the paper.

Fig.3.6.7 Instruction Card Design #2 (Week 14)

I redesigned the instruction card as we think the previous one doesn't look formal enough. Therefore, I came out with this new vertical layout design that I took reference from the picture on the right that we found at central market.

TAP ME BACK TO TOP

3.7 Hi-Fi Wireframe Process

Fig.3.7.1 Design System #1

Fig.3.7.2 Design System #2

Fig.3.7.3 Design System #3

Fig.3.7.4 Design System #4

During the hi-fi process, I created a design system to ensure consistency, scalability, and visual harmony across all screens of our app. The design system included:

Typography (Montserrat & Shantel Sans)
Colour palette
Spacing
Icons Used
Corner Radius
Slider
Navigation Bar
Loaders
Social Button
Toggle
Notification
Selection
Carousel
Hover Effect
Button Groups
Input Field
Icon Button
Avatars

Fig.3.7.2 Hi-fi wireframe (before) / (Week 8, 10-13/6/2026)

Hi-fi wireframe Figma link: click here

After receiving feedback from Mr. Shamsul, he gave me some advised for the wireframe:

Refined setup page
Change the navigation bar design
Adding a loading page before entering the map
Notification pop-up transition should come from bottom to top
Add a grabber to scroll down
Add gamification system (educational information)
Give a discount of using LRT after completed
Corner radius should be consistency
Add a share page
Refine collection page, too much white space
Adding a sign up & sign in page

Fig.3.7.3 Sign Up & Sign In page

I started refining by added a sign up and sign in page so the app can personalized user's journey.

Fig.3.7.4 Setup page

Additionally, I added a few pages to visualize the animation of the loading setup page. It's like a footprint walking along the journey.

Fig.3.7.5 Loading page

This is the loading page before entering the map page. I created a progression bar and animated it.

Fig.3.7.6 Share Page

For the Life Shots page, I created a few pages to showcasing the share button and delete button. Now, users can click the select icon > choose the picture > share > share to platforms / print / save images > delete.

Fig.3.7.7 Edit Photo strip

I also added a new features after capturing life shots picture. This page allowed users to draw simple decoration on their photo strip. It would be more engaging and more customization.

Fig.3.7.8 Stitch Page

In the Stitch page, I created some more detailed pages a new AI recognition features. After capturing their stitch photo, TiTi will have a pop-up tips saying "Hey! Try long-pressing the building to learn its story", users can long-pressing the building for AI recognize. Then, Users can see the building information and they can share the location as well. This is one of our gamification system to increase interaction and engagement.

Fig.3.7.9 LRT discount reward

In "My Collection" page, I redesigned the badge names and layout, categorized them as:

Exploration Badges
Photography Badges
Stitch Badges
Campaign Completion Rewards

Under Campaign Completion Rewards, I added a new reward system, which is users will get one free LRT ride after completed our campaign. This is to promote and attract users to participate our campaign and also having a monetization system.

To use this, users just need to show the bar code to any of LRT station counters to redeem it.

Fig.3.7.10 Event Banner - Adobe Illustrator / (Week 8, 13/6/2026)

For the campaign update event banner, I created our own poster for the banner using Adobe Illustrator to draw, including:

Merdeka
Hari Raya
Deepavali
Chinese New Year

Fig.3.7.11 Badges / (Week 8, 13/6/2026)

I also created our own badges design using Illustrator.

First Step
Urban Explorer
Memory Maker
Story Teller
First Stitch
Time Traveler

Fig.3.7.12 Frame Design / (Week 8, 14/6/2026)

For the frame design, we have 3 basic frame colours, Vintage Postcard Frame, and TiTi Adventure Frame. I designed the colours frame directly in figma, and the two others designed in Adobe Illustrator.

Fig.3.7.13 Future Campaign Event Update / (Week 8, 14/6/2026)

Additionally, I added a future event joining pages. Users can slide the button to join the future event. Once the event start, the app will send notification or announcement to users.

- On-Site Experience in Kuala Lumpur -

Fig.3.7.14 Selfie with Alicia / (Week 12, 8/7/2026)

View videos in Google Drive: click here

To ensure the walking campaign provides the best possible experience, Alicia and I visited KL and completed the proposed walking route. To document the process, I brought along my DJI Pocket 4 to record our entire walking journey.

Fig.3.7.15 Shop in Central Market / (Week 12, 8/7/2026)

We spent about 3 hours completing the campaign because we stopped at every location to explore the surroundings and observe the environment. The walking route itself can be completed in approximately 40 minutes if participants walk directly from one checkpoint to another. However, as this campaign is designed to encourage exploration rather than rushing, we estimate that most visitors would spend around 3 to 5 hours completing the journey if they stop to visit the attractions, take photos, shop, and enjoy local food along the way.

- Map Refinement -

Based on our observations, we finalized the routes and spots that is more practical, enjoyable, and convenient for participants.

Final 6 Spot Selected:

Pasar Seni MRT Station (Start)
Central Market
Pejabat Pos Besar
River of Life
Petaling Street
Rex KL
Back to Pasar Seni MRT (End)

Fig.3.7.16 Refine Homepage & Map Page / (Week 12, 9/7/2026)

I refined the wireframe design of the homepage and map page. I adjusted the walking schedule as well to match the real walking duration and changed the 6 location spots. The final design of the map routes will be design by Alicia further so this is just an example.

Fig.3.7.14 Hi-Fi Wireframe Overview

Hi-fi wireframe Dev Mode link: click here

TAP ME BACK TO TOP

3.8 Site Map & User Flow

Fig.3.8.1 Site Map (Final)

Fig.3.8.2 User Flow Diagram (Final)

Fig.3.8.3 FigJam Overview

FigJam Link: click here

TAP ME BACK TO TOP

3.9 Final Proposal

Fig.3.9.1 Final Proposal (Week 9)

Canva Link: click here

Fig.3.9.2 Final Proposal Document - pdf / (Week 9, 19/6/2026)

TAP ME BACK TO TOP

3.10 Final Outcome

Final Presentation Slides: click here

Project Document Google Drive Link: click here

TAP ME BACK TO TOP

FEEDBACK

TAP ME BACK TO TOP

REFLECTION

Experiences:

Working on this major project was a really meaningful and rewarding experience for me as it was my final project, and I had put my best effort into it. Throughout the journey, I've done doing research, creating prototype, and also go to Kuala Lumpur with Alicia and experience the entire walking route.

At the beginning stage of this project, we were quite struggling of deciding what kind of ideas would be interesting and achievable for this project. Eventually, we came out with an idea of creating something that could encourage people to explore KL in a different way. After many discussions, we decided to develop a walking campaign suggested by Ms. Anis. It could promote slow tourism and allowing visitors to explore Malaysia.

Once we finalized our idea, we moved into the research stage. We wrote our project proposal, where we clearly explained our campaign concept, objectives, target audience, proposed route, and expected outcomes. The design process involved many rounds of discussion and refinement. I created low-fidelity wireframes to visualize the basic layout and structure of our campaign materials. Once we were satisfied with the overall structure, I gradually developed high-fidelity designs.

We also created mock-ups of physical product to visualize how our campaign would appear. Most of the mockups created by Alicia, and I designed some of it. Seeing our designs applied to promotional materials made the project feel much more realistic.

One of the most memorable parts of the project was conducting the on-site testing in Kuala Lumpur. I brought along my DJI Pocket 4 to record the entire experience so that we can document our observations. We start our journey after 2 p.m., it was a bad idea. The weather that day was extremely hot, and both of us were struggling while walking from one location to another, and I felt like I almost going to get heatstroke. Based on our own experience, we decided that starting the walking campaign after 4 p.m. would be a much better option because the weather would be more comfortable, visitors would feel less exhausted, and they could enjoy the attractions more.

After completing the testing and gathering observations, we returned to refine our final designs. We adjusted certain information, improved the presentation of the route, and made changes based on our real-life experience for final presentation.

Observation:

I realized that during the prototype stage, receiving feedback from specialist was one of the most valuable parts of the process. Their professional perspectives helped me identify issues that I might have overlooked while designing. Ms. Anis, Ms. Aiman, and Mr. Shamsul gave me a lot of feedback like design principles, user flow, and overall user experience. This helped me improve the prototype and make the final outcome more structured and user-friendly.

The site visit also let us discovered that some walking paths and locations appeared different in reality compared to what we expected. For example, one of our planned stops was the Old Clock Tower. From our initial research, we expected it to be an interesting location that could become one of the highlights of our walking route. However, when we arrived, we found that the actual surroundings were not as impressive as we expected. The area was also undergoing construction at that time, which affected the accessibility. Hence, we decided to replace the location with another nearby attraction.

Findings:

Through this final project, I gained a deeper understanding of UI/UX design. This project improved my creativity and encouraged me to think beyond traditional design approaches. Throughout the prototype development process, I designed new features, interactive elements, app layouts, and unique gameplay experiences for users. I also learned to consider usability, accessibility, comfort, and the emotions of users.

Besides, I learned that the most important finding was experiencing the journey from the user's perspective. By physically walking through the route ourselves, we were able to identify problems, understand user needs, and improve the overall experience.

Since this was my final project, it was also a chance for me to reflect on my growth throughout my studies. The difficulties we faced helped us understand the importance of testing and improving our work.

Overall, I was very satisfied with our project outcome so far and I'm happy to group with my partner, Alicia. She is a very good teammates and we communicate very well through the whole journey without conflicts. It was such a valuable and unforgettable experience. Moving forward, we will continue to develop this walking campaign project in Major Project II.

TAP ME BACK TO TOP

Aricia Man Yi Xuan (0375026)

Search This Blog