Chapter 1: Design Mobile Application

Designing mobile applications is a critical phase in the software development lifecycle, especially in Kenya where mobile technology drives innovation across sectors such as banking, healthcare, and government services. Effective design ensures applications are user-friendly, efficient, and adaptable to various devices and operating systems prevalent in the Kenyan market. This chapter examines fundamental design principles and guidelines tailored for mobile applications, equipping developers with the knowledge to create robust and scalable software solutions.

1.1 Design principles and Guidelines

Mobile application design principles guide developers in creating apps that meet user expectations, perform well on mobile devices and stay consistent across platforms. Kenya's mobile ecosystem is varied: users run apps on new smartphones and on older entry-level handsets, on fast Wi-Fi and on slow, intermittent mobile data. Applying the principles below helps a developer build an app that works for urban and rural users alike, with accessibility and usability in mind.

1.1.1 Operating system

Mobile applications run inside a mobile operating system (OS), and Android and iOS are the two systems a developer meets most often. Designing with the OS in mind ensures compatibility, security and performance.

Understanding mobile operating systems

A mobile operating system provides the core software environment in which applications run. Android is favoured for its open-source nature and is used by many smartphone manufacturers, so it supports a very wide range of devices. iOS runs on Apple devices only and offers a controlled ecosystem with strict guidelines. Developers must understand each OS's features, APIs and limitations to get the best from their app.

OS-specific design guidelines

Each OS has its own design language: Material Design for Android and the Human Interface Guidelines for iOS. Following them makes an app feel native to the platform, which improves the user experience. For example, Android apps commonly use floating action buttons and navigation drawers, while iOS apps emphasise tab bars and swipe gestures.

Managing cross-platform compatibility

Developers often need an app to run on more than one OS to extend its reach. Cross-platform frameworks such as Flutter or React Native allow code to be shared between the two. Designers must still adjust interface elements to each OS's conventions, otherwise the app feels generic and less comfortable to use.

Security and permissions management

Operating systems enforce security models that control an app's access to device features such as the camera, location and contacts. A developer should design permission requests so that the user understands why each one is needed. Transparent requests build trust, especially in apps that handle payments or personal data.

1.1.2 Consistency

Consistency in mobile app design builds familiarity and shortens the learning curve for users. It means uniform visual elements, navigation and behaviour across the app and the platforms it runs on.

Visual consistency

Using the same colours, typography and iconography on every screen matches the brand identity and lets users recognise app elements at once. For instance, a delivery app for market-stall vendors that uses a green header, the same logo position and one icon set on every screen looks and feels like a single product.

Functional consistency

Navigation elements such as menus, buttons and gestures should behave predictably. If a swipe gesture deletes an item in one part of the app, it should have the same effect everywhere else, so that users are not confused.

Consistency across devices

An app should give a similar experience on a smartphone and on a tablet so that users keep their confidence. Layouts adapt to the screen, but the core interactions and features stay the same.

Alignment with OS standards

Consistency also means following the standards of the platform, so that users who know Android or iOS can use the app without relearning basic controls.

1.1.3 Device

Mobile devices differ widely in screen size, resolution, processing power and input methods. Designing for this variety is important in Kenya, where people use apps on high-end smartphones and on basic, low-cost handsets.

Screen size and resolution

An app must respond to different screen sizes, from small phones to larger tablets, so that content fits and stays readable. High-resolution screens need scalable graphics to avoid pixelation.

Hardware capabilities

Design should take account of limits in CPU speed, memory and battery life. Lightweight apps run better on entry-level devices.

Input methods

Touch input is the standard, but some devices also support a stylus or a hardware keyboard. Large touch targets and support for several input types improve accessibility.

Network connectivity

Network coverage and speed vary, and some users have low bandwidth or an intermittent connection. Data-efficient design and offline functionality keep an app usable in these conditions.

1.1.4 Scalability

Scalability means that a mobile application can handle growth in users, data volume and feature complexity without losing performance. The principle matters for any app that is expected to grow.

User base growth

An app must manage a rising number of users efficiently. For instance, a ride-booking app that starts in one town should keep fast response times when it opens in several more.

Data volume management

Scalable apps cope with growing storage and retrieval needs. Cloud services such as Microsoft Azure or Amazon Web Services provide storage and computing resources that can be increased as demand grows.

Modular architecture

Building the app from modular components allows new features to be added without rebuilding the whole system, which makes maintenance and updates easier.

Performance optimisation

Scalability also includes optimising code and resources so that the app stays fast and responsive as the workload increases.

1.1.5 Simplicity

Simplicity in mobile app design supports user engagement by reducing complexity and focusing on core functions. On a small screen, with limited data and short sessions, an app that is straightforward and quick to navigate is easier to use.

Clear user interface

A clean interface avoids clutter and uses intuitive icons and labels, so that users complete tasks efficiently.

Minimal user input

Reducing typing and complex gestures improves usability, particularly for users with limited digital literacy.

Focus on core features

Putting the essential functions first prevents feature bloat, which can confuse users and slow the app down.

Guided user flow

Step-by-step processes and contextual help lead users through a task, which raises satisfaction and reduces errors.

1.1.6 Mobile application design tools

A design tool lets a developer or designer draw the screens of an app, link them into a flow and share them for feedback before any code is written. Choosing a suitable tool speeds up design and improves collaboration in a software team. Most work moves through four stages: a wireframe (a rough, low-fidelity layout of each screen), a mockup (a high-fidelity screen with final colours, type and images), a prototype (linked screens that can be tapped through like the real app) and a handoff (specifications, measurements and assets passed to the developers).

1.1.6.1 Types of mobile application design tools

Design tools differ in where they run, how much detail they handle and which stage of design they serve best. Some are full vector design editors that also prototype, such as Figma and Sketch. Others concentrate on turning finished screens into clickable prototypes and collecting feedback, such as InVision and Marvel. Adobe XD sits between the two groups. Each tool below is described in turn, with a short example of how it is used in practice.

Figma

Figma is a design and prototyping tool that runs in a web browser and as a desktop app. Several people can open the same file at the same time, see each other's cursors and comment on a screen as it is drawn. Because the file lives online, a team spread over different towns works on one shared version instead of passing files by email.

• Platform: Browser and desktop app on Windows and macOS, so a team does not need matching computers.
• Strengths: Real-time editing, reusable components for buttons and headers, auto layout that resizes a screen when its text changes, and built-in prototyping.
• Limits: A stable internet connection is needed for shared work, and a very large file with many screens can become slow on a low-specification laptop.
• Handoff: Developers open the shared file to read measurements, colours and text styles and to export icons and images.
• Example in practice: A two-person team building a salon booking app draws the booking screens as frames, links them in the Prototype tab, and sends the link to the salon owner for comments before coding begins.

Sketch

Sketch is a vector design tool made for interface work. Its editor runs on macOS only, which suits teams whose designers use Mac computers and who target iOS as well as Android screens. A large library of plugins adds features such as icon sets, sample data and export helpers.

• Platform: The editor runs on macOS; documents shared through Sketch's web app can be viewed and commented on in a browser on any computer.
• Strengths: A clean, focused interface for high-fidelity screens, symbols that reuse the same element across many artboards, and a large plugin library.
• Limits: Designers on Windows or Linux cannot run the editor, so a mixed team may prefer a browser-based tool.
• Handoff: Artboards are exported as images, and specifications and assets are shared through the web app or plugins.
• Example in practice: A designer working on a Mac draws the screens of a matatu fare-estimate app as artboards, reuses one symbol for the route card, and exports the icons for the developer.

Adobe XD

Adobe XD is a vector design and prototyping tool from Adobe. It offers a Design mode for drawing screens and a Prototype mode for linking them with transitions, and it works with other Adobe applications such as Photoshop and Illustrator. Adobe has placed XD in maintenance mode: it receives no new features, so learners meet it mostly in existing projects and training files, while new teams usually choose a tool that is still being developed.

• Platform: Desktop app on Windows and macOS.
• Strengths: A simple layout that is quick to learn, easy movement of artwork to and from Photoshop and Illustrator, and prototype transitions that are simple to set up.
• Limits: No new features are being added, so it can fall behind the current design systems and operating system updates that newer tools follow.
• Handoff: Designs and prototypes are shared by link, and developers inspect them or export assets.
• Example in practice: A studio keeps the old XD files of a hardware-shop stock app so that the team can open them, check the screens and rebuild them in a current tool when the app is next updated.

InVision

InVision was a platform for turning finished screens into clickable prototypes and gathering comments from clients and team members on each screen. The service ended on 31 December 2024 and its documents were deleted afterwards, so it can no longer be used for new work. The ideas it popularised remain part of most current tools: link static screens into a flow, share the link, and collect comments in one place.

• Status: Closed on 31 December 2024, so a learner will meet it only in older project descriptions and tutorials.
• What it offered: Hotspots that linked one screen to another, transitions between screens, and comment pins placed on the exact spot being discussed.
• Why it still matters: Older tutorials mention it, and the workflow of prototype, share and comment is still used in design review.
• Where the work went: Users were told to export their documents before the closure, and teams moved their prototyping and review to tools that are still developed, such as Figma.
• Example in practice: A learner reading an older tutorial for a farm-input ordering app sees steps for InVision hotspots and repeats the same steps with the Prototype tab in Figma.

Marvel

Marvel is a browser-based tool for designing screens and turning them into interactive prototypes without writing code. The designer uploads or draws screens, adds links and gestures between them, and shares a link so that a client can tap through the prototype on a phone. It also supports user testing and generates specifications for developers.

• Platform: Browser-based, with companion apps for viewing prototypes on a phone; check the vendor's site for the current plans and supported devices before choosing it for a team.
• Strengths: Quick to learn, prototypes built without code, and user testing and developer handoff in the same tool.
• Limits: It is lighter than the large vector editors for detailed drawing, so complex screens are often drawn elsewhere and imported.
• Handoff: A single link gives developers the screens, measurements and generated specifications.
• Example in practice: A learner imports three screens of a market-price alert app, links the Home screen to the Price List screen with a tap, and sends the prototype link to a trader to try on a phone.

Chapter Summary

This chapter explored essential design principles and guidelines critical to mobile application development, emphasizing the importance of aligning with operating system requirements, maintaining consistency, considering device constraints, ensuring scalability, and prioritizing simplicity. It also introduced various mobile application design tools such as Figma, Sketch, Adobe XD, InVision, and Marvel, which facilitate the creation of effective user interfaces. The discussion then shifted to key aspects of mobile application functionality, including usability, performance, security, compatibility, and the ability to provide offline access, all of which contribute to a seamless user experience. Attention was given to the design of the mobile application interface, highlighting how intuitive layouts and interactive elements engage users effectively. Finally, the chapter addressed mobile application output design, focusing on how information and results are presented to users in a clear and accessible manner. Together, these topics provide a comprehensive foundation for designing robust, user-friendly mobile applications.