Role of a Product Designer in App Development Process
Parsing designer’s work + useful sources for designers
According to Wikipedia and common logic, when it comes to definition of an occupation, designer is a person who designs. However, this definition of a designer does not reveal all the volume of work that falls onto designers’ shoulders. A designer as a bearing wall of any project development and they make it possible for a product development company 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.
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 Bogdan loves 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, their suggestions and professional advice is a lighthouse for developers and a source of tech ideas as well.
Involvement into 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 app development 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 project development process, 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.
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 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 our job breaks 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 the 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 about 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.
Here you go with some tools for creating app prototypes without any need of coding.
Axure
Proto.io
Invision
Flinto
Marvel
Infragistics
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 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 microinteraction.
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.
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:
UX podcast
User Experience Podcast
The UIE podcast
Johnny Holland
The Big Web Show
TheUXIntern
Designing Yourself
…And online courses:
UXMastery
Iversity
Interaction Design Foundation
Coursera
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 result 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.
This article is based on the presentation of Bogdan Pryshedko, a designer at Yalantis.
The article is published to Yalantis blog.
