A complete guide through a Design Process - an inside look

Designing is not just about being creative, it’s about solving problems and finding solutions, it’s about catering the needs of your clients who would be the beneficiaries of the product you are working on. This is how the whole process flows in our agency.

1. Research

When a client comes to us with a need for UX/UI service, this is how we start. We have a client onboarding process which we use to conclude as precisely as possible which type of a project we’re dealing with in order for us to determine the scope of the project and avoid any possible misunderstanding that might arise.

Once we know the project type, we can move on to the next step which becomes a bit technical at this point. The aim is to collect information about the project itself: their target audience, the project objective, the creative side of the project and other important variables which might affect the budget and the timeframe. Sure we have a process for this - this stuff makes our lives so much easier! It usually comes in the form of a document which, if filled out properly, contains all the necessary information for us to kickstart the project.

2. Technical Requirements

In the early stage of the development you need to make a decision about the technical requirements of your product. There are different requirements when the product in question is a native iOS app or an Android app, or maybe a website. You need to know if the user interface should support and respond to screen rotation, whether the product will be used primarily on mobile or desktop devices and if it should load extremely fast or this is not relevant, whether it should take into account specific marketing ad formats and accessibility feature or not, any specific CMS necessary or not and whether it needs a specific plugin or JS library.

These are just some of the things that need to be thought through before continuing to the next step.

3. UX Design

With all the information on hand, we are ready move on. At this point in the process, we should pay special attention to the user flow or user journey, if you prefer. If you look at the design as simply a creative process, it won’t get you very far.

What we need to know about this is that the design process distinguishes different aspects meaning the look, the feel and the functioning from that the user needs to accomplish. In order to avoid getting a dazzling but pointless website/user interface we always design with the user’s needs and frustrations in mind, which means we focus on what the user needs to do and try to work out the most effective way for this to be done. User flow is, to put it simply, a user’s mini journey, a path through a user interface which does not have to be linear but it can branch out as well. Our task is to optimize this path, this journey and make it as enjoyable and as efficient as possible.

Our process can now enter different stages: it can either be a lo fi UX design phase or hi fi UX design phase and it largely depends on the complexity of the project and the client themself which type of fidelity is required. Wireframes, mockups and prototypes all can belong to the lo fi fidelity deliverables. However, only mockups and prototypes can be considered as hi fi deliverables.

Wireframes

We can start by creating wireframes - which can be viewed as very simple drawings of what the product will look like or a layout which allows you to focus on where to put what element without concerning yourself with the colors or the typography. This stage is closely connected with the user flow and, in that case, we talk about wireflows - wireframes with the information regarding navigation paths through the interface which allows us to explore the UX aspect in detail. No matter how what name we use we still need them to “fit” the elements into a layout and capture the client’s requirements properly.

Mockups

When determining the flow and the structure of the product, we start with putting some soul to it and we concentrate on producing high fidelity mockups which are visual displays of what your product will look like, we style it a bit, add some color and use a proper typography. This is the stage which will complete the picture you have of your product and allow you to make changes you deem necessary.

Prototypes

Along with mockups come prototypes. In order for you to have a clearer picture and understand the differences between these things, I’ll try to put it like this: wireframes explore the structure, mockups are all about the visual aspect and prototypes are used to tie various screens and states together into a smooth flow of user actions, and UI’s reactions. This means that a prototype can be seen as a mockup but with interaction. This is the phase in which you can interact with your product for the first time and explore what things you like and don’t like about it. The major role of a prototype is that it helps you solve any problems that might arise before it comes to coding.

It’s important to point out that you can start either with a lo fi mockups or lo fi prototypes and continue with the hi fi deliverables, as it’s much easier to take a lo fi element and turn it into a hi fi deliverable without to much hassle and the results are fabulous.

3. UI Development

Once the design phase is done, the project enters the next phase which we call UI development. When we talk about this we basically mean everything that is concerned with the static code on the client-side. We might as well call it front end development, but we don’t want to have it mixed with part of the development which requires programming. For this we use technologies and tools such as HTML/Pug, CSS/LESS/SCSS or JavaScript/jQuery and they all run in the browser. However, these days front end has become so complex and got closer to back end that the line between the two is getting blurrier by the day, and since we’re not doing any actual programming and we’re not talking to a database this is another reason we simply call this phase the UI development phase.

4. Content Management System Integration

Considering that your project requires a website, and in case you would like to change the text or the images / information on your website on your own and without messing around with code and servers, you definitely need a content management system or as it’s widely known as its abbreviation — a CMS. It’s a program that runs on a web server which allows you to update your website without the help of a web developer. Sure there are abundance of these systems you can choose from but our team prefers to work with either WordPress or Grav.

WordPress is the most popular CMS these days and it’s a very powerful tool which accounts for around 22% of the websites in the world (this information may not be that accurate however, I’ve read it online and I believe the figure to be precise enough to reflect the magnitude of its usage). It requires a database but it can be applied to almost anything: an online shop, a forum, a blog, a gaming portal, a business website, you name it. It is really easy to use for the end-users (owners) and its simplicity can be compared to that one of Microsoft Word or any other word processor. If you know how to use Word, you’ll be able to use WordPress. And on top of all, you have a growing community and you can get support with any issue that might arise.

Sure there are drawbacks, like potential security issues. Being an open source platform, WP is prone to hacking, but it’s constantly being updated which means that the majority of problems are taken care of really quickly.

On the other hand, you have Grav, a flat-file CMS, which means that there’s no database here at all, but all the content of your interface is stored in files which means that pages load very fast, but updating the website is really easy as well as it has a web-based editing interface, similar to the one found in WordPress. It gets even easier if you use free git services such as GitHub or BitBucket to host the whole site and when or if something is wrong you can just go back to the previous version or replace the whole website with your files in your backup. And voila! The job’s done.

Drawbacks. Yes, you can expect to find some as nothing is perfect. Grav may not be suitable for more complex sites and if you run into a problem you will have to wait for a couple of days to get your question answered as the community is not so developed and not there yet.

Having said that, I would like to emphasize how important it is for you to understand what your product is about and what your goal is before you decide on the CMS. For this reason, consult with a designer/agency you’re working with so that they could offer you the best solution for you and your product.

5. User Testing

Last but not least, testing. Once we’ve done with everything but before the product goes live, the testing procedure needs to be done. We want to make sure that the interface functions properly on different devices and in different browsers without any problems. When everything is thoroughly checked, we hand off the project to our clients. Sometimes things end up here or sometimes we go into the next phase which is maintenance.

6. Maintenance

Not all the clients want us to maintain the interface for them. Some of them want to be in control and update their interface all by themselves, whereas others are willing to hand off the product maintenance to a professional as they want to invest their time in focusing on something else. Whatever the choice is, maintenance of the product is crucial if you want things to function properly without causing you pain. If you decide to go for the first option, then you have a very good CMS, WordPress for example, and you can add and edit or modify the content and the pages the way you want to. In case you are not so interested or have enough tasks on your hands, you can always hire a designer/ agency to help you out. They have some maintenance packages that just might suit your needs.

However, we are a very flexible design team and we completely understand when the client doesn’t have everything prepared or doesn’t even know where to begin when it comes to putting things together. That is why we can help them out with copywriting, getting photos or videos for the site, giving them advice on the best ways of how they can regulate the payment process for their products, etc. Nothing should be left out!

And here our story comes to an end.

This is the process we follow but just a slight reminder that this is the flow in ideal situations which is not always the case. I don’t want you to get confused, we do follow these steps, just it’s a little bit harder than described as there’s a lot of moving back and forth in giving and receiving feedback and necessary information. But we manage it somehow. It’s much easier if you have already worked with the client and then there are no surprises, just a smooth ride.

However, when the client's new it takes some time to adjust to each other and after that… it’s a breeze!

So, guys, if there are more things that I left out and are still not that clear, hit us up. We love chatting and can be great buddies if you can handle an honest opinion and a beer or two. So, feel free to swipe us right. We're worth it! Cheers!

Get in Touch.

Next up