Labels

Application Design I : Task 4 - Final Project & E-portfolio

22/10/2025 - 23/11/2025 (Week 5 - Week 9)

Chang Wing / 0367807 

Application Design I / Bachelors of Design (Honours) in Creative Media / Taylor's University

Task 4 - Final Project & E-portfolio


TABLE OF CONTENTS



Week 13

UI Design

1. Typography

- Standard font size for mobile: 12px, anything smaller than 12px, justify reason


2. Color

- Use consistent color
- Can create drop shadow with colour align with palette, not just black / white
- Tips: If the button is blue, can use its complementary colour (yellow) as drop shadow to make it look softer
- Most non-clickable elements shouldn't have a shadow



3. Effects

- Use minimal amount of effects for mobile apps (use sparingly and with intention)



4. Space

- gsss



5. CTA Buttons

- The height of buttons should be between 40-60pt, anything smaller will be hard to click


6. Corner Radius

- Sets the vibe of an app
- More serious apps has less rounded corners (e.g., banking app: Less rounded corner radius; lifestyle app: More rounded corner radius)

- Corner radius formula -> Outer radius:16px
                                            Border: 2px
                                            Inner radius should be: 16 − 2 = 14px

Figure 1.30 Corner Radius Formula




7. Photos

- All images used in app should complement the colour palette, its challenging to find suitable ones but can be achieved easily using an overlay on the image


8. Illustrations

- Illustrations should complement the app content
- Match with the colour palette
- Can find illustrations from:  - storyset.com
                                                - icons8.com
                                                - streamlineicons.com (free and paid)
                                                - storytale.io (paid)



9. Cards

- Figure out which content from a page is important enough to place on a card
- Create cards components (like forming a card system), and use repeatedly in app
- Consider what if too long information can't be fitted into the card, what happens



10. White Space

- Lets important elements 'breathe'



11. How to make sure an element looks 'Clickable'?

- Make them look different (with padding / color) or underline it (looks clickable because user familiar with it since it resembles html hyperlinks)


12. Breadcrumb

- A line show path to current user location / action / status


Figure 1.30 Breadcrumb


13. Pagination 

- It means 'navigation through pages'
- Ensure effectively show users which page they are on (e.g., show the amount of last page so users can estimate when it will end) 


Figure 1.30 Pagination


14. Slider

- Use for informations that has linear or progressive structure such as ranges, sequences, or comparisons
- Mr Sylvain remarked: 'Developers don't like these, so be nice with them when you have to do this on your app:)'




Figure 1.30 Slider




15. Icons

- Ensure consistency of different icons in a single app



16. Carousel

- For skimming among items



17. Mobile Spaces

- Consider heatmap (which areas are most clickable and easily reachable by fingers)
- Visible labels
- Avoid multi-column grid
- Include keyboard slide-up

Layout Grid: 3 blocks per column, 



18. Drop down

- dfsfsf



19. Checkbox

- Select one or more options
- Best arrangements: Vertical



20. Toggle

- Indicate can 'switch between', redoable actions


Figure 1.30 Toggle buttons



21. Date and Time picker

- Select date & time, calendar drop down




Monetizations

- Companies don't develop apps for free, it has to generate some kind of revenue, can be generated through:

1. User Interactions

- Example: Ads, Remove Ads, Subscription 


2. Active Purchase

- Example: Affiliate Marketing, In-app purchases 


3. Intellectual Properties

- Example: Sponsors, Licensing
 




Octalysis of Gamification

1. Epic Meaning & Calling (Positive)
- Let user being the chosen one 


2. Development & Accomplishment (Positive) 
- Making process, Developing skills, Overcoming tougher challenge


3. Empowerment & Creative Feedback (Positive)
- Trial and Error, Figuring things out, Feedback loops
- User feels less stress because they are allowed to fail


4. Ownership & Possession (Neutral)
- Users love collecting wealth because it improves thier digital estate / representation



5. Social Influence, Relatedness & Envy (Neutral)
- Some users get competitive over the game, they compare themselves with others in real life, or it creates nostalgia / good memory, this motivates users to come back


6. Impatience, Scarcity (Negative)
- People tend to want something they can't have
- Create limited access or exclusive features / offers / collection motivates user 


7. Unpredictability & Curiosity (Negative)
- Randomness and mismatched expectations intrigues users when it offer benefits (e.g., gambling / betting)


8. Loss & Avoidance (Negative)
- People fear of losing an investment, more than when they don't have it at first
- Emphasise on negative consequences to motivate user 


*Consider the emotion of user, too much negative will frustrates user and increase drop off rate



Week 14

- Holidays





Week 15

Portfolio

1. Who reads your portfolio?

- Human Resources
- Peers
- Managers (Learning curve, thinking process)

A learning curve is visible when you:

  • Show early vs later versions of your work

  • Explain what you didn’t know at first and how you solved it

This tells managers:

  • You are coachable

  • You think critically

  • You don’t stay stuck at one level


2. What is inside portfolio?

- Introduction (What was the project about? Who worked on it? What were you in charge of? Who will use it? How does it help them?)

- Context (Where do we use the product? What it solves? What are the stakes and challenges?)

- Specs (Who is making it? What software are you using? When did you make it?) 

- Demo (How it works? Show it in use? Show it with people? Show movements [because it stands out and shows your skills])

- Features (All the functions of the project? How flexible it is? Comparisons to other solutions? Put data and facts)

- Choices (How decisions were made? Research results? Show tests)

- Results (Past vs Present, Success metrics, Timeline, Reflection, Future updates)

- CTA (Allow visitor to contact you, send them to your projects, send them to hire you, don't leave them hanging! e.g., "We publish new project every week! Don't miss us!")




3. Best practices of portfolios

- Flexible

  • Having different portfolio sizes depending on context

    • Short version for quick reviews

    • Full version for interviews or deep dives

  • Being able to add or remove case studies easily

  • No fixed limit on case studies, you expand or reduce based on relevance

Why it matters:

  • Recruiters skim

  • Managers dive deep

  • Peers explore selectively

Flexibility shows you understand time constraints and intent.


- Modular (Show the desired projects, Always store and backup old projects)

- OUTCOME 1st (Show results first then only the process because EVERYONE IS MORE INTERESTED AT THE OUTCOME!, Allow people to skip, Different levels of reading [3sec, 3min, 30min], don't describe the known processes because sometimes managers knows theory better than you)

- HIGHs & LOWs (No smooth ride,  storytelling)

- SHOW ORIGINAL WORK (Show dirty works like researches and sketches, Before vs After, SHOWS that you are not using AI (for people that hates AI), show critical thinking)

- Growth (Portfolio is a snapshot of your PAST, it shows your growth, it help others see YOU, Update portfolio as soon as possible, the most recent one is always your BEST work)


INSTRUCTIONS



Task 4 - Final Project & E-portfolio

Refine the Lo-Fi prototype into a High-Fidelity app, integrating full visual design including screens, icons, interactions, animations, and transitions. Document progress in a weekly e-portfolio, capturing sketches, feedback, successes, failures, reflections and testing outcomes. The final presentation slides should showcase the app’s happy path, extra features, monetisation, gamification and a promo page. Finally, students will analyse the results and reflect on their 14-week design journey and next steps.




NOTES


 Understanding Figma Prototype > Trigger > On Drag Direction Detection



Figure 2.1 Swipable slider in Task 4 Hi-fi prototype

So, when I connect the whole variant (the outermost frame, the parent layer) of middle slide to the left and right variants, the slider DOESN'T WORK!! It keeps swiping to the right because Figma can’t detect drag direction (left or right) on an entire variant or frame.

So instead, I followed the tutorial and connected the middle slide inside the frame (the children of parent layer, the middle slide ITSELF within the outermost frame) to the next whole frame/variant (note: WHOLE FRAME, not the children inside). Then it works!

This works because Figma detects drag direction relative to the object (the middle slide itself within the frame) the trigger is attached to, that means, when I drag the middle slide right, its X-position increases, and when I drag it left, its X-position decreases. Figma tracks this movement and triggers the corresponding next frame/variant, while Smart Animate moves the slides along the X-axis smoothly, creating a proper left/right swipe effect.


Follow this tutorial EXACTLY to make middle slide able to detect slide left or right!!


Figure 2.2 Youtube tutorial: Figma Drag Card Animation



PROCESS

I used the Figma plugin, A Selector to quickly select buttons and bulk update their styles. The plugin enables me to select elements by type, name or properties, which helped speed up the styling process (Figure 3.1).

Figure 3.1 Figma plugin: A Selector


I used the Storyset plugin to fill in mock illustrations and adjusted their colours to match JobStreet’s colour palette (Figure 3.2).


Figure 3.2 Figma plugin: Storyset


Pexels allow me to quickly insert free to use images to the selected image placeholders (Figure 3.3).


Figure 3.3 Figma plugin: Pexels


Earlier on, I used Typescale to quickly determine the font system for my design, all I have to decide is the scale, I chose a 1.125 scale because I wanted just subtle differences between text sizes to avoid visual jumps, especially for the mobile Jobstreet app where there are some longer paragraphs of text and users need a smooth, comfortable reading experience while scrolling (Figure 3.4).


Figure 3.4 Figma plugin: Typescales


I used Mokuuups Studio to generate a hand-holding-phone mockup for the frame (Figure 3.5), then adjusted the exposure and hue of the image. After that, I imported it into Adobe Illustrator to design the promo page for my redesigned JobStreet app (Figure 3.6).

Figure 3.5 Figma plugin: Mokuuups Studio



Figure 3.6 Designing Promo Page in Adobe Illustrator



Task 4 - Final Project & E-portfolio



FEEDBACK

Task 4 - Final Project & E-portfolio

Week 13 (17/12/2025)
Feedback: -

Week 14 (24/12/2025)
Feedback: -

Week 15 (31/12/2025)
Feedback: -



REFLECTION

Through this task, I developed the hi-fi prototype, and it really made me realise how important it is to organise final work as a UI/UX designer, for example, setting up a UI Kit so other designers can easily reuse the same components to make sure consistency across all the designs.

Throughout the semester, I really appreciate Mr. Sylvain for sharing so many tips and hands-on UI/UX knowledge from his own experience. I also watched a lot of tutorials to get more familiar with Figma, and building a hi-fi UI with complete flows taught me a lot about best practices in Figma, like renaming layers properly, using components and label our workspace clearly people working in the same workspace (e.g., clients, developers) won't get confused.

During the final task, Mr. Sylvain asked us to include monetisation and gamification ideas for our redesigned app. That helped me see how important it is to consider the company’s revenue and not just the user experience.

Overall, this module has taught me how to balance user needs with practical design workflows and business considerations for a mobile app, which I think will be really useful my future UI / UX or marketing / business - related projects.

















Labels:

Comments

Post a Comment