From Idea to Product — Creating an App
By: Gabriela Sladewska
Tags: UX Design, Web Design, Prototyping, UX, Web Development

Creating an app is a long and complicated process. People often think that the idea is enough, however, there are a few steps between it and the product that can’t be skipped and can determine whether your app will be successful or not.

Before even talking to software developers you need to define certain things about your app or website and its potential users. First few things to do with your UX designer are:

Model User Personas — take some time to figure out what kind of people will be the app created for. When you know who they are, try to define the relationship between the users and the app:

Why are they going to use the app?

What do they want to get from using the app?

How (where, when, how often) are they going to use the app?

Define Functionalities — you should be able to tell what is the main functionality of your app (there shouldn’t be more than one, in some specific cases two main functionalities). It is also important to know what additional functionalities the app is going to have. Write them down in order — from the most to the least crucial.

Write down your project’s mission — you already know for whom you are creating the app, what it is going to do and what is its main purpose, now try to sum it up in one sentence. How is your app going to change in the world, why is it worth creating?

You should remember that knowing the purpose of their work and having faith in the product’s success the developers will work more efficiently as it increases their inner motivation. When the product is defined, it’s time to start the prototyping process. We create the prototype to avoid any misunderstandings between you and the developers. Remember to always check if the prototype you create is consistent with your mission — if not, reconsider the prototype or update the mission.

Plan screens and user flow — it’s a good practice to write down all the screens needed in your app and create the user flow. It helps you decide whether the screen is needed and you shouldn’t forget about anything in the further prototyping process.

Design wireframes — wireframes are colourless sketches of every screen. Their main purpose is to define the elements and their functions. At this point it is crucial to remember about a couple of things:

use accurate sample data — all the texts, tables and graphs in your first wireframes should be relevant. You can modify them later, but cannot change entirely their type or structure. If you plan some images you don’t need to choose them now, but define what they are supposed to show.

At this point, you should think of reusable elements, for example when creating a header consider if it should be the same in every use case, or should there be several versions of it.

give early feedback — when someone is creating the wireframes for you it is crucial to talk with them and discuss their work as often as possible. Thanks to early feedback every mistake can be fixed quickly. Such immediate changes won’t impact other parts of the job.

Create full designs or high fidelity prototypes — if you want your app to have a custom design it is a moment to hire a professional designer who, based on your wireframes, can create a visual version of your product. If you want to use some predefined UI library (like ant-design or material-UI) there is no need to create full designs. You may just colour and prettify your wireframes a bit. Anyway, it is a good moment to select the pictures, icons, colours, fonts and other styling features.

At the end of this whole process, you should have a well-specified mission and a prototype with graphic specification and well-defined functions — there shouldn’t be any button left without explanation. Now it’s time for the project manager to plan the tasks and milestones for the whole project. Then your team should draw the projects and database structures, and yes — they can finally start the development.

I know it all can sound a bit complicated, and as you probably noticed it requires several people to help you with the whole process. You might think now: ‘Where will I find the UX designer, UI designer and everyone else?’. No worries. Companies like Teacode provide you with end-to-end support with planning, development and maintenance of the project, so just share your idea with us, and then you can drink tea and relax and we will take care of everything.