How To Build A Mobile App – Part 2 – UX and UI


This is the second part of our How To Build A Mobile App Series.

Here is the moment to make the first investment.

If you read already Part 1 – Before You Even Pay For Anything, you should know:

  • How to validate your app idea.
  • Who is going to use your app and what will be the benefits of using it.
  • How you’re going to win with your competition.
  • How your business model looks like.

Now let’s check how we can make the plan working.

Planning your app will have more to do with actual psychology than with development or design.

Your audience research will be extremely valuable to UX designers, as well as project managers and developers that will be creating user stories for you.

Let’s dive in.

Define The User Flow

a man is planning mobile app flow on the wall board

When you know what kind of benefits you can provide to users, you need to draw a path you want them to follow. This will ensure they use the full potential of your app.

In other words, you need to make a “user flow”.

Write down all the things you expect user to do in your app, and then plan the optimal flow to them from the welcome screen.

This part is more about “how things will happen?”. How would they get to all the wanted points?

Remember. It’s crucial for you to test your flow after.

You need to know precisely where your users are interacting and engaging the most with your app, and which steps are crucial in the entire flow.

List Your App Features

a woman is designing mobile app flow

Sometimes the question “how to build a mobile app” is actually highly dependent on the other question: “what are the apps features?”. Just the same as you build a house, it’s all dependent on what you actually want to achieve.

You know the flow, you have an idea of what user should expect, and how is he going to get it, so now it’s time for features – attributes that will make many additional things possible.

These could be notifications, payment methods, social sharing, you should name it yourself.

Have a look at apps that have a similar goal to yours. Check out their features and reviews, and see what people say.

Based on that you can come up with:

  • What’s missing in those apps?
  • What’s not needed?
  • What will make your app more appealing than the others?
  • Which features will be free and which ones will be paid for?
  • Which ones are crucial for adding your value?
  • etc.

Features are also very important in making user stories, as they will solve specific problems or needs of your users.

Think About User Experience

a person is searching something on the internet using tablet

Let’s put it all together now. Let’s design how people will actually do it all step by step.

User Experience (UX) is all about creating meaningful interactions with your app, ensuring users get the best possible experience when using your app.

Don’t get confused here. Meaningful interactions are not fancy interactions. They don’t need any special effects, nor flashes.

People are an impatient bunch, and if they can’t get what they want straight away, there is a high risk they’ll just stop using your app.

Obviously, if you can afford special effects, or you build a game, you may find them important, but if you run an app that solves a specific problem, people prefer to get this problem fixed quick and easy, and usually, they are not waiting for any Sydney fireworks. The problem fixed is enough.

To keep it that way, two things have to be remembered:

  • There can be no room for any confusion
  • You can never leave your user alone

There’s nothing worse than feeling neglected.

Your app should be clear, easy to operate by intuition, and persuasive to go further. That means, users need to know exactly where to click next, so they take the right path the easy way and see everything you want them to see.

It’s like being a chef in a good restaurant. You show and give only what you consider is best for your guests. Not a fast-food restaurant with hundreds of confusing meals. You know them, you know what they need, right?

After you came up with all the flow and the most important UX elements, make a mockup, like this one:

a raw sketch of mobile app user experience

You need to remember that making a mockup is not making designs.

Mockup is a rough sketch of your app possibilities, features, and flow. It doesn’t contain any fine-tune designs, nor the exact UI elements.

You can obviously create an app mockup yourself on a piece of paper, but I recommend you to use Balsamiq Mockups – a great tool with many ready-to-use features.

This is the right place to ask questions like:

  • Where to put CTA buttons?
  • How to shift people’s attention from one place to another?
  • What’s the first thing they should see, or notice?
  • How are you building up suspense to push them to click further?
  • How to plan a basket or payment page?
  • And many more.

Going further deliverables of good UX Stage should be:

  • Information Architecture of the whole app (flow, features)
  • UX Wireframes (mockups)
  • Interactive Prototypes (examples of interactions, effect, etc.)
  • Specifications for UI Designers (all with detailed explanation)

Prepare Visual Designs

a screen with colors and srtyles to choose for building an app

Now it’s time to bring some colors and switch sketches into real pages.

If you are a developer, you might need some help with designs. Having all the documentation mentioned, you pretty much have everything a designer will need to work further.

To make your work easier and fluent, you can use tools like Figma, Sketch, InVision, and many more. Most of them have a lot of ready-to-use designs, features, and components, and are great to work in teams, where you can add suggestions, and edit things in live mode.

Cool design and some dynamic interface can also be one of your value propositions that will make your app many fans. However, as mentioned before, check how far you can go with designs to make sure you won’t overpay for something that will be just annoying to users.

P.S. Keeping everything in one design tone is also useful for your brand recognition, but good designers know that very well.

Hit Upwork, Toptal, or Fiverr to find them on-demand.

Prepare Initial Project Backlog

a man in a suit is writing something on the wall board using sticky notes

Now it’s time to put everything in order and decide what are the “first things first” in the development stage.

In Project Management language, we need to make the initial project backlog – a prioritized list of tasks that needs to be done in order to make things working.

To make sure your team is always well informed of what to deliver first, you put the most important items on top of the list. Always.

To prepare a good list we will use all gathered information (we will call them requirements) and put them inside The Roadmap – a plan of action on how the product will look over a specific period of time.

All the events on the Roadmap will be later split into epics – bigger work objectives that can be later again split into specific tasks, called stories.

There are number of things that may affect the priority of a specific epic, or story. These are:

  • Client needs something urgent
  • Difficulty in execution
  • X will be easier if we do Y first
  • Waiting for feedback
  • Development capacity
  • etc.

Most of the time, it is the Product Owner who is putting a priority on specific tasks. However, developers are the ones deciding on how quickly each task can be delivered.

Choose The Right Technology

a hand holding smartphone with react native logo on it

The plan is there. It’s time to choose a heart for this beast. Therefore, we should choose wisely!

Generally, there are a number of different technological options you could go for when it comes to app development:

  • Platform-specific native-app
    These apps are coded for either iOS or Android.
  • Cross-platform native app
    These apps use Shared Development Kits, but can still run natively. They lose some native features but are great for companies on a budget that want to target both operating systems.
  • Hybrid app
    A hybrid app is compatible with both iOS and Android. You won’t get all the benefits of native apps, but hybrid apps are both cost-effective and quick to deploy. With this approach, you don’t need to write different codebases for each platform, you just write it one and use it across platforms.

We won’t go into too many details. Otherwise, this article will never end.

If, however, you fancy reading up a bit more, here’s info on React Native and how it can cut your development costs.

You can also read more about why we choose to work with it, and check if it’s actually good for your business at all.

Still not sure which technology to use?

After that, let’s make things working.

We will develop the app in Part 3 – Development and Maintenance.

Leave a Reply

View Comments (0)...

Related articles:

18 Tips For a Better React Code Review (TS/JS)

The Power of React (Native) and Gatsby Development