Application Design I - Task 1: Mobile Application Proposal
Tan Zhao Yi / 0363285
Application Design I / Bachelor of Design (Honours) in Creative Media
Task 1 / Mobile Application Proposal
LIST
Lecture 3: Usability: Designing Products for User Satisfaction
Project 1: Mobile Application Proposal
Project 1: Mobile Application Proposal
INSTRUCTION
LECTURES
Lecture 1: Introduction to Mobile Application Design
App design is important in provides seamless user
experience, while boosting user engagement, retention, and overall
customer satisfaction by putting attention to intuitive navigation and
responsive layout.
Understanding Usability:
1. Defining Usability
2. Applying Usability Principles -
navigation, information architecture, and visual hierarchy
3. Conducting Usability Testing
4. Developing Practical Skills
Importance of mobile in digital era:
- Ubiquity of smartphones
- Mobile-first approach
- Shift in user behaviour
- Competitive advantage
However, the mobile application design is facing the challenges
of:
- Limited screen real estate
- Diverse device capabilities
- Contextual awareness
The user-centred design (UCD) focuses on deeply understanding the
target users and their needs. It can be applied by:
1. Research: Gather insights into user needs, behaviours
and pain points, establishing the solid understanding of the
target audience's specific requirements.
2. Design: Begin creating wireframes, prototypes and mockups
that address the identified user needs.
3. Evaluation: Usability testing and user feedback helps
validate design decisions and identify areas of improvement.
The benefits of UCD are:
- Increased user satisfaction
- Improved product adoption
- Reduce development costs
- Enhanced brand reputation
Prototyping and Testing:
1. Lo-fi Prototypes: Quick, low-fidelity prototypes like paper
prototype or clickable wireframes.
2. Interactive Prototype: Use tools like InVision / Adobe
XD.
3. Iterative Testing: Continuously test prototype with real
users to refine the design.
In the prototype, we can incorporate gestures and interactions like
tap, swipe, pinch, and drag. Key strategies to optimise mobile app
performance include
minimising app size, leveraging caching and lazy loading
techniques, and optimising network requests and data
transmission. By prioritising performance, we can reduce load times, conserve
device battery, and ensure your app remains responsive even on older
or lower-end devices.
Lecture 2: The Art of User-Centered Design
UCD is the overall philosophy that considers the needs of the
users. It provides framework and the foundation to create a product
that's both user-friendly and aesthetically pleasing.
UX: Focuses on the functionality, ensuring both smooth and functional
interaction.
UI: Deals with the visual perception and interaction, bringing
the UX to life visually.
UCD Process:
1. Discover: Business Requirements (brand vision, goals
& objective, target audience, competitors), User Personas
(motivations, goals, triggers, needs.)
2. Define: Ideation (campaign, website, software, product),
Experience Mapping (user journey map, user scenario）
3. Design: User Experience (user flow- task and feature
analysis), User Interface (sitemap and prototype)
4. Validate: Usability Testing, Prototype Validation,
Minimum Viable Product (MVP)
5. Develop: Production - coding
|
| ROI of UCD |
The fundamental of great UX: Utility > Usability > Desirability
> Brand Experience
Lecture 3: Usability: Designing Products for User Satisfaction
Usability
- The effectiveness, efficiency, and success of a user in utilising a product or design within a specific context.
- Clarity and Learnability
- How intuitively can users understand the interface layout and functionalities upon first encountering it?
- Can they find what they need without prior experience or needing to consult a manual?
- Efficiency and Goal Completion
- Does the interface guide users towards achieving their goals in the most straightforward and time-saving manner?
- Does it minimise unnecessary steps or complexities?
- Common Pitfalls: complex interface, confusing navigation, lack of clear Calls-to-Action, and inadequate error handling
Key Principles of Usability:
1. Consistency
- Consistent = User-Friendly: Avoids confusing users with unexpected changes in colour schemes, navigation, or fonts.
- Cohesive Experience: Creates a unified feel where all website elements (navigation, layout, branding) work together seamlessly.
- Intuitive Navigation: A consistent navigation system acts like a clear map, allowing users to find their way around effortlessly.
- Familiarity and Learnability: Consistent layouts and menus reduce the need for users to relearn how to navigate each new page.
- Stronger Brand Identity: Consistent use of fonts, colours, and logos reinforces your brand image and strengthens user recognition.
|
| Pillars of Consistency |
2. Simplicity
- Effortless to Use: Minimise the number of steps users need to take to complete tasks. The interface should be intuitive and self-explanatory, reducing the need for extensive instructions or exploration.
- Crystal Clear Communication: Utilise familiar symbols and terminology that users readily understand. This eliminates confusion and ensures users can navigate the interface with confidence.
|
| Example of Simplicity - Progressive Disclosure |
3. Visibility
- Clarity and Hierarchy: Information and interactive elements should be presented clearly, with appropriate visual hierarchy guiding users' attention towards the most important actions or content by factors like size, colour, spacing, and typography.
- Focus and Attention: The app's design should direct users' focus towards the elements that are most relevant in the current context. Avoid cluttering the screen with unnecessary elements that could distract users from their goals.
- Key features of visibility: state changes, CTA design, well-placed icons, menus, and clear labelling
4. Feedback
- Confirmation and Clarity: Good feedback provides users with a clear signal that their actions have been registered and understood by the app. This confirmation helps users feel confident in their interactions and avoid confusion.
- Guidance and Learning: Effective feedback goes beyond simple confirmation. It can also guide users towards successful task completion or provide learning opportunities. This can involve:
- Textual Messages: Providing clear and concise on-screen messages to inform users about the outcome of their actions or offer guidance on the next steps.
- Visual Cues: Changing an icon colour (like your example), adding animations, or using progress bars to visually indicate success, failure, or ongoing processes.
- Sounds: Using audio cues like chimes or beeps to acknowledge actions or provide warnings.
- Haptic Feedback: On mobile devices with haptic technology, subtle vibrations can be used to confirm actions.
|
| Examples of Feedback Mechanism |
5. Error Prevention
- Importance of Error Prevention:
- Reduce frustration
- Increase efficiency
- Improve accuracy
- Key features of good error prevention: input validation, clear feedback, and confirmation steps
Project 1: Mobile Application Proposal
In this project, we were required to create a proposal
documentation for our mobile application project. We need to
do surveys, research, interviews, and market studies on the
selected apps that we found unsatisfactory in terms of their
user interface and user experience. In the document, we have
to study on three mobile applications, including the key
features and weaknesses.
Brief of Mobile Application Proposal:
1. Introduction
- Purpose: Revamp existing mobile app to elevate user experience and interface quality.
- Stress the pivotal role of mobile app design in shaping user contentment.
2. Background and Context
- Evaluate current app's design and functionalities.
- Identify strengths and weaknesses.
- Competitive analysis.
- Gain insights into user demographics and requirements.
3. Goals and Objectives
- Establish clear objectives for the redesign initiative.
- Prioritize addressing current deficiencies and enhancing user satisfaction.
- Define primary and secondary goals to align with user expectations.
- Developing your design strategy.
4. User Research
- Detail methodologies for conducting user research.
- Describe the methods you will utilize to collect user feedback and gain insights.
- Devise a robust plan for user testing and validation.
5. References
- Curate pertinent articles, books, and design samples for inspiration.
A. Proposal
Drafting
In our first class, we were instructed to come out with a
draft of our proposal. At the very beginning, I read a short
article about how to perform a UI/UX review on Disbug
(article link: https://disbug.io/en/blog/perform-ui-ux-review).
Based on this article, I had some questions in my mind that I
should ask myself while analysing each mobile application:
1. What is the main purpose of this app?
2. How well does the UI meets uses' need?
3. What do users perform most often in the app?
4. Is there any problem that pops out frequently?
5. Is the content in the app easy to find and understand?
6. Are users able to complete their task easily?
7. Are users felt satisfied with its functionality?
8. Is there anything to be improved?
Initially I was thinking to study on apps that I had been
using for a long time, which allows me to discover the real
problems that I faced as a user.
Selected app:
1. Waze
2. BeReal.
3. PB Engage MY
Fig 1.1. Proposal Draft - 1st version
After the feedback session, Mr. Zeon inquired about my preference for which app to redesign. Waze was immediately out of the question due to its technical complexities beyond my capacity as a student. Choosing between BeReal. and PBe, I hesitated. Mr. Zeon pointed out that banking apps like PBe are common choices among students, however BeReal. hasn't got too much space to improve as it has
high ratings in App Store. I was worried about the depth of
discussion I could generate for the project later on.
Fig 1.2. Proposal Draft - 2nd version
In the end I have chosen PB Engage MY as my desired redesign app.
We are required to come out with a final proposal slides and will
be presenting it in class in Week 4. The presentation should be no
more than 5 minutes.
B. Research
Before working on the final proposal, I read some websites about
the importance of UI/UX, the app design impacts on user experience,
the critical feature of banking apps etc. On below I will jot down
the notes that I think is useful for my proposal from each
websites.
Website #1: The Importance of UI/UX Design
Key elements of UI/UX:
- Information Architecture: Ensure easy navigation for user while using different browsers.
- Interaction Design: Create the conceptual design with which the users interact with the product / application. This interaction includes various elements such as aesthetics, colour, font, icons, images, motion, sound, space, graphics, etc.
- Usability: Figure out if the users get the information they want by using the application for the first time and if the application / website is easy to navigate.
- Wireframing: Create a sample of the application to test the features.
- Visual Design: Identify the appearance of the application impacts the interaction of its users.
Reasons of apps needs efficient UI/UX:
- Enhance user satisfaction - improve return on investment (ROI)
- Understand the audiences
- Builds brand image
- Saves time and energy
Website #2: The Importance of UX and UI Design in Website Creation
Key principles of UX design:
- User Search: Surveys, interviews, data analysis etc.
- Planning of Information: Define the structure like content organisation and navigation within the app.
- User Flow: Define a path that allows user to follow through the product.
- Usability and Testing: Conduct real user testing to identify problems.
- Accessibility: Ensuring that the product is accessible to all people, including those with disabilities.
Website #3: Why UI/UX is Essential for Mobile App Development
The impact of UI/UX design in mobile app development:
In today's saturated app market, where millions of applications compete across diverse categories, users seek experiences that resonate with them emotionally. The evolution of mobile app development has shifted focus from mere functionality to prioritising immersive user experiences. Collaborative efforts between developers and UI/UX designers ensure that apps not only perform well technically but also engage users visually and emotionally.
|
| Fig 2.1. Differences and Common Functions of UI/UX |
Website #4: Why Is UX Design Important - 5 Important Arguments
1. Improves the reputation of the brand.
2. Help end-users be more efficient by allowing them to complete
tasks faster.
3. Increase customer’s loyalty thanks to better customer
experience.
4. Foster conversions and ROI
5. Investing in UX design upfront can significantly reduce costs
later.
Website #5: 9 Must-have Features for A Successful Banking App
Website Link: https://www.chetu.com/blogs/banking/9-must-have-features-for-a-successful-banking-app.php
1. Bank account management
2. Advanced security and fraud alerts
3. Core banking features
- New account enrollment and existing account management
- Deposits and withdrawals
- Loan management
- Interest rate calculation
- Customer relationship management (CRM)
- Introductions to new financial products
- Record maintenance
4. QR code payments
5. Mobile check deposits
6. Peer-to-peer payments
7. Bill payments
8. Intelligent chatbots
9. ATM locator
C. Presentation
In Week 4, we had a physical presentation in class.
|
| Fig 3.1. In-class Presentation |
After the peer feedback section, I add and highlight the possible
solution below each weaknesses and added a brief explanation of each
page's function.
Fig 3.2. Weaknesses Slide - Before & After
|
| Fig 3.3. Brief App Pages Explanation |
Final Mobile Application Proposal
Application Name: PB Engage MY
Category: Finance / Banking
Target Audiences: Public Bank Berhad clients.
PB Engage MY is a versatile mobile application developed by
Public Bank Berhad, offering a range of banking services to its
users. With PB Engage MY, Public Bank customers gain access to
essential banking functionalities right at their fingertips. Users
can perform fund transactions, including transfers between accounts
and to third parties, ensuring hassle-free money management.
Additionally, the app enables users to apply for bank cards, such
as credit or debit cards, with ease and efficiency. Furthermore,
PB Engage MY facilitates bill payments, allowing users to settle
utility bills, credit card bills, and other payments swiftly and
securely.
Fig 3.4.
Final Mobile Application Proposal
FEEDBACK
Week 2
Waze is more like a technical issues, rather than user experience and
interface design. Think about how can you improve about BeReal. because
banking app is too common to do. You should have one slide about the
company info like logo, objectives, target audiences etc.
Week 3
No comment from Mr. Zeon because I had not much progress due to
misunderstanding from last week task.
Week 4
Presentation Week. Good practice for slide 15 and the highlighting of
comments in App Store, easy to get the main point. You may add solutions
below the weaknesses. In the app current design, you can add a brief
explanation of each page. Include citations.
REFLECTIONS
Experience
This project required me to carefully analyse problems and creative thinking to address the app’s current deficiencies and propose effective solutions. This project has also strengthened my problem-solving skills and ability to translate user needs into actionable design improvements, fostering a deeper appreciation for user-centred design principles.
Observations
One of the key observations during this project was the significant impact that inconsistent design elements have on the overall user experience. Issues such as complicated navigation structures, indistinct buttons, and varied error messaging were recurrent themes in user feedback. These inconsistencies not only frustrate users but also undermine the app's professionalism and reliability. Additionally, I noticed that users highly value intuitive design and clear communication, which are crucial for fostering trust and ease of use in a banking app.
Findings
The findings from this project showed several important areas where PB Engage MY can improve. Making navigation easier, making buttons clearer, and standardizing error messages are key steps to make the app more user-friendly. Adding personalized features and ensuring the app is accessible to everyone can also greatly improve the user experience. These insights highlight the need for ongoing user research and regular updates to keep the app meeting user expectations and using the latest technology.
FURTHER READING
Book Name: Professional Web Design: Techniques and Templates, 5th Edition
Author: Clint Eccher
Chapter 3: Things to Consider Before Beginning
Site Requirements:
- Look and feel: Including content placement, how the site conveys the company’s message, the colour palette, and fonts and image concepts to be presented.
- Bandwidth (download size): The way a site is designed will determine how large of a download the site will require, a designer can determine how many graphics to use by understanding it.
- Resolution: A site with improper resolution can hinder its usability or credibility.
- Scalability: Because nearly all sites are in continual evolution, it is important for the designer to consider how the site can be expanded or changed in the future.
- Content: The content volume of a site will influence nearly all other requirements, including the look and feel, the bandwidth, resolution, and scalability.
The level of documentation needed for a website depends on its size. Small sites (5-15 pages) typically only require communication between the designer and client via email or calls. Larger sites (over 15 pages) necessitate more thorough documentation, including an official requirements document. Without this, designers risk having to make extensive, time-consuming changes based on client feedback, leading to scope creep. Although documenting requirements initially adds to the cost and time, it ultimately saves money by preventing major design overhauls and unplanned additions. For instance, adding fields to a form or sections to a navigation menu without proper documentation can lead to significant redesigns and increased project scope.
There are three rules to follow by a wise designer:
1. Document everything
2. Save each document as a different version
3. Receive a sign-off on the requirements before beginning work
If the designer does not have the time or resources to collect in-depth requirements, a shorter version of a requirements document can be used to collect information. Here are 13 questions a designer should try to have answered before beginning a site’s comp:
1. Who is the audience, and what is the purpose of the site?
2. What is the feeling you want to convey to your audience with your website?
3. Will the site need to be expandable, in terms of sections, in the future?
4. What browser platform and resolution (for example, Chrome/Firefox or 1024 × 768 or higher) do you require?
5. How many levels, or “clicks,” can the deepest information be?
6. What is the most important information that should be put on the homepage?
7. When can text and graphics (logo) samples be supplied for designing the comp?
8. Do the images and colors on the site need to be consistent with any existing branding?
9. Does it matter if the site scrolls vertically?
10. What kind of functionality (for example, forms, dynamic text, or multimedia elements) does your site need to have?
11. What is the desired download size of the homepage?
12. Does your company have a tagline?
13. What is the proposed deadline(s)?
Creating flow chart:
 |
| Example of A Flow Chart |
The amount of bandwidth available to users dictates the number of graphical elements in a website's design. For audiences with limited bandwidth, the homepage should be between 30-100KB. For those with more bandwidth, it can range from 100KB to 1,000KB or more. Various factors affect actual bandwidth, such as the number of concurrent users, overall internet usage, and the condition of phone lines, especially in rural areas. Therefore, it's practical to set a target size for web pages rather than relying on download times, which can fluctuate.
Larger sites might ignore bandwidth constraints in specific cases:
- Intranet sites usually have higher bandwidth than public internet sites.
- Corporate audiences often have better bandwidth than general audiences.
- Sites with high-bandwidth functionalities, like online music stores, cater to users with greater bandwidth compared to purely content-driven sites.
One of the biggest challenges in web design is accommodating different monitor resolutions.
Websites are created for specific resolutions, but users' monitors vary, causing sites to appear differently than intended.
For example, a site designed for 1024 × 768 resolution will look too wide on an 800 × 640 monitor and too narrow or stretched on a higher resolution. Historically, sites were designed for 640 × 480, then 800 × 600, and since 2006, for 1024 × 768 resolution. Future shifts in standard resolutions are uncertain, partly because older users prefer larger text, which higher resolutions often reduce. The evolution of design standards remains unpredictable.
Standard Resolution vs. Low Resolution
To maintain a consistent look and feel across different monitor resolutions, a designer can create multiple versions of a website for each resolution. Using branching JavaScript, the site can automatically detect the user's resolution and serve the appropriate version. Although this approach requires more time for development and maintenance, it ensures a consistent appearance across various resolutions.Scalability
In the mid-1990s, most websites were small with static content, making frequent redesigns feasible. Today, websites are much larger, more complex, and closely tied to brand identity, making frequent redesigns impractical and costly. Therefore, it's essential for designers to build maintainable and scalable sites. This involves two key strategies:
- Editable sites: Pages and sections should be editable without major redesigns.
- Modular sites: Sites should be constructed with interchangeable components, similar to how a car's oil can be easily changed without dismantling the engine.
Creating a Flexible Design:
 |
| Example of An Inflexible Design |
There are three areas of a site that should be designed to be flexible:
- Menu Navigation
- Content Layout
- Title Areas
Comments
Post a Comment