Designing a mobile app from scratch using figma

Introduction
Welcome to Designing a Mobile App from Scratch Using Figma (Low-Fi)! In this lecture, you’ll get an overview of what this course is all about, the tools you’ll be using, and the step-by-step process we’ll follow together. You’ll also learn why low-fidelity design is a crucial part of the UI/UX workflow and how it helps you focus on structure, flow, and usability before adding visual polish.

What you’ll be able to do after completing this lecture:

• Understand the course objectives and structure.

• Explain the importance of low-fidelity wireframes in app design.

• Set up your Figma workspace for this project.

• Identify the key stages of designing a mobile app from scratch.

Understanding the Workflow Stages
In this lecture, we’ll break down the complete workflow for designing a mobile app from scratch in Figma, focusing on the low-fidelity stage. You’ll see how the design process flows step by step—from defining the app’s goals, sketching rough ideas, creating wireframes, to preparing for high-fidelity designs. Understanding these stages will give you a clear roadmap so you never feel lost during the design process.

What you’ll be able to do after completing this lecture:

• Identify the main stages of the mobile app design workflow.

• Explain why each stage (research, sketching, wireframing, prototyping) is important.

• Organize your own project in a structured, step-by-step manner.

• Gain confidence in moving from an idea to a functional low-fidelity wireframe.

Breakdown of Workflow Stages
In this lecture, we’ll take a closer look at each stage of the mobile app design workflow and break it down into practical, easy-to-follow steps. You’ll learn how the process flows from brainstorming ideas, defining user needs, sketching layouts, building wireframes in Figma, and preparing for prototypes. By breaking the workflow into clear parts, you’ll see how every stage connects, making the design journey less overwhelming and more manageable.

What you’ll be able to do after completing this lecture:

• Outline each stage of the design workflow with clarity.

• Understand how brainstorming, wireframing, and prototyping fit together.

• Apply the step-by-step workflow to your own mobile app projects.

• Confidently move from concept to wireframe without skipping essential steps.

In this lecture, we’ll explore how to design and set up a simple digital survey to gather feedback from potential users before diving into the design process. You’ll learn how surveys help uncover user needs, preferences, and pain points, which will guide your app’s structure and features. We’ll also cover how to keep surveys short, focused, and effective for meaningful insights.

What you’ll be able to do after completing this lecture:

• Understand the role of surveys in user research.

• Create clear, targeted questions to gather useful feedback.

• Use survey insights to shape your app’s low-fidelity wireframes.

• Confidently set up a digital survey using accessible tools.

Creating a User Persona
In this lecture, we’ll learn how to create a user persona—a fictional but realistic profile that represents your target audience. You’ll see how personas help you understand users’ goals, behaviors, frustrations, and motivations, which will guide every design decision you make. By the end, you’ll know how to transform survey results and research data into a clear persona that keeps your app focused on real user needs.

What you’ll be able to do after completing this lecture:

• Understand the importance of user personas in app design.

• Identify key details to include in a persona (demographics, goals, challenges, motivations).

• Create a structured user persona based on research and survey feedback.

• Use personas to make design choices that improve usability and user satisfaction.

Creating a Problem Statement
In this lecture, we’ll focus on how to write a clear and actionable problem statement that defines the challenge your mobile app will solve. You’ll learn how to analyze survey results, user personas, and research insights to frame the user’s pain points into a concise statement. A strong problem statement will serve as your design compass, keeping your app aligned with user needs throughout the workflow.

What you’ll be able to do after completing this lecture:

• Understand the role of a problem statement in guiding design decisions.

• Translate user frustrations and needs into a clear design challenge.

• Write a problem statement that is specific, user-focused, and solution-oriented.

• Use the problem statement to keep your low-fidelity wireframes aligned with user goals.

Creating an Information Architecture
In this lecture, we’ll learn how to create an information architecture (IA) for your mobile app. Information architecture is about organizing and structuring your app’s content so that users can navigate smoothly and find what they need without confusion. You’ll see how to map out the app’s hierarchy, group related features, and build a logical flow that supports usability.

What you’ll be able to do after completing this lecture:

• Understand the role of information architecture in mobile app design.

• Organize app features and content into a clear, user-friendly structure.

• Create simple IA diagrams (like sitemaps or flowcharts) to visualize app navigation.

• Apply IA principles to guide your low-fidelity wireframe design in Figma.

Introducing Low-Fidelity Prototype
In this lecture, we’ll dive into the concept of low-fidelity prototyping and why it’s an essential step in mobile app design. You’ll learn how low-fi prototypes help you quickly visualize ideas, test functionality, and validate user flows before investing time in high-fidelity details. We’ll also cover the benefits of sketch-like designs that focus on structure and usability rather than colors or final visuals.

What you’ll be able to do after completing this lecture:

• Understand the purpose and importance of low-fidelity prototypes.

• Differentiate between low-fidelity and high-fidelity prototypes.

• Visualize app screens and flows using simple, wireframe-style layouts.

• Use low-fi prototypes to test ideas and gather feedback early in the design process.

Sign Up/Login Task
In this lecture, we’ll design one of the most common and essential features of any mobile app: the sign-up and login flow. You’ll learn how to structure screens that make it easy for users to create an account or log in securely. We’ll explore best practices for keeping the process simple, intuitive, and user-friendly, while focusing on low-fidelity layouts in Figma.

What you’ll be able to do after completing this lecture:

• Understand the importance of sign-up/login flows in mobile apps.

• Design low-fidelity wireframes for sign-up and login screens.

• Apply usability principles such as clarity, simplicity, and error prevention.

• Create a smooth user journey from the welcome screen to account access.

Fund Wallet Task
In this lecture, we’ll design the Fund Wallet feature, a critical flow for any app that involves digital payments or balance management. You’ll learn how to create low-fidelity wireframes for wallet funding options, such as adding money via bank, card, or transfer. We’ll focus on making the process intuitive, secure, and user-friendly while keeping the wireframes simple and functional.

What you’ll be able to do after completing this lecture:

• Understand the purpose of a wallet funding feature in mobile apps.

• Design low-fidelity wireframes for adding money to a wallet.

• Map out user flows for selecting payment methods and confirming transactions.

• Apply usability best practices to ensure a seamless and trustworthy experience.

Invest Task
In this lecture, we’ll design the Invest feature of the app, which allows users to explore investment options and allocate funds. You’ll learn how to structure low-fidelity wireframes that make complex financial interactions simple and approachable. We’ll cover how to present investment choices, display key details clearly, and create smooth user flows for initiating and tracking investments.

What you’ll be able to do after completing this lecture:

• Understand how investment features fit into a mobile app experience.

• Design low-fidelity wireframes for browsing, selecting, and confirming investments.

• Create intuitive layouts that highlight important financial information.

• Map out a user-friendly flow for managing and tracking investments.

Testing the Low-Fidelity Prototype
In this lecture, we’ll focus on testing your low-fidelity prototype to see how well it meets user needs. You’ll learn how to simulate basic interactions in Figma, gather feedback from users, and identify areas for improvement before moving on to high-fidelity design. Testing at this stage saves time, reduces errors, and ensures that your app structure and flow are truly user-friendly.

What you’ll be able to do after completing this lecture:

• Understand the importance of testing low-fidelity prototypes early.

• Set up simple interactions in Figma to mimic real user journeys.

• Conduct usability testing and gather meaningful feedback.

• Identify design flaws and refine wireframes based on test results.