SEng3206

Mobile Application Design and

Development

App design and

Development
Essentials
Sufian Kedir
Oct 2024
 Outline

 Why Mobile Apps

 Core Components of Mobile Application Design
 Mobile App Design Issues and Considerations
 Types of Mobile Apps
 App development team structure and role
Mobile App Design
 Why Mobile Apps

 Mobile apps have become an essential part of modern life due to their
convenience, accessibility, and a range of other benefits.
 The following are some key reasons why mobile apps are essential:
• Convenience and Accessibility: Mobile apps provide users with instant
access to services and information from anywhere at any time, making it
easier for businesses to engage with customers.
 Why Mobile Apps

User Engagement
• Apps often offer personalized experiences through push notifications,
reminders, and in-app messages, helping to increase user engagement and
retention.
Offline Functionality
• Many mobile apps offer offline capabilities, allowing users to access
features and information even without an internet connection, making
them more versatile than websites.
 Why Mobile Apps

Enhanced User Experience (UX)

• Mobile apps are designed with user interfaces optimized for mobile
devices, often offering smoother and more intuitive navigation than
mobile websites.
Brand Visibility and Marketing
• A mobile app can serve as a direct marketing channel, with companies
leveraging it to build brand loyalty and provide exclusive deals or rewards
to users
 Why Mobile Apps

Faster Performance
 Apps generally load faster and are more responsive than websites because
they store data locally on the device, reducing wait times.
Push Notifications
 Allow businesses to communicate directly with users, providing important
updates, promotions, or reminders, which can increase user retention and
engagement.
 Why Mobile Apps

Better Integration with Device Features

 Mobile apps can integrate with various features of a smartphone, such as
GPS, camera, microphone, and accelerometer, offering a richer and more
interactive experience.
 In summary, mobile apps offer businesses and users convenience,
personalization, and improved user engagement, making them an
important tool in today’s digital landscape.
 What is Mobile Application
Design?
Mobile application design refers to
• the process of creating the visual appearance,
functionality, and user experience of mobile
applications.
• It involves designing the layout, interface elements,
navigation flow, and overall aesthetics of the app to
ensure it is intuitive, engaging, and effective for the
target audience.
 Core Components of Mobile Application
Design

Mobile application design has a few key parts that are essential to
creating a successful app.
 User Interface (UI) is the visual aspect of the app. It encompasses
the app's colors, buttons, layout, typography, and imagery.
 When designing a mobile application, the UI design aims to create a
visually attractive interface that aligns with the brand's identity.
 A well-designed UI makes the app engaging and invites users to
interact with it.
 Core Components of Mobile Application
Design

 User Experience (UX) is all about how easy and pleasant the app is to
use. UX design focuses on the overall feel of the app, ensuring that it
meets the users' needs and provides a seamless experience.
 Navigation refers to how users move around the app. Effective navigation
design ensures that users can find what they need quickly and easily. This
includes designing clear menus, intuitive icons, and logical pathways.
Good navigation is a fundamental aspect of designing for mobile apps, as
it directly impacts usability and user satisfaction.
 Core Components of Mobile Application
Design

 Functionality ensures that everything in the mobile app design

works correctly. In mobile app design development, functionality is
critical as it determines the app's reliability and effectiveness in
fulfilling its purpose.
 Accessibility ensures that the app can be used by everyone,
including those with disabilities. This makes the app inclusive and
ensures a wider audience can use it comfortably.
 Goal of Mobile Application Design

 The goal of mobile application design is to create an app that not only
meets the needs and expectations of users but also reflects the
branding and objectives of the app's developer or organization.
• It involves understanding user behaviors, optimizing performance for
mobile devices, ensuring accessibility, and adhering to design principles
and best practices to create a seamless and enjoyable mobile user
experience.
 Mobile App Design Issues and
Considerations
 The followings are basic mobile app design issues and considerations
 Operating system
 Screen Size and Orientation
 Connectivity
 Battery
 Storage
 Hardware and Business
 Mobile App Design Issues and
Considerations cont..

• Mobile App Design process

 App Design

 App design is the look and feel of a mobile application.

 This includes all of the visual elements and interactive

elements that impact how the app functions.

 Mobile app design combines two concepts UI and UX.

 Whether you’re building an ecommerce app, internal

employee app, fitness app, or app in any category, the design
always needs to be a top priority.
 UI vs UX

User Interface (UI)

 UI is the graphical part of a website, app, or device that users interact with.

 UI design focuses on creating visual elements that are appealing, intuitive,

and consistent.

 UI designers use colors, fonts, icons, images, animations, and layouts to

create interfaces that match the brand identity and the user expectations.
 UI vs UX

User Experience(UX)

 UX is the overall feeling that users have when using a product or service.

 UX designers conduct user research to understand the goals, needs,

behaviors, and pain points of the target audience.

 UX designers also create user personas, user journey maps, wireframes,

prototypes, and user testing to validate their design decisions and
identify problems.
 UI vs UX

 UX design is closely related to psychology, sociology, and human-

computer interaction.

 Good mobile UX design should be useful, usable, desirable, findable,

accessible, and credible
 UI vs UX

User Experience(UX) Cont. …

 Useful: The system must fulfill the users’ wishes and needs.

 Usable: The system must be as easy and self-descriptive as possible.

 Desirable: The style of the system must evoke positive emotions and
appreciation. Users must want to use your system.

 Findable: Navigating through the system must be easy and self-

descriptive. Moreover, users must find important information quickly.
 UI vs UX

User Experience(UX) Cont. …

• Accessible: Disabled users, e.g., use

with very poor eyesight, must have the
chance to use your system and get the
same user experience as non-disabled
users.

• Credible: Users must trust you and your

App design tools
Types of Mobile Apps
 Types of mobile Apps

Mobile apps are classified into four categories based on

app development approaches :

1. Native Apps
2. Web Apps
3. Hybrid Apps
4. Cross-platform apps
 Types of mobile Apps

Native Apps

• These are applications that are developed for a specific

platform or operating system.

• They are built using platform-specific programming

languages such
as Swift or Objective-C for iOS and Java or Kotlin for
Android
 Types of mobile Apps

Native Apps cont.…

• Native apps are installed directly onto the device and can
use device-specific hardware and software.

• Examples of native apps include Instagram, Snapchat, and

Pokémon Go.
 Types of mobile Apps

Native Apps cont.…

Advantage of native apps

 They offer the best performance and user experience.

 They can use all the device capabilities and
functionalities.

 They can follow the design guidelines and standards of

 Types of mobile Apps

Native Apps cont.…

disadvantages of native apps

 They require more development time and resources.

 They are not flexibility
 Types of mobile Apps

2. Web Apps

• These are responsive versions of a website.

• They work on any mobile device or operating system using a
mobile browser.

• They are usually hosted on a web server and do not require

installation.

• Examples of web apps include Twitter Lite and Facebook Lite.

 Types of mobile Apps

3. Hybrid Apps

 Combines elements of both native and web applications.

 They are essentially web apps that have a native app
shell.

 The shell connects to whatever capabilities the

mobile platform provides through a browser
that's embedded in the app.
 Types of mobile Apps

3. Hybrid Apps

Advantages of hybrid apps

 They can be built with common web technologies .

 Reducing development time and cost.
 They can run on multiple platforms and devices with a single
code base.
 Types of mobile Apps

3. Hybrid Apps
Disadvantages of hybrid apps

 They tend to have slower performance and lower graphics quality

than native apps.

 They may not be able to access all the native features and
functionalities of the device.

 They may face compatibility issues with different browsers

and OS’s.
 Types of mobile Apps

3. Hybrid Apps
Development Frameworks
 Types of mobile Apps

4. Cross-platform apps

• They Can run on multiple operating systems, such as

Windows, Mac OS, Linux, Android, iOS, etc.

• They are designed to provide a consistent user experience

and functionality across different devices and platforms.
• They create native-like apps that can access most of the
native features and functionalities of the device.
• Cross-platform apps provide better performance and user
experience than hybrid apps,
 Types of mobile Apps

4. Cross-platform apps

Advantages of Cross-platform apps

 They can reduce the development cost and time.

 Developers can use a single codebase and framework to
create an app that works on different devices

 They simplify the maintenance and update process, as

changes can
 Types of mobile Apps

4. Cross-platform apps

Disadvantages of Cross-platform apps

 They may not be able to fully utilize the native features and
capabilities of each platform.

 Cross platform apps may have to compromise on the

performance, functionality, and user experience of the app.

 They may face compatibility and quality issues across

 Types of mobile Apps

4. Cross-platform apps
Development Frameworks
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Utility apps

• These apps provide basic functions such as

calculator, flashlight, weather, etc.

• They are usually simple and easy to use.

 Types of mobile Apps

Types of mobile apps based on their functionality:

 Productivity apps

• These apps help users perform tasks such as email,

calendar, note-taking, document editing, etc.

• They are designed to enhance the efficiency and

effectiveness of users.
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Entertainment apps

• These apps provide fun and leisure activities such as

games, music, video, etc.

• They are designed to engage and entertain users.

• Example Netflix, Spotify, YouTube
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Education apps

• These apps provide learning and teaching resources such

as courses, quizzes, books, etc.

• They often support features such as feedback, progress

tracking, certificates, etc.
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Lifestyle apps

• These apps provide services and features related to

personal interests and hobbies such as fitness, travel,
shopping, etc.

• They are designed to improve the quality of life of

users.
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Social media apps

• These apps allow users to communicate and interact

with others through platforms such as Facebook, Twitter,
Instagram, etc.

• They often support features such as messaging,

sharing, liking, commenting, etc.
 Types of mobile Apps

Types of mobile apps based on their functionality:

 E-commerce apps

• These apps enable users to buy and sell goods and

services online through platforms such as Amazon, eBay,
Uber, etc.

• They often support features such as payment, delivery,

reviews, etc.
 Types of mobile Apps

Types of mobile apps based on their functionality:

 Game apps

• This apps allow you to play games on your mobile device or

computer.

• Game apps can be of different genres, such as action,

puzzle, sports, music, etc.

• Some examples of popular game apps are PUBG Mobile,

App development team structure and
role
 App development team
structure and role

Major App development team structure and role

includes :

1. Project manager
2. Product manager
3. UI/UX designers
4. Developers
5. QA engineers
 App development team
structure and role
1. Project manager’s responsibilities

• Assigning tasks to the development team, establishing sprint

periods, and prioritizing tasks.

• Calculating your project's cost and remaining inside your budget.

• Increasing communication between you, the client, and the
developers.

• Making modifications to the app development strategy.

• Managing issues and risks.
 App development team
structure and role

2. Product manager’s responsibilities

• Analyzes the market, specify the advantages, values,

and essential features of your app, and investigate your
target audience.

• Identify consumers' critical issues and provide best

answers.

• Create an app development business strategy.

 App development team
structure and role

3.UI/UX designers responsibilities

• Consider the user flow and create app wireframes.

• Make app prototypes.
• Create a user-friendly app UI.
• Changes should be made in response to user input and
testing data.
 App development team
structure and role
3.UI/UX designers responsibilities cont.…

• Working knowledge of UI/UX design tools such as Figma,

InVision, and Sketch.

• Knowledge of UX research, wireframing, UI

prototyping, UX authoring, and interaction design is
required.

• Coding knowledge can be required in order to

 App development team
structure and role
4.Developers responsibilities

• Turning mockups, sketches, and wireframes into high-

end code

• Building and maintaining reliable, reusable, and high-

rated code

• Providing the best quality applications with high-end

performance
 App development team
structure and role

5.QA engineers/ Testers responsibilities

• Conduct both automated and manual testing.

• Maintain a record of test progress and test cases
• Throughout testing, keep track of bugs
• Identify probable issues that users may
encounter;
 App development team
structure and role
5.QA engineers/ Testers responsibilities cont..

• Create stringent testing guidelines to determine

app quality and release readiness

• Strong knowledge of QA testing technologies such as

TestComplete, Robotium, and Selenium

• Understanding of feature and bug tracking systems

such as Jira, Trello, etc..
 App development team
structure and role
Ways of hiring a development team

1. In-house team
2. Dedicated development team
3. Freelancers
 App development team
structure and role

1. In-house team

• This means recruiting and employing developers

directly to work in your office.

• This gives you more control and communication with

the team

• but also requires more time, money, and resources for

hiring, training, and managing them.
 App development team
structure and role

2.Dedicated development team

• Outsourcing your project to a software development

company.

• The company provides you with a team of developers who

work exclusively on your project from their office.

• This gives you access to a pool of talent, flexibility, and

cost- efficiency.
 App development team
structure and role

3.Freelancers

• Finding and hiring individual developers who work

remotely on your project.

• This gives you more freedom and lower costs, but

also involves more risks, such as quality issues,
reliability problems, and coordination challenges.