SEng3206

Mobile Application Design and Development

App design and Development

essentials
Amir Ibrahim
March 2023
Mobile app design
 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

UI
 UI stands for user interface, which 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

UX
 UX stands for user experience, which 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
 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

UX
 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

UX
 Accessible: Disabled users, e.g., users
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 product.
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

1. 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

1. Native Apps
 Native apps are installed directly onto the device and can use device-
specific hardware and software.
 Examples of native apps include Instagram, Snapchat, and Pokemon
Go.
 Types of mobile Apps

1. Native Apps
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 each platform
 Types of mobile Apps

1. Native Apps
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.
 The browser and its plug-ins run on the back end and are invisible to
the end user.
 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.
 They can work offline by storing data locally.
 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.
 They may require additional plugins or frameworks to enhance their
functionality.
 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
be applied to all platforms at once.
 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 different
platforms.
 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, Candy
Crush Saga, Minecraft, and Among Us
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.
 App development team structure and role

1. Project manager’s responsibilities

 Making modifications to the app development strategy.
 Managing issues and risks.
 Maintaining quality, meeting deadlines, and keeping expenses under
control.
 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.
 Prioritizes useful app features.
 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

 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 communicate
effectively with programmers.
 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
 Fixing bugs and correcting app drawbacks
 Stay updated with the most recent trends in technology
 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

 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.
 but also requires trust and clear communication with the vendor.
 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.