Product Designer in App Development

Product Designer in App Development

According to Wikipedia and common logic, when it comes to definition of an occupation, designer is a person who designs. 

This article is going to tell a lot about our point of view on the job of a designer as a bearing wall of any project development and how we make it possible for Yalantis to reach the highest level in design and its implementation.

By the way if you still don’t know anything about our mobile apps design masterpieces, it’s high time to check our Dribbble page.

Read alsoHow to integrate Uber API

What we are

We are designers. But don’t you think it’s quite a broad notion? There is a user experience designer, a user interface designer, a web designer, an interaction designer, a graphic designer and I can go on forever.

Every designer in our team has a definite specialization they know better than anything else. Like Kostya is more of a web sort, Dima is a user interface creature, Toma is also mostly engaged in UI design, Dasha is an artist with academic education and I love to design wireframes.

With all those particular spheres of expertise, a designer’s role in our small mobile app development company is a Unicorn. Sorry, who?

A unicorn is a generalist. This means, designers drive the project, they influence every smallest detail when it comes to development, they produce the map both iOS and Android developers should follow and a customer should put his place markers on.

Designers are the look & feel of the product, our suggestions, and professional advice is a lighthouse for developers and a source of tech ideas as well.

Read alsoReal Estate App Development in the USA

Involvement in mobile app project development

The main component of not only designers’ work but also every specialist’s in the team is involvement. After all, we follow Agile principles in mobile app development process and are aiming at long-term collaboration with our clients.

No long-term collaboration is possible without being integrally involved in the common team’s vision and the ideas that our client puts into his project. I believe a designer should keep being involved in the project throughout the whole process of app development, not only at the designing stage.

Picking up the idea of involvement, we turn from a designer to a product designer. Now as we have found the right definition of our job, let’s figure out what responsibilities fall on the shoulders of a product designer.

Read also: Event apps development worldwide

Product Designer isn’t a job for a weakling

Any specialists tend to grow. If you don’t grow, you stop being a specialist. In our case, the direction of growth is defined by the internal strategy of the company. As long as we are a part of the mobile app development core, we have to interfere with all the processes related to the project development, influence them with our suggestions and ideas, encourage and support other team members infecting them with inspiration and energy.

This means designers have to know more than they are supposed to know. This does not only mean we have to combine lots of skills: graphic editor, basics of coding and doing research in modern design tendencies and user experience.

The main idea of a product designer is a wish and an ability to be committed to the product. It touches upon every member of a team and is rooted in the involvement. All that sounds right but how to actually achieve it?

1. No isolation is acceptable. Designer is a team member, not a separate specialist whose suggestions should be put into action without hesitation. It’s important to combine several sources of requirements, make conclusions and reach a design decision taking into consideration all the restrictions and the client’s wishes.

Truth be said: if you want to do something right do it yourself. But, unfortunately, we can’t build, test and deploy every single app element.

2. Intricate but worthwhile design solutions should be advocated. A designer ends up doing useless job not when a project manager or developers neglect and change his priceless design solution into something else against his will, but when he doesn’t try to influence this decision. You should struggle.

3. Commitment involves taking responsibility. Design can really solve mobile app business problems. This doesn’t only deal with beautiful user interface that attracts users but also with understanding of a business mindset.

Ask yourself whether you want to remain a Photoshop user or initiate processes, recommend solutions and suggest changes. So it’s not enough to say «it looks better this way». Designers need to make a case for why the team should spend time on do it over, do it better or don’t do that option there at all.

Product designer’s cutaway

If you are far from design, you might think that app design development process is broken down to shapes and pixels interaction. However, it’s not exactly true. The content of a product designer’s work comes down to understanding the product, the tools, and the practices. This insight makes us professional and enables to suggest meaningful ideas whereas simplifying communication with the client and the development team.

Preliminary research

To know better about a current project, a designer should really head for the market research from a designer’s port. This includes client interrogation on the matter of application, analysis of the similar apps already on the market, getting into heaps of reviews and featuring articles, doing research in publications on the subject of modern technology and tools that work for perfect user experience.

Informational architecture is much more than drawing app content

This is also called prototyping stage and includes things like mind maps and wireframes, alongside with deep penetration into content solutions and their reflection with the help of design tools. Information architecture is closer to engineering rather than drawing.

Mind map illustrates the structure of the app, its functionality and internal relations between the elements. By looking at this map, it’s easier to define the main functionality to be implemented first following the principles of Lean Development and MVP (check our article on why MVP is a good idea).

Here is what we call a mind map (this one is our app My Day):


When the basic requirements are identified, we get down to wireframing starting from sketches on paper > verbal vector wireframes with linked screens. They describe each screen’s set of features and use cases > dynamic wireframes to see the thing in action as if the app were already created > actual mock-ups, which are wireframes wearing design > finishing touch and design mission complete.

Some wireframes from Dmitry Prudnikov, our designer:


The content of each screen is thoroughly negotiated in the team, after which the prototypes get refined and enhanced within the scope of the product. As designers, we are held responsible for the overall quality of the user experience. So whether we want it or not, we need to hold the link between the development team and the customer design directed.

Dynamic prototypes + Animation

Prototyping is a way to communicate with the app before the coding phase starts. Dynamic prototypes make wireframes alive and give a great possibility to feel and touch.

design prototypes

Here you go with some tools for creating app prototypes without any need of coding.

Animation has gained relevance. With Apple’s launch of iOS7 that set a course for flat design and animation, it is too important to ignore. See our article on animation in UI creation.

Interaction design. Microinteractions

Interaction of the user with the application is so much fundamentally important that deserves a separate article, like the one we wrote on user engagement, make sure you have gone through. Interaction design is often abbreviated as IxD.

Your users will always judge your product. Absolutely beautiful user interface matters less than easy and intuitive. The items in an IxD checklist are affordance, feedback, simplicity, structure, consistency, tolerance and accessibility. You can view the detailed list to evaluate your work here. Sometimes a designer should sacrifice his nonstandard art solutions in favor of user experience made impeccable. For that reason, every single detail in design is substantial. Microinteraction is what is meant by ultimately important and near-invisible.

«The details are not the details. They make the design.» Charles Eames

NOTE: Positive emotional states come from design details designed right. Also this is what makes products easier to use and appealing. There’s a whole book on this topic: Emotional Design by Don Norman.

microinteractions in product design

Microinteractions have one main task and a single use case. They are built around and inside features. You may not even notice them but if these little moments are ignored, your product is never going to be a great one.

Microinteractions are everywhere: when you are changing modes, adjusting a setting, receiving a message, typing in your password or other information, creating some piece of content. Microinteractions help you interact with the app and make your experience better, more fun and engaging. You can check out some examples of Microinteractions here.

Not only size is important in Microinteractions but their form as well. Beautiful has always been an indisputable requirement to design.


There are four parts in microinteractions:

  • Trigger initiates a microinteraction
  • Rules determine what happens
  • Feedback lets people know what’s happening
  • Loops and Modes determine the meta-rules of the micro interaction

To learn how to design Microinteractions well, check Dan Saffer’s book «Microinteractions».

Always test 

If you don’t have a specialist, there are always people in the corridor

Testing is hard not to mention. There are whole deparments of QA specialists employed with a company. We do have them as well and believe me, they will do their best to find flaws in designers’ hard labour. However, sometimes it’s even more fun to do a 5 min testing. It’s a good way to check some parts of a ready design or wireframes directly on users.

All you need to do is go out to the hallway and make a random guy push the buttons annoying him with definite questions to answer, like: how do you think you can change this setting or how would you access somebody’s profile?

This easy and entertaining exercise helps you define drawbacks and shows the way to intuitive and correct.

Visual design and accuracy in typography

Icons and other user interface details should be clear, accurate and invoke positive emotions. Pay attention to information hierarchy and content structure. Organize it clearly and simply. At the same time your work has to be typographically proficient.

First rate typography checklist includes three categories: typographic typos, spacing & alignment, detailed refinements.

To ensure your typosetting is both professional and appealing, do the check in the typographic checklist by Ilene Strizver .

Hey! Testing again

Suffice it to say, the more testing you do before deploy the less mistakes and unexpected user reaction on the product remain.

Improve user experience and strive for perfection

UX is not only the interface for a user to interact with but general impressions from the application. Here you go with the list of our daily work load.

UX design

Even if we pass all the checklists and achieve the best quality in our work, design has to be creative and unique. This has a lot to do with introduction of cool ideas into the project. Designers are well-known for their perfectionism and attention to detail.

I bet stuff like missing the spacing between a dot and a new sentence drives you crazy. I would recommend to read this wonderful article by Braden Kowitz, which gives a perfect explanation of «Why you should move that button 3px to the left».

Level of trust of your potential customers and interface design are directly proportional. Trust is something that matters for any business and design is one of the prerequisites of this product-customer relationship. Here is a bit of academic reading on the topic of interface design and trust.

Self education is important for every member of the development team

Technology is in the process of constant growth and development. That’s why self-education is highly important for any product designer and not only this guy. We need to constantly educate ourselves by taking online courses, reading useful article and research, listening to podcasts, even taking a look at adjacent to design spheres. As for our design team, we have a great designer book shelf with useful literature.

Have fun with podcasts:

...And online courses:

Dissatisfaction as a valuable feeling in app development process

Not a nice feeling, but something that might be called an engine of progress. Dissatisfaction makes your look for new and better and what is even more important — apply acquired knowledge.

Tools and practises that you start using do good for both, the whole team of designers (as we like to share our experience within our design team at the designer seminars) and the development team, as it works like chain reaction and encourages professional growth.

Sharing results runs for skills refinement

We like to share results of our work, not only because we are boastful and conceited, by also because we are open for grounded criticism and essential feedback.

And my final words: get out of the vacuum and move forward. Be designers that derives from the word Design. Care about your job and do it well for pride and share.

See also: Cost to design an app

Designer's tools

We constantly experiment with different prototyping tools, and write reviews on them so other designers can pick out the best tool

How Can You Use Flinto to Create Cool Interactive Prototypes?
Written by Ilya Prukko

How Can You Use Flinto to Create Cool Interactive Prototypes?

We’ve already shared our impressions from using Pixate and Principle for prototyping animations, so now...

Our First Look at the Floid Prototyping Tool
Written by Ilya Prukko

Our First Look at the Floid Prototyping Tool

As a designer, I’m really happy to see more and more interaction design solutions come out. This makes ...

12 Hints on How to Use Principle Like a Pro
Written by Anton Kosolapov and Rustam Tagiev

12 Hints on How to Use Principle Like a Pro

Yalantis tips and tricks for designers who use Principle prototyping tool in their work

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces
Written by Dmitriy Goncharov

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces

In my previous article I talked about using Pixate for prototyping the second version of Koloda Tinder-...

A few words about UX

Some basics on UX design

8 UX Design Techniques
Written by Dmitry Prudnikov

8 UX Design Techniques

If you think that digital design is that shaded part delineated by the Photoshop frame, I am afraid you...

UX Design Techniques Graphically
Written by Kate Abrosimova

UX Design Techniques Graphically

Remember we were talking about how the great UX design is made? The one that involves a number of UX te...

How to Create App Design That Works
Written by Sergii Ganushchak

How to Create App Design That Works

There are many approaches to creating an app design that “works.” But since we like making things simple, we will talk about four basic steps in the process of UX design

How to Adapt Your App's UI and UX to Another Platform
Written by Kate Abrosimova and Sergii Ganushchak

How to Adapt Your App's UI and UX to Another Platform

There are 3 different scenarios for UI multiplatform adaptation that we are analyzing by looking at the most popular apps: Wire, Instagram, SoundCloud, AirBnb, Facebook, and more.

How to Create UX That Makes Money
Written by Dmitry Prudnikov

How to Create UX That Makes Money

What is the most important thing you pay attention to when design user interfaces or hire someone to do...