UX.3: How to Design Your App


Let's define some common UX workflows around creating a product and product designs. After, we'll encapsulate these steps into a concrete project workflow.

User Story Mapping

  1. 1.
    Define a vision
  2. 2.
    Build the backbone
  3. 3.
    Identify and group activities
  4. 4.
    Break activites into tasks
  5. 5.
    Look for gaps
  6. 6.
  7. 7.
    Define iterations or releases
  8. 8.
    Keep the map updated

User Flows

User flows describes the series of high-level steps the user has to take to accomplish an action.


  1. 1.
    Define who the user is
  2. 2.
    Define the user's goal. Goals are also called user stories.
  3. 3.
    Define the steps the user needs to take to accomplish that goal

User flow types:

  1. 1.
    Task flows
    1. 1.
      Written list of things the user needs to do.
    2. 2.
      Competitive Analysis. What do other apps do?
  2. 2.
    1. 1.
      Sketch the screens that represent the tasks. Include all UI elements like inputs or buttons the user needs to accomplish the goal.
  3. 3.
    Screen Flows
    1. 1.
      Fill in more details in the wireframe. Think about the information hierarchy / information architecture of the elements on the screen.


User stories define the intended user and business goals when interacting with a page. Wireframes should organize the content to support these goals.


  1. 1.
    Define the intended user and business goals when interacting with a page.
  2. 2.
    Define specific calls to action, images and or content for this page
  3. 3.
    Include the specific buttons or UI elements or touch points does the user needs in order to accomplish the action.
  4. 4.
    Use information hierarchy / information architecture to dictate the design of information that is most or least important. Resize or rearrange elements according to these principles.

Things to keep in mind:

Don't surprise the user. Ask what the user expects to see in a certain areas of the page.
Define areas of the page using usability conventions: spacing, layout, information hierarchy.

UI Design / Information Architecture / Information Hierarchy

Information architecture is the process of designing a page or screen that gives the user information about what actions they should take and how they should look at that screen.

How to Plan and Create Your Project

1.Begin with what you want the project to be

In bootcamp the main focus of the projects are the technology aspects. The goal of the bootcamp UX material is to incorporate UX design work as much as is possible into every project. This means that (even though a real-world workflow would not work this way) we can work backwards from the technology to justify product decisions, using UX design.
In this context once we've decided what the project should be and what technologies are going to be included, we can look backwards and define the product vision. The vision should answer these questions:
What problem is the app trying to solve?
Who is the user of the product?
What does the product do to solve this problem?

2. Figure out what to Build

a. User activities

Next, define specifically what the project should do. Make a list of activities the user can do within the app that work chronologically toward the main goal of the user.

b. User tasks

Each user activity should be composed of at least one task. Each task will also have it's own sub-goal that the user has in mind.

c. Feature Prioritization

What is the heart of the app? Which activities and tasks are the ones that will allow the user to accomplish the core goal? i.e., if the goal is to buy shoes, filtering the products is not part of the core goal.

3. Design

a. Group and sort activities and tasks.

Group the user tasks to create a user story for each set of tasks. Tasks can be grouped together into one story if it makes sense.

b. Create user flows from one part of the app to the other.

Begin to think about pages / screens. How is the user going to accomplish these tasks and activities.

c. Draw wireframes.

Create wireframes that encompass the tasks and activities. Each wireframe should include the UI elements the user will need to accomplish the task/goal. Use information hierarchy to define where to place elements in relation to each other. Use convention to decide what part of a page a section should go. (i.e., shopping cart goes in the nav bar at the top.

d. MVP Prioritization

Define the MVP given the task / feature prioritization and at this stage also take into account any technical considerations in building the MVP. If possible leave out things like user login until after the main product features are done.

Further Reading

User Stories

Design Patterns

User Flows


User Journey Mapping
Last modified 2mo ago