Application Design I / Task 1 : Mobile Application Proposal

Usability Definition: Measures how effectively and efficiently users achieve their goals; includes learnability, efficiency, memorability, and satisfaction.

Applying Usability Principles: Tailors design to user needs by optimizing navigation, information structure, and visual hierarchy.

Usability Testing: Observes real users, collects feedback, and refines design to improve user experience.

Developing Practical Skills: Combines theory with hands-on practice in design tools, prototyping, and user research.

Importance of Mobile in the Digital Era

Ubiquity of Smartphones
Shift in User Behavior
Mobile-First Approach
Competitive Advantage

Challenges when designing for mobile

Limited Screen Real Estate
Diverse Device Capabilities
Contextual Awareness

---------------------------------------------------------------------------------------------------------

The User-Centered Design Approach

Focuses on understanding users and their needs
Involves research, ideation, prototyping, and testing
Ensures the final product is seamless and intuitive

Benefits of User-Centered Design

Increased User Satisfaction
Improved Product Adoption
Reduced Development Costs
Enhanced Brand Reputation

Designing for Mobile Usability

Understand User Needs
Prioritize Key Features
Optimize for Mobile
Validate and Iterate

-------------------------------------------------------------------------------------------------------------------

Prototyping and Testing

Lo-Fi Prototypes: Use quick, low-fidelity designs (e.g., paper or wireframes) to test and validate ideas early.
Interactive Prototypes: Create detailed, clickable demos with tools like InVision or Adobe XD for realistic user testing.
Iterative Testing: Test repeatedly with users to find issues and improve the design through ongoing feedback.

Designing for Small Screens

Compact Layout
Intuitive Navigation
Tactile Interactions
Visual Hierarchy

Incorporating Gestures and Interactions

Tap: Selects, activates, or interacts with on-screen elements
Swipe: Enables smooth navigation, scrolling, or revealing extra content.
Pinch: Zooms in or out for images, maps, and visual content.
Drag: Rearranges items or adjusts elements through direct manipulation.

Optimizing for Performance

Minimize app size: Compress assets and use vector graphics

Use caching & lazy loading: Load content only when needed to speed up performance.

Optimize network requests: Batch, compress, and fetch only necessary data.

Result: Faster load times, better responsiveness, and improved battery efficiency.

----------------------------------------------------------------------------------------------------------

Class activity

Revise a problem statement

Amir (who) pays too much for motorbike repairs (why).

His motorbike is always (when) at the mechanic (where) for some reason.

He can't afford a new bike (what) and doesn't know what to do (how).

my revised problem statement

Amir needs his motorbike repaired for good.

Lecture 2 : The Art of User - Centered Design

Fig 1.2 - The Art of User - Centered Design

User Centered Design (UCD)

A design philosophy that prioritizes users throughout the development process, focusing on understanding their needs and applying those insights at every stage—from conception to final product.

UCD Process:

Discover/Analyze: Define business goals, target audience, and user personas.
Define: Create ideas, experience maps, and user journeys.
Design: Develop user flows, sitemaps, and prototypes.
Validate: Conduct usability testing and MVP validation.
Develop: Move to production and coding.

User Experience (UX) Design

Focuses on how users feel while interacting with a product.
Ensures usability, accessibility, and satisfaction.
Involves research, wireframes, prototypes, and usability testing.
UX emphasizes functionality and meaningful interaction.

“User experience encompasses all aspects of the end-user’s interaction with a company, its services, and products.” — Don Norman

UX designers aim to create delightful and goal-oriented experiences.

User Interface (UI) Design

Focuses on the visual look and feel of the product.
Deals with color, layout, typography, icons, and visual hierarchy.
Enhances the UX through appealing aesthetics and clear interaction design.
UI is like the interior design of a house—making the experience beautiful and intuitive.

UX vs. UI Comparison

Fig 1.3 - UX vs. UI Comparison Chart

Core Principles

Empathy: Understand user needs and perspectives.
Usability: Easy to learn and use.
Utility: Meets user goals effectively.
Desirability: Visually and emotionally engaging.

ROI of UCD

Increases credibility, exposure, trust, and satisfaction.
Reduces development time, cost, maintenance, and redesign needs.

Lecture 3: Usability: Designing Products for User Satisfaction

Fig 1.4 - Usability: Designing Products for User Satisfaction

What is Usability

Measures effectiveness, efficiency, and user success in completing tasks.
Focuses on how easily users learn and how few errors they make.
Must adapt to user needs and context.
Evaluated through usability testing to identify improvements.

Common Usability Pitfalls

Complex interfaces: Too many features, poor organization, unclear labels.
Unclear CTAs: Users miss actions due to poor placement or wording.
Confusing navigation: Inconsistent layouts or missing search.
Poor error handling: Vague messages and no recovery guidance.

------------------------------------------------------------------------------------------------------

Key Principles of Usability

1. Consistency

Keeps design predictable and easy to learn.
Consistent colors, fonts, navigation, and branding improve trust and recognition.
Creates a unified and familiar user experience.

2. Simplicity

Minimize steps needed to complete tasks.
Use familiar symbols and clear communication.
Practice progressive disclosure (show info only when needed).
Example: Airbnb’s clean, intuitive layout.

3. Visibility

Make key functions easy to find and understand.
Maintain clear visual hierarchy (use size, color, spacing).
Include state changes, clear CTAs, and labels for discoverability.

4. Feedback

Inform users that their actions are recognized.
Use text messages, icons, animations, progress bars, sounds, or haptics.
Example: “Your order has been submitted” confirmation message.
Builds confidence and improves user learning.

5. Error Prevention

Reduces frustration and increases efficiency.

Techniques:

Input validation: Highlight wrong formats or block invalid entries.
Clear feedback: Notify success or failure immediately.
Confirmation steps: Prevent critical mistakes (e.g., delete confirmation).

-------------------------------------------------------------------------------------------

Why It Matters

Enhances user satisfaction and trust.
Reduces errors, frustration, and support costs.
Leads to higher efficiency, accuracy, and user retention.

Instructions

Module Information Booklet

Task 1 - Mobile Application Proposal (20%)

Students are required to create a proposal documentation for their mobile application project. The mobile application categories can be Informational (How to), Services, Entertainment, Fitness or Travel and it’s subject to preliminary approval by the module coordinator.

Students need to do surveys, interviews, market studies and research on the selected topic. The document should also include key features of their app and provide clear flowchart of the app.

The document will determine whether or not the app idea is good to continue to the next development phase. This task is an iterative process whereby during the assignment period, students are free to get feedback from their peers and module coordinator to further refine their idea.

-------------------------------------------------------------------------------

Getting started: Selection and Analysis of App

For this project, I chose the app Sticker Maker Studio because I have used it before and have ideas for features I would like to see added.

Fig 1.1 - Sticker Maker Studio App

After selecting the app, I began analysing it by writing a short introduction, identifying the problem statement, noting its great points and areas for improvement, summarizing user reviews, evaluating its usability, and reflecting on my gut feeling about features that could be added or redesigned

Fig 1.2 - A slide on analysing the app

Doing market study

After finishing the previous section, I turned to market study and started doing research on 3 competitor apps on the market. For this, i have done research on sticker.ly, GIPHY, and top sticker maker - WaSticker. All highly rated apps with good reviews, and potential features that I think my selected app could learn and benefit from.

Fig 1.3 - Market study apps

Left Field Apps: what features can I take?

In this last section, I investigated other unrelated apps that may have interesting features that I could grab over to possibly add into my selected app.

Fig 1.4 - Webtoon's discover and category page

Final proposal slides

Sticker Maker Studio - Mobile Application Proposal slides

Feedback

Week 1:

(No feedback)

Week 2:

(No feedback)

Week 3:

- For the problem statement, it is too long, reduce the words or Bold the keywords. Same goes for other sections.

- Include more screenshots in the market study section to visually explain the features being discussed.

- Add usability, gut feeling, and a conclusion slide.

Week 4:

(Teacher is sick today, no feedback)

Reflections

Experience :

Over the first four weeks, I gained practical insight into mobile app design and user-centered principles. Lectures on usability, UX/UI, and prototyping highlighted the importance of focusing on the user’s needs. Analysing Sticker Maker Studio helped me link theory with practice, identifying its strengths and areas for improvement. Market research and competitor comparisons exposed me to industry standards and innovative features, emphasizing the value of competitive analysis.

Observations :

Simple, consistent, and intuitive interfaces improve user satisfaction. Users respond well to clear navigation, fast performance, and visual appeal. Feedback from real users highlights issues that aren’t obvious at first glance.

Findings :

Clear problem statements communicate issues effectively.
Competitor apps provide inspiration for useful features like templates and social sharing.
Iterative prototyping and testing are essential to refine usability.
Prioritizing user needs reduces errors, enhances satisfaction, and increases app adoption.

Search This Blog

Rachel Ng Jie Ting (0378902)