![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/rawpixel-com-296613-1-720x480-1-720x480.jpg\"){kind=tracking}
<\/p>\n<\/p>\n
What is it that everybody does in the UX industry, but does it differently? Probably one of correct answers is the UX design process. In our field, it is not a surprising thing if there are differences in the ways we build up our UX processes – everyone can have their own methods. However, it is good to have a great guide about a well-tried UX design process which you can rely on. In this post\u00a0I will guide you through our design process.\u00a0Here\u2019s how we do it at UX studio.<\/strong><\/p>\n Starting a design project can be tough. Some might have a loose plan in their minds that they consider to be a good one, but in the next moment they might realize that everything would have been much easier and probably less chaotic if they followed a clear path. Having an established UX design process can save you time, energy, money and can also save you from a bad headache.<\/p>\n The question now of course can come up: how we do it then? Well, at UX studio we have our methods, and they work well, so we decided to share it with you in this blogpost.<\/p>\n The visible part of our UX design process starts when we first get in touch with a new client. In this early stage\u00a0we try to get as much information as we can. We are eager to find all\u00a0hidden skeletons (desires, barriers, deadlines, preferences, etc.) that could cause any inconveniences in case\u00a0they pop up\u00a0later. It is important to look for these skeletons in the very beginning of the UX design process so we can find solutions for them, too. In order to be the best detectives we do these things:<\/p>\n Find out more about our experience and process of\u00a0kick-off<\/a> workshops.<\/p>\n Kick-off in progress\u00a0with the HBO team<\/em><\/p>\n So after the kick-off we have many things in our minds to digest, but these few hours are just the beginning of the UX process. To have a deeper understanding of all the topics that comes up in the first step – and even more topics -, we have to learn everything about what we are facing. This is when step two comes in the picture.<\/p>\n As Ace Ventura says:<\/p>\n “If I’m not back in five minutes… just wait longer.”<\/p><\/blockquote>\n So after we gather and organize the information we got… well, we dig deeper for some more. \ud83d\ude42 You can download some resources, such as our\u00a0persona and user journey templates\u00a0here<\/a>.<\/em><\/p>\n It is our best interest to have these tasks in our UX design process, so we can continue our work with a very strong knowledge base. To give all the ideas we have a really visual and tangible form, now we start our fun part: the prototyping and usability testing phase!<\/p>\n Our UX process wouldn’t be the same without the good old teamwork of a designer and a researcher – usually the team consist of them, but some projects require more designers or maybe more researchers. First the designer creates the sketches and the prototype form it, which the researcher tests. We always show everything to the client the moment it\u2019s ready, as it\u00a0is the\u00a0most important thing that they know about\u00a0the UX design process steps. Here are the details about this phase:<\/p>\n We always start the third step of our UX design process with sketching<\/em><\/p>\n <\/p>\n It is essential to have the product well-tested with many iterations. We like to have its user experience designed as perfectly as possible and start creating the detailed design for it only afterwards. This is the way in our UX design process we can make sure that the product will be pleasing for the brain and the eye, too.<\/p>\n So on one side we have our mood boards that we showed to the client who gave feedback and hopefully now we have an idea about what style the application should have. On\u00a0the other side we have a cool prototype which gives us most of the screens including arrangement, functionality, etc. Now we can step into our UX process’s next phase when we create the nice looks! Here you can read how it works:<\/p>\n Detailed design for\u00a0Taste’s\u00a0iOS App<\/em><\/p>\n If you think that our UX design process ends here, I have to admit that we still have a step which is a nice-to-have, but we consider it necessary so to be sure that the product we worked on is developing well.<\/p>\n We like it when\u00a0the product goes\u00a0in the right direction. We want to be sure that the application is implemented the way we designed it for a great user experience. There are two possibilities:<\/p>\nStep One of the UX Process:
\nProject starting – Let’s find some skeletons<\/h2>\n\n
\nIn the interest of being able to properly prepare for the kick-off meeting we send the client a few general questions. These questions are in connection with\u00a0their target audience, their competitors and existing design materials as well as the\u00a0roles of the project members.<\/li>\n
\nIt is an approximately 4 hour long meeting where we go through some questions regarding further requirements\u00a0of the\u00a0customers, we start building hypothetical customer &\u00a0user journeys and create hypothetical personas (who are the users and what do they need). We also hold a so-called “Style and brand persona workshop” (what would your brand\/product look like if it were\u00a0a person?).<\/li>\n<\/ul>\n![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-08-24-at-09.36.34-2-720x405-720x405.png\")
<\/p>\nStep Two\u00a0<\/b><\/span>of the UX Process:
\nPreliminary research – Alpha,\u00a0Omega and the Persona<\/a><\/b><\/span><\/h2>\n
\nIn the UX design process it is the time when we collect as much information as we can, to get the knowledge that we could not get during the kick-off. We usually do a 7 day long preliminary research where we…<\/p>\n\n
![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-08-24-at-09.36.43-2-720x405-720x405.png\")
<\/p>\nStep Three\u00a0<\/b><\/span>of the UX Process:
\nPrototyping & Usability testing – Let the fun begin<\/b><\/span><\/h2>\n\n
\nWe always start with sketching. It is the easiest way of visualizing our ideas. We usually force ourselves to create three different versions for solving a particular problem. It makes us think so we won’t get lazy. We always show everything to the client. Always. Even the sketches, because it helps the client understand the evolution of the\u00a0process and our way of thinking.<\/li>\n
\nWhen we have a few good ideas and know how the main structure of the application will look like we start building a wireframe and the prototype. If we’re in a hurry and the product is a simpler one, sometimes we draw the wireframe or just use the sketches, take photos of them, and use one of the prototyping on paper apps such as Marvel<\/a> or POP<\/a>. Otherwise, most of the time we use Axure<\/a> or Invision<\/a>\u00a0to create low-fidelity wireframes and prototypes in order to be efficient and as quick as possible.<\/li>\n
\nWe at UXstudio work with 1 week design sprints<\/a>. Usually we have a client meeting in the beginning of the week, where we show all the main results of the tests. After this we can agree on the modifications of the design, that will be tested in the second part of the week. Testing in many iterations is a must-have when it comes to prototypes. That is why the iteration phase takes at least a few weeks. We always validate our ideas based on tests with real users. During the UX design process it’s very important to understand that the product is for the users and not vice versa. Read our ultimate guide about user testing.<\/a><\/li>\n
\nIn case one of the stakeholders (client, developers, etc.) need one,\u00a0we create a screen flow to show all the connections between the screens.<\/li>\n<\/ul>\n![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-08-24-at-09.36.49-2-720x405-720x405.png\")
<\/p>\nStep Four\u00a0<\/b><\/span>of the UX Process:
\nDetailed design & A\/B testing – Going in the right direction<\/b><\/span><\/h2>\n\n
\nWe usually look for existing design examples (that can be an app from the store or a project on Dribble)\u00a0and we collect so-called best practices. We usually use Pinterest dashboards.<\/a><\/li>\n
\nLet’s jump to the look and feel.\u00a0We usually design 1 screen in different versions. The first is<\/span>\u00a0a light one, the second is pretty dark and the third is something colorful.\u00a0<\/span>Differences can be in the colors, shapes, fonts, icons, light-dark elements, etc.\u00a0<\/span>We always\u00a0ask the client what elements they\u00a0like from the different\u00a0versions.\u00a0<\/span>If a second round is necessary, we design some more variations with\u00a0the selected elements. You can read more on this topic here<\/a>.<\/li>\n
\nThe next step of our UX design process is when we design all the pixel perfect screens in Photoshop or Sketch. However we like to learn new tools, so the design softwares each of us uses can be quite diverse.<\/li>\n
\nWe always create some sort of specification for the developers. A UI kit is always a must-have. We usually create animations for the interactions as\u00a0they\u00a0can be used for showing great things to the clients, but it\u2019s a very helpful asset for\u00a0the developers as well. If you have an idea how an animation should look like\u00a0you shouldn\u2019t write it down. You should share\u00a0it visually, as it\u2019s much easier and quicker to understand for everyone.<\/li>\n
\nWe usually use A\/B testing to decide which\u00a0version of the app is better and to get a higher conversion rate.<\/li>\n<\/ul>\n![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-08-24-at-10.45.04-2-720x405-720x405.png\")
<\/p>\nStep Five\u00a0<\/b><\/span>of the UX Process:
\nFollow-up –\u00a0<\/b><\/span>Oh, I’ll always, I’ll always love you<\/b><\/span><\/h2>\n
![\"ux](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-08-24-at-09.36.26-2-720x405-720x405.png\")
<\/p>\n