Application Design I / Project 4 : Final Project
09.12.25 - 31.12.25 (Week 12-14)
PAN RUINING (0378138)
APPLICATION DESIGN / Bachelor of Design (Honours) in Creative Media
Project 4: Final Project
CONTENT LIST
· LECTURES
· FEEDBACK
INSTRUCTION
LECTURES
WEEK 12: User Interface Visual Elements
What is Gamification?
This is the practice of adding game-like elements to non-game apps (like
fitness, banking, or learning apps) to make them more engaging.
- Points & Levels: Earning "XP" or moving from "Bronze" to "Gold" to show progress.
- Badges: Digital trophies for hitting milestones.
- Leaderboards: Showing how you rank against friends or global users to spark competition.
- Streaks: Encouraging you to use the app every single day (like the Duolingo owl).
- Progress Bars: Visually showing how close you are to finishing a profile or a course.
What is Monetization?
This refers to the different business models apps use to generate revenue.
- Advertisements: Showing banners, videos, or "rewarded ads" (where you watch a video to get a free life/item).
- In-App Purchases (IAP): Selling digital goods, like "gems," extra lives, or special filters.
- Subscriptions: Charging a recurring fee (monthly/yearly) for premium access (e.g., Spotify or Netflix).
- Freemium: Offering the basic app for free but charging for "Pro" features.
- Paid Apps: A one-time fee you pay upfront to download the app from the store.
WEEK 13: Your Portfolio
What is a Portfolio?
A portfolio is a collection of your work shows your skills, process, and
experience. It is mainly used for:
- Job applications
- Internships
- University/module assessments
- Freelance work
- Common in design, creative media, UI/UX, animation, games
Purpose of a Portfolio
- Demonstrate what you can do (skills & tools)
- Show how you think and solve problems
- Highlight your design process, not just final outcomes
- Present your personal style and strengths
Content of a Portfolio
- Intro
- Context
- Specs
- Demo
- Features
- Choices
- Results
- CTA (Contact The Author)
TASK 4: FINAL PROJECT
After revising their Low-Fidelity prototype, students are required to
start integrating the app visual design. With all the information gathered
from Task 2 and 3, Students should be on track on the App design direction
and can start designing the artistic aspects of the app. This includes
:
a) App Logo and Icon
b) Navigation icon design
c) Screen design
d) Content element design
e) Loading indicator
f) Interactions and micro interactions.
g) Animation
h) Screen transition
Students are required to arrange the design element into Adobe XD and have
them linked up properly and viewable on the mobile devices. Students are
then required make a slides detailing their journey in task 4.
Process
After low-fidelity testing in Task 3, I refined the design based on tester feedback and added pages such as Select Order Store page, Select Payment Method page, and Select Voucher page to complete the milk tea purchasing flow.
Fig 1.1 Add new features
Next, I started working on the high-fidelity prototype. I used a
UI Kit to keep the visual
style consistent throughout the app and to make designing the prototype
faster and easier to maintain.
The UI Kit includes
color palette, typography, buttons, and icons
to ensure visual consistency and usability:
Fig 1.2 Color palette
Fig 1.3 Typography
Fig 1.4 Primary button
Fig 1.5 Radio button
Fig 1.6 Icons
Fig 1.7 Icons
Next, I completed the high-fidelity prototype and used videos to present
the app’s main features and flows.
Figma Link:
Video Display Link:
FINAL PROPOSAL SLIDES & HI-FI PROTOTYPE
FEEDBACK
WEEK 13: No feedback.
WEEK 14: No feedback.
REFLECTION
These 14 weeks have given me a deeper and more systematic understanding
of application design. In each task, I learned how to systematically move
from market research and user research to initial design, usability
testing, and finally the development of a high-fidelity prototype. Each
task provided me with different professional insights.
I found the final task to be the most complex and challenging. I wanted
to add more features to the milk tea ordering flow and make it more
complete, so I started by creating low-fidelity pages, which took some
time. Although the number of pages may seem small for a purchasing app, in
the prototype, I had to ensure that every screen was properly linked. Even
a small change at one step required corresponding adjustments in the
subsequent steps. For example, choosing to order one or two drinks—not
only did it affect the quantity and price, but it also influenced every
following step. This required a large number of frames to complete the
entire flow. By the end, I had created 211 frames, which was no easy task. Despite the
difficulties, I believe the outcome was worth it. Seeing the final result
gave me a strong sense of accomplishment.
Overall, although this task was very challenging for me, I learned a
great deal. And I appreciate Mr. Sylvain’s engaging teaching and
valuable suggestions in class. I hope to apply the knowledge and
experience I gained to create even better work in the future.
Comments
Post a Comment