The Steps Of Our UX Design Process

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 this post I will guide you through our design process. Here’s how we do it at UX studio.

Step One:
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. 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.

Screen Shot 2016-08-24 at 09.36.34 (2)

Kick-off in progress with the HBO team

Step Two:
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. 🙂
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)

Screen Shot 2016-08-24 at 09.36.43 (2)

You can download some resources, such as our persona and user journey templates here.

Step Three:
Prototyping & Usability testing – Let the fun begin

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.

  • Sketching
    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.
  • Prototyping
    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. Testing in many iterations is a must-have when it comes to prototypes. 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 recently wrote an ebook: “Product Managers’ guide to UX design”. Click here to download!

sketching

We always start the third step of our UX design process with sketching

Step Four:
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.

  • 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.
  • 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

Detailed design for Taste’s iOS App

Step Five:
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…

The steps of our UX design process

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.

In case you find this post interesting, you can follow us on Facebook and on Twitter.