How to Design a Mobile Application? 10 Steps from Idea to Publication

UI/UX design guide

Scope of the guide

Short answer: Mobile application; It is designed with the steps of clarifying the target and the user, examining the competitors, creating a list of flows and screens, drawing a wireframe, establishing the design system and interface, testing with a prototype, delivering it completely to the developer, preparing it for the store, and measuring and improving it after publication.

I am Selçuk Aker; I'm a graphic and UI/UX designer based in Istanbul with over 19 years of experience and I work remotely. Most people who have an application idea want to start directly by saying "let's draw the screens". However, when decisions that need to be made before going to the screen are skipped, the design is redone either during coding or after publication. In this guide, I explain the steps in which a mobile application is designed, from idea to publication and post-publication, and which file emerges at each step. For the general framework of mobile design, you may first want to read the what is mobile application design guide.

Steps and deliverables: overview

The table below summarizes the ten steps in the guide and the output you should have at the end of each step. In a small project, some steps may be shortened; but none should be completely omitted.

Step 1: Idea, goal and single critical task

The first step is to write in one sentence what problem the app solves. An "app that does everything for everyone" cannot be designed. The answers to the following questions should not exceed one page:

- Who will use the application and in what situation will it open it? -What is the single most important task the user will do in the app? - In what way does he do this task today? - By what indicator will we understand if the first version is successful?

At this stage, it is important to write a task list rather than a feature list. “Messaging feature” is a feature; "The courier quickly reaches the customer when he cannot find the delivery address" is a task. Tasks make it easy to draw the line for the first release (MVP). I explained how to draw this boundary in the article startup UI/UX designer and MVP scope.

Step 2: Knowing the user and competitors

The purpose of this step is to test the assumptions. Brief interviews with a few of the target users show how they do business today and where they struggle. Focus on understanding current behavior in the conversation, not on selling the idea.

Competitor review is not about collecting screenshots. Downloading competing apps and trying the same task from start to finish shows which steps become habit and which ones tire the user. Store reviews are also a good source of user complaints.

I explained in detail which question research methods answer in the What is user experience design guide.

Step 3: User flows and screen inventory

Flow is a diagram of the screens and decision points the user goes through while completing a task. For example, the "making an appointment" flow: service selection, date and time selection, information entry, confirmation and reminder. At every decision point, the question “what if?” The question is asked: if the selected time has expired, if the user is not logged in, if the payment fails.

Extracts screen inventory from streams. This list should include not only home screens but also states:

• Empty status (when there are no records yet)
• Loading status
• Error status (no connection, server error, invalid login)
• Permission requests and the screen when permission is denied
• Success and confirmation screens

I gave the full list of states in the article states that should be added to the screen list. This step is also the basis of price and duration estimation; Predictions made without knowing the number of screens and states are often incomplete.

Step 4: Layout with Wireframe

Wireframe is a sketch that shows what will be on each screen and its priority, free of color and visuals. The topic to be discussed at this stage is "is it beautiful?" but "is the right information in the right order?" is the question.

Things to consider in wireframe:

• Use real or lifelike content. Turkish texts are longer than English and lorem ipsum hides this.
• Clarify the location of the primary action; Consider the area that can be reached with one hand.
• Fix the navigation structure (bottom tab, top menu, stack) at this stage.

If wireframe is omitted, structural decisions are made during visual design; Every change becomes much more expensive. For what decisions to test in wireframe, you can see the article wireframe and prototype decisions.

Step 5: Design system

Establishing ground rules before moving to the visual interface maintains consistency as the number of screens increases. The minimum design system for a mobile app includes:

• Color: Primary color, secondary colors, semantic colors (success, warning, error), light and dark theme equivalents if necessary.
• Typography: Title, body, tag dimensions; dynamic font size adaptation.
• Spacing and grid: A consistent spacing scale.
• Components: Button, input field, list item, card, tab bar, dialog; with each of their situations.
• Icons: A single rule of style and size.

At this stage, platform guides, Apple's Human Interface Guidelines and Google's Material Design 3 documents are the reference sources. I explained which notes should be delivered alongside the components in the article design system delivery.

Step 6: Visual interface

Once the design system is ready, the displays are installed with these components. At this stage, the brand identity is reflected in the interface: color, illustration language, use of photography and micro-interactions.

Things to check:

• Is there a single primary action and a clear visual hierarchy on each screen?
• Is text contrast at least 4.5:1 for normal text at WCAG 2.2 AA?
• Do the touch areas comply with the platform recommendations (Apple 44 × 44 pt, Android 48 × 48 dp)?
• Is order disrupted at the smallest and largest screen size?
• Are all statuses (empty, loading, error, permission) visually completed?

General rules to be applied in screen design are included in the UI/UX design principles guide.

Step 7: Prototype and usability testing

A clickable prototype is established by connecting the screens together. The prototype allows the flow to be tested with real users before the application is coded.

A simple test plan:

1. Select the two or three most critical tasks.
2. Log in one by one with several people who are similar to the target user.
3. Give the task, watch without helping, ask them to say their thoughts out loud.
4. Note any hang-ups and recurring problems.
5. Straighten and make another small turn if necessary.

For how to prepare prototypes to be shown to investors or stakeholders, you can refer to the article product prototype to be presented to investors. I compared the tools used for the prototype in the UI/UX design programs guide.

Step 8: Developer submission

If the design file is delivered to the developer only as a screenshot, any missing issues will be filled in with guesswork during coding. A complete takeover package includes:

• All screens and statuses are arranged in order of flow.
• Component library and states of each component.
• Colour, typography and spacing values (as tokens if possible).
• Proper export of icons and images.
• Transition and animation notes (duration, trigger).
• Error messages and all interface texts.
• Decision record: why this solution was chosen, which alternative was eliminated.

The handover goes much more smoothly when the developer is involved from the wireframing stage. If technical constraints are learned early, subsequent change is reduced. For details, you can see freelance mobile app designer and developer transfer, UI/UX collaboration for mobile application developers and screen to developer transfer.

Step 9: Store preparation

The store page is the only place the user sees before downloading the app. What needs to be prepared:

• A recognizable application icon, also in small size.
• Screenshots explaining what the application does in the first frames.
• A short and clear introductory text.
• Privacy and data usage information (statements required by stores).

Store visuals are often planned as a separate deliverable from interface design. Metrics and guidelines are determined by Apple and Google and are subject to change; Check for updated information on the App Store Connect and Google Play Console help pages. Coding of the application, store account and publication process are the responsibility of the development team.

Step 10: Measurement and iteration after release

Release is not the end of design, but the beginning of real data. In the first weeks, the following is checked:

• The completion rate of the critical task and at which step of the flow it was abandoned.
• Recurring complaints in support requests and store reviews.
• On which screens crash and error reports are concentrated.

This data becomes an improvement list and issues are ranked by impact and cost to fix. The next release is planned from this list. For measurement to be useful, which events will be recorded must be determined at the design stage.

In the release plan, it should be written which problem each change responds to. When choosing between adding a new feature or unblocking an existing flow, the latter often touches more users at less cost. The design file should also be updated with each release; If the live application and the design file diverge, the next round of development may be based on old and wrong screens.

Example: ten steps in a dating app

To make the steps concrete, let's consider a fictional example: an application where small clinics make appointments for their patients. In the first step, the single critical task is written as "the patient gets an appointment at a convenient time in less than three minutes." According to user interviews, most of the patients call by phone and the most common question is "which doctor is available?" It is learned that he asked the question. Competing apps are tried; It is noticed that in some cases the calendar cannot be viewed without registration.

In the flow phase, doctor selection, date and time, patient information and approval steps appear; The status "if the selected watch was taken by someone else at this time" is also listed. Compare calendar view and list view in Wireframe. The design system defines a calm color palette and large touch areas suitable for the healthcare field. If it is seen that elderly participants have difficulty in the small clock boxes during the prototype test, the boxes are enlarged. Appointment conflicts and disconnections are also documented during handover; In the store images, the first frame shows the appointment booking screen. After publication, the completion rate of the appointment flow is monitored.

This example is designed to show how the steps feed each other; It does not describe a real customer project.

Who is involved in the process?

The designer does not work alone on a mobile application project. A typical team includes the following roles, and in small teams several may be combined in the same person:

• Product owner or product manager: Determines the target, priority and scope, and approves the decisions.
• UI/UX designer: Prepares the flow, wireframe, design system, interface and prototype.
• Mobile developer: Codes the application for iOS and Android, shares technical constraints.
• Backend developer: Sets up data, server and API side; It defines error and offline states together.
• Test expert: Catches functional and visual errors before release.
• Content responsible: Prepares interface texts, notifications and store promotional text.

Determining the roles from the beginning, "who will decide this?" It prevents the question from being asked in the middle of the project.

Common mistakes

• Trying to fit every feature into the first version.
• Skipping wireframing and moving directly to visual design.
• Just designing "everything is fine" screens and forgetting about the situations.
• Involving the developer in the process once the design is finished.
• Assuming "the user will understand this" without testing.
• Leaving store images to the last day.

I have collected other common mistakes that early stage teams make in the article early stage startup design mistakes. I explained where rapid application production with artificial intelligence tools works and where it creates risks in the can applications be made with artificial intelligence guide.

My own design flow

In mobile application projects, I usually start with the product summary and task list, and after creating the flow and screen inventory, I move on to the wireframe, design system and interface stages. I prepare the screens and prototype in Figma and deliver a rollover file to the developer with states and behavior notes. Since I work remotely, regular short conversations and comments on the shared file form the basis of the process.

I make the line of responsibility clear from the beginning: my job is design; The development team is responsible for coding the application, server infrastructure and publishing it in the store. You can see the mobile application interfaces published in my portfolio on the mobile application works page; I undertook the interface design in Danone and ERP Software, which are projects with a confirmed role. I explained the scope for startups on the startup design support page, and for application projects on the mobile application design service page; You can use the contact page to discuss your project. For the entire field, you can refer to the UI/UX design homepage, and for the duties of the designer, you can refer to the What does a UI/UX designer do guide.

Summary and checklist

• Is the product summary one page and one critical task written?
• Have at least a few short conversations been held with users, have competing streams been tried?
• Have flows and screens been inventoried with statuses?
• Was the wireframe prepared with real content?
• Have the design system, components and their states been defined?
• Have contrast, touch area and screen size controls been made?
• Has the prototype been tested with real users?
• Does the handover package include screens, states, tokens, assets and text?
• Are the store icons and visuals planned to be delivered separately?
• Has it been determined which indicator will be monitored after the broadcast?

Do you have a digital product project?

This guide gives information about UI/UX design. You can share your current screens and goals for your digital product.

• Target user of the product
• Prioritized task and flow
• Platform (web, iOS, Android)