Mobile & Web App Development Process – Stage 3 – Designing UX & UI

You have already clarified the vision of your app. You have defined the overarching goal of your product, you know its final users and their needs, and you are aware which features of the app are the most crucial. Maybe you have even chosen a software house for your project.

So, what’s next?

Usually, that’s the moment when the team starts designing UX and UI of your app. Let’s start with an explanation, what do UX and UI mean. To put it simply:

Well designed UX and UI are very important from a business point of view. At the end of the day, they influence the retention rate. If your apps’ user experience will be enjoyable and flawless, and the design of the app will create a positive impression on its users, they will love it, and use it.

App design process

On the graphic above, you can see how the whole process of designing an app looks like.

Put simply, the first three phases – User Journey Map*, Wireframes and Clickable Prototype are stages of creating UX. The final stage in the Design Process is creating Visual Design – so User Interfaces and Motion Design.

UI Design is about creating enjoyable experiences for your product’s users. Motion Design means, in short,  creating animations & screen transitions.  

If you want to read more about the differences between UX and UI design, I recommend you to read this article, written by Harshita Arora.

*To create the User Journey Map, it’s worth to know your product’s users and define their Personas. We don’t put it on the above scheme, because we included creating Personas in the preparation phase. Of course, these elements are closely related.

User Journey Map (UX)

User Journey Map is a visualization of the user flow through your app. It tells the story of the user’s experience and puts the customer front and center in our thinking. At Droids On Roids, User Journey Map takes the form of the drawn schema on the wall, we wrote about it here.

Wireframes (UX)

Wireframes are digital, simplified visual concepts of the future app. They lay out the structure, hierarchy, and relationship between the elements that make up the product. It is a kind of app’s backbone.

Clickable Prototype (UX)

Clickable Prototype is a dynamic, interactive model of your app. It is created with the above-mentioned wireframes. It simulates a real-world product. You can give your partner valuable feedback so the team can shape the final designs exactly meeting your vision.

Visual Design (UI + Motion Design)

UI – designers create mockups which show how your app will look. It contains creating/choosing fonts, colors schemes, icons, shapes, buttons, screen elements sizes and proportions, illustrations and more. Motion Design means, as mentioned above, creating animations & screen transitions. 

Wrap up

Even if your app idea is great, but its interface and UX design will be of low quality, you won’t succeed.

Make sure that the UX and UI Design process run in a thoughtful way. Be engaged Product Owner in each stage of designing your product, so the team can shape the final designs according to your expectations. And last, but not least – remember to put your app’s users in the center of your thinking. Check out our free ebook on how to be a great Product Owner. We wish you an outstanding, beautiful app that your users will love!

Related posts