APPLICATION DESIGN I / PROJECT 4 / DST60504

17/12/2025 - 31/12/2025 / (Week 13 - Week 14)

Aricia Man Yi Xuan / 0375026

Application Design I / Project 4 / Hi-Fi App Design Prototype / DST60504

Bachelor of Design (Hons) in Creative Media

Google Drive Link

TABLE OF CONTENT

4. Reflection

LECTURES

WEEK 5 - WEEK 9: click [here]

WEEK 10 - WEEK 12: click [here]

WEEK 13 / 17/12/2025

This week we were introduced to the topic "User Interface Visual Elements" and "Monetization & Gamification".

- Key Notes -

Visual Elements:

1. Line

2. Shape

3. Colour

4. Form

5. Texture

6. Space

Design Principles:

1. Text (Inter default size: 12)

2. Colour (60-30-10 rule)

3. Shadow (Do not add shadow in text & non-clickable elements)

4. Buttons (Keep height between 40pt - 60 pt)

5. Icon (Bounding box: 24x24px)

6. Photos (similar)

7. Illustrations (real photos)

8. Cards (Use "..." if long text)

9. White space (create focus)

Navigation Component:

1. Search Bar

2. Breadcrumb

3. Pagination

4. Slider

5. Tags

6. Icons

7. Carousel

8. Mobile Specs

User Interface Controls:

1. Dropdown (Single line/multiple options)

2. Radiobutton (Only one selection)

3. Checkbox

4. Toggle

5. Date and Time picker

6. Grids

Monetization:

- The process of converting something into money.

- User Interactions: Advertisement, Subscriptions, Remove ads, Pay per use, Freemium

- Active purchase: Affiliate Marketing, Sales, Microtransactions, In-app purchases

- Intellectual Property: Licensing

- Others: Sponsors, Donations, Data

Gamification:

- The use of game elements in non-game contexts to motivate people and increase engagement

Games:

- Customization

- Levels

- Experience

- Statistics\

- Leaderboards

- Achievements

- Medals

WEEK 14 / 31/12/2025

This week was our last lecture of this semester. We were introduced to the topic "Portfolio".

- KEY NOTES -

Who reads it?

- Human Resources

- Peers

- Managers

Goals?
- Mix' n' Match (Past & Growth)

- It's about TEAM

What is inside?

Intro
- What was the project about? (How long? Who worked on it? What were you in charge of?)
- What is it? (What is the format? What does it do? Who will use it? How does it help them?)
Context
- What is the environment?
- Where do we use the product?
- What did it aim to solve?
- What are the stakes?
- What are the challenges?
Specs
- How to do it?
- Who is making it?
- What are they using?
- What are the limits?
Demo
- How it works
- What it looks like
- How it moves
- Show it in use
- Show it with people
Features
- Everything it does (function, parameters, flexible)
- What it does better (comparison, data & facts)
Choices
- What was chosen
- How decision was made
- Research result
- What they do
- What is affected
- Tests
Results
- Data (Past vs present, impact analytics, success metrics)
- Timeline (Reflection, future updates)
CTA
- See the full story
- Download the files
- Contact the author
Flexible
- Case study
- Showcase
- Snapchat
Modular
- Pack in advance
- Pack only what you need
- Keep your valuable safe
Highs & Lows
- Storytelling
Real work
- Show dirty work
- Own work

TAP ME BACK TO TOP

INSTRUCTION

Fig.2.1.1 Module Information Booklet

TAP ME BACK TO TOP

PROJECT 4: HI-FI APP DESIGN PROTOTYPE

Description:

Synthesize the knowledge gained in Task 1 - 3 for application in task 4. We will create integrate visual asset and refine the prototype into a complete working and functional product experience.

- Finalized Lo-Fi Prototype -

After week 13 lecture, I realized that my lo-fi prototype still has several usability and layout issues that need refinement:

Text size needs to be adjusted, with a minimum of 12px to improve readability.
The product card layout and content should be revised to enhance clarity and information hierarchy.
Button height needs to be standardized between 40–60px.
Add a dropdown selection

Fig.3.1.1 Before vs After of card layout / (Week 13, 17/12/2025)

Changes:

The product image was moved to the top section of the card.
Product name and brief description are written with "..." to guide user click into it.
Price information was repositioned to the bottom section for better readability and consistency.
Add “Add to Cart” button and placed more prominently.
Missing Gamification elements

Gamification:

Fig.3.1.2 Gamifications added / (Week 13, 17/12/2025)

A points system was added, allowing users to earn points after each successful order.
A reward feedback message is displayed after checkout to inform users that points have been successfully added.
Gamification features are integrated into the profile page.

Fig.3.1.3 Overall Lo-Fi Design in Figma / (Week 13, 17/12/2025)

- Colour Palette -

Fig.3.1.4 Subway MY Colour Palette / (Week 13, 17/12/2025)

The app uses a Subway’s original brand colours to maintain brand consistency.
Green and yellow are used as the primary colours.
A dark green (#224723) was added for buttons and key UI elements to improve.

- UI Kit -

Visual References: https://www.subway.com.my/ & GrabFood

Fig.3.1.5 UI Kit / (Week 13, 19/12/2025)

This is the UI Kit across the app, including colour palettes, typography styles, buttons, icons, and UI components.

- Hi-Fi Prototype -

Fig.3.1.6 New AR features / (Week 13)

This is the overall design of the new AR feature pages. The background is a demo of a reality place where users can view their sandwich. It has a progression bar to let users know how was the progress. There's also options to choose and when user click on it, it will immediately change the sandwich look by adding the ingredients.

Fig.3.1.7 Overall View in Figma / (Week 13, 19/12/2025)

Fig.3.1.8 Wireframes (Without Clip Content) / (Week 13, 19/12/2025)

Hi-Fi Wireframes Development:

Improved text size (min 12px)
Refined Product Card layouts to improve hierarchy
Apply Subway brand's colour to each pages
Refined typography in H-Fi prototype
Apply UI Kit
Added images
Integrated gamification elements (points, vouchers, badges)

Fig.3.1.9 Wireframes (clip content) / (Week 13, 19/12/2025)

Dev Mode Link: click [here]

Prototype Link: click [here]

- Project 4 -

Hi-Fi Prototype

Click [here] access to Canva

Fig.3.1.10 Subway MY Promo Page / (Week 14, 28/12/2025)

TAP ME BACK TO TOP

REFLECTION

Experiences:

Working on Project 4 was actually an interesting experience and I was enjoyed in the process so much. During this stage, I added more UI components and visual details, such as buttons, cards, and icons. I focused more on colours, typography, spacing, and consistency across all screens. Creating and applying the UI kit helped me work more efficiently and ensured a consistent design throughout the app. This process helped me understand how detailed UI elements improve the overall user experience.

Observation:

Throughout the process, I observed that typography is very important in UI design. Text size that is too small makes the content hard to read and affects usability. I also observed that adding gamification elements, such as points, vouchers, and badges, made the app feel more engaging and enjoyable for users.

Findings:

From this project, I learned that creating a complete prototype cannot be done by jumping straight into design. It is important to first go through processes such as market research, usability testing, and gathering feedback before finalizing the design. These steps helped me understand user needs and identify design problems early. Also, I'm very appreciated to my lecturer, Mr. Sylvain, he taught us a lot throughout the project and provided helpful advice and feedback. His guidance helped me better understand the design process and improve my work. Overall, Project 4 helped me better understand the full design process and improved my skills in creating a user-friendly hi-fi prototype.

TAP ME BACK TO TOP

Aricia Man Yi Xuan (0375026)

Search This Blog