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.
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.
Step One of the UX Process:
Project starting – Let’s find some skeletons
The visible part of our UX design process starts when we first get in touch with a new client. In this early stage we try to get as much information as we can. We are eager to find all hidden skeletons (desires, barriers, deadlines, preferences, etc.) that could cause any inconveniences in case they pop up later. 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:
- Pre kick-off questions
In 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 their target audience, their competitors and existing design materials as well as the roles of the project members.
- Kick-off meeting
It is an approximately 4 hour long meeting where we go through some questions regarding further requirements of the customers, we start building hypothetical customer & user 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 a person?).
Make sure to read Bence’s article if you want to know more about our experience with kick-off workshops.
Kick-off in progress with the HBO team
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.
Step Two of the UX Process:
Preliminary research – Alpha, Omega and the Persona
As Ace Ventura says:
“If I’m not back in five minutes… just wait longer.”
So after we gather and organize the information we got… well, we dig deeper for some more. 🙂
In 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…
- Set up interviews with users of the target group to validate personas and complete the customer & user journeys
- Research the competitors, get information about features, advantages and disadvantages
- Design mood boards for the product
- Schedule the project tasks in detail (weekly plan for at least 2 months and milestones for the rest of the project)
You can download some resources, such as our persona and user journey templates here.
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!
Step Three of the UX Process:
Prototyping & Usability testing – Let the fun begin
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’s ready, as it is the most important thing that they know about the UX design process steps. Here are the details about this phase:
We 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 process and our way of thinking.
When 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 or POP. Otherwise, most of the time we use Axure or Invision to create low-fidelity wireframes and prototypes in order to be efficient and as quick as possible.
- User testing
We at UXstudio work with 1 week design sprints. 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.
- Creating a screen flow
In case one of the stakeholders (client, developers, etc.) need one, we create a screen flow to show all the connections between the screens.
We always start the third step of our UX design process with sketching
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.
Step Four of the UX Process:
Detailed design & A/B testing – Going in the right direction
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 the 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:
- Collecting best practices
We usually look for existing design examples (that can be an app from the store or a project on Dribble) and we collect so-called best practices. We usually use Pinterest dashboards.
- Look & Feel
Let’s jump to the look and feel. We usually design 1 screen in different versions. The first is a light one, the second is pretty dark and the third is something colorful. Differences can be in the colors, shapes, fonts, icons, light-dark elements, etc. We always ask the client what elements they like from the different versions. If a second round is necessary, we design some more variations with the selected elements. You can read more on this topic here.
- Detailed design
The 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.
- Creating specification
We 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 they can be used for showing great things to the clients, but it’s a very helpful asset for the developers as well. If you have an idea how an animation should look like you shouldn’t write it down. You should share it visually, as it’s much easier and quicker to understand for everyone.
- A/B testing
We usually use A/B testing to decide which version of the app is better and to get a higher conversion rate.
Detailed design for Taste’s iOS App
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.
Step Five of the UX Process:
Follow-up – Oh, I’ll always, I’ll always love you
We like it when the product goes in 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:
- If the development process is parallel with the design, it’s quite easy to follow what’s being built as we communicate with the client/the developers on a daily basis.
- But if the development process is after the design process, we usually have to schedule post design meetings where we look at the product being developed from a UX perspective. Our goal is to have a great product as a reference, not a product which could have been great, if…
Well, this is how we do it. This is our ideal UX process at this very moment, but we know that it won’t be the same when we try applying it to a real project. Of course it gives us the ability to plan things by and large, but it constantly changes based on the project. We also have to accept that there is no such thing as a perfect UX process, it always can and should be improved.
We know that we don’t know everything, but we’re continuously trying to improve our process. So if you feel like sharing your way, or you have any ideas/comments on this, please feel free to use the comments section.