Have a design process early

A design process will help you massively

Starting out in design years ago I didn’t really have a defined design process. I would start a project the same way every time but then would go off in random directions to finish it. This didn’t mean the end result was bad. But it did mean it could take longer to finish a job or to find a better solution.

Over the years I had a loose routine for projects that helped my workflow and so on but nothing nailed down. As I studied more and worked with better and more experienced designers, I started to see patterns.

As I delved deeper I refined my own design process to a point where I now use it without even thinking. I now know, that if I complete all the steps in order, the results will be good.

If I’d locked down my process earlier, I could have improved a lot faster and been more valuable as a designer. I also feel like I would have been able to have made more conscious and informed design decisions. But hey, you live and learn.

What is a design process?

A design process is a step by step way of completing your project. By implementing a process into your designs you will have a complete path to follow. This will help you to focus on each stage of the job and know exactly what to do and in what order to do it.

 

Why bother with a design process?

Working like this will help you to have repeatable results every time. Instead of being scattered and not having a structured way of working, you will be confident every step of the way. Being organised like this helps to speed up workflows, make better design decisions, and creates a map for success. It also helps to estimate deadlines and project documentation.

All the main industry leaders like Google, Apple, and Air bnb use their own process when working. This is because it’s a proven technique.

My process is based on design thinking and helps you have a holistic view of the whole project.

clear-path (1)

“ "You make it a lot easier for yourself and others on your journey if you know where you're going!"”

- Me

My design process

There are two main parts to my process and each has a set of steps to follow. Depending on the project I may leave out the first part and jump right into the design phase (part2), this is if the steps from part one have already been completed for me.

My process uses a human-centred approach. By using the design thinking process and my own visual design process all mixed together, I get a full overview  from all perspectives  of what is required for the job.

A quick overview:

Holistic thinking:

This is where you look at the business objectives, the product goals, and the vision. You think about the users’ goals and needs and find out what tech limitations you might have. By finding all this out you will have covered all areas and will have a birds-eye view of the project.

Design thinking:

This is an industry-standard way of thinking developed in the 60s and made popular by the tech giants more recently. Believe it or not, design thinking can work in all industries and even areas of life to help come up with innovative solutions to many problems

The basic steps here are:

  • Discover (empathise)
  • Define
  • Ideate
  • Prototype
  • test

 

My visual design process

This sits in the ideation and prototype phase of design thinking and is a mix of branding, UI/UX, and visual design.

Over the years, I have found that by using my process I have a complete step-by-step route that gets me to my end goal perfectly(ish) every time. You wouldn’t climb a mountain without a map (or sat nav).

Ok, so now my full design process. Take this and use it or pick the bits you like and create your own!

Part one: Human centred approach

First thing I will do when starting my design process is get a holistic view of the problems, resources and goals of all parties

Business goals

Here I will sit down with the clients or stakeholders and find out exactly what the goal of this project is. This can be as easy as just finding out why they want a new website. But you have to drill down and find out the real reason they want it.

For example: maybe the client has a coffee shop and wants a new responsive website. When asked why they want this new site they might say “because the old one looks a bit dated and we want a refresh”.

But, is that the real reason? Probably not, so you need to ask why again and make them think about it more carefully.

Why?
Because all our competition have nice websites.

But why?
Because we want to be able to let people order online in advance before collecting.

Why one more time
Because we want to increase the amount of online sales as none of our competition has this functionality and we want to speed up the service time per customer.

That is the true reason for having a new website: to increase online sales and to have an advantage over the local competition.

Now that we have an idea of the main business goals we can start to make informed decisions and plans of action. 

 
Product goals

We can carry this on and find out a bit more about the style and any other functionality needs and go onto the next step.

I will now find out the key success metric for this job i.e. a list of key targets that if met the client/stakeholders would then class this project as a success.

For this job the obvious key success points would look like:

  • more online sales
  • more in-store footfall
  • possibly a greater social media presence

Now that I have these key success metrics I have solid targets to aim for. This takes your work from being subjective to objective. It is no longer a case of “can you make the logo bigger?” or “change the colour”, it is now “have we got more online sales or customers in the shop?”. Not opinion-driven design but data-driven design.

You have become someone who creates value to the client rather than just being an expense that creates pretty designs.

From here I will research the competition and look for products that have similar features.

Discovery/Empathy (UX)

So now it’s time to do some user research. Here you want to find out the users’ pain points, what they want from an app like yours, what they don’t want, what similar product they might use and so on. Basically the users’ needs and goals. This can be done in the form of questionnaires online or in person and user groups.

Define

Now with all the data collected, I will start creating user personas and user journeys. From these I can interpret the main pain points and find out all the main user goals and needs. I will review these with the client/stakeholder and come up with a list of functionality and solutions to meet the goals and needs.

Next I will talk with the developers to see if this functionality is possible and if there are any problems and fixes we can come up with. 

Now it’s time to come up with an MVP (minimum viable product) with clients/stakeholders and get cracking on the designs.

Part two: Ideate (now the fun starts)

Here is where I will start to come up with basic thumbnails and wireframes.

Lots and lots of them.

By using the answers I got from the business goals and users’ goals I can make informed design decisions to create my mock-ups.

Trying to rethink the established design patterns but not break the wheel is a good way to attempt to improve things. Also trying to challenge yourself on every project will help you to improve as a designer. This could be as simple as just using a new grid system or type-scale that you have never used before.

By spending time here I can work out all the UX issues and solve any problems I find on paper quickly. Jumping straight on the computer can waste a lot of time. If you find UX issues 6 hours in and now have to start from scratch.

I will choose the solutions I think work best and turn them into low-fidelity wireframe in Sketch. Then I will present these to the clients and stakeholders for review. Having devs involved at this point can be a good idea before we go too far in to the design phase.

Once any changes have been implemented I will create some mid fidelity wireframes and present these.

If everyone is happy and it is time to start the UI and visual design phase.

Prototype

Here is where I use my design process to create my final designs.

I have my wireframes to hand, I will now create a grid system that I think will work well usually a 12-column gird and using a scale for sizing and proportions.

Next, I will choose which fonts will convey the feel of the project. Also I will define a type-scale and put all  this in my Sketch document for reference. I try to keep contrast in mind here for visual interest.

Colour is next. I will decide on  a base colour for the site. This might already be defined if the client has an existing brand but if not I will think about what hues reflect the mood of the brand and create a palette and system to implement it.

I work my way through the design implementing my scales and palettes, adding relevant images and finalising the UI.

Paying attention to the details is important. By just adding subtle strokes or slight animations you can make the difference between good and great.

I will also be creating the screen stacks if needed.

I have a final checklist I will go through regarding composition, typography, and file structure. I make sure that all the images are sharp, that there are no blurry half pixel elements and that all scales have been adhered to. This will make the design look professional and pleasant for everyone to use. Once I am happy with everything I will present this to all involved and make any final fixes.

Once built we can move on to the final phase.

Testing

Here we will test the product on our users and collect any feedback and comments/issues that come up. This is a super important part of the design process because once we find any new issues we didn’t expect, we can go back to ideation and fix these and then repeat the prototype and test phases. This loop can jump about a bit but by doing this your design/product will be as useful and functional to the user as possible.

Now that the product/site is final and up and running, it’s time to sit back for a bit and see how the key metrics come back. Then, rinse and repeat again.

Recapping the design process

Human centered approach

Here you find out the business goals, product vision, and key success metrics. This is also where you do competitor research.

Design thinking

Here you will use UX techniques to find out users’ goals, needs, and pain points plus any other research that will help.

Define

Using the data collected you will now define the user’s problems using a range of UX techniques. You will also define your MVP and talk with developers about the functionality.

Ideate

Here you will come up with lots of ideas and basic wireframes. A lot of iterations and collaborations will happen in this phase.

Prototype

Now the main visual design and UI are sorted: this is, of course, my favourite part of the whole thing.

Testing

The rubber meets the road now. Testing of your shiny new product on your users to find any problems and come up with any improvements.

Checking key success metrics

Hopefully, you have hit all your key success metrics and can go off into the sunset as the hero! 

Wrapping up

I hope you have found this post useful. Please feel free to use this process or in any case I strongly suggest going off and creating your own.

If your interested in becoming the best designer you can be then why not join the Digital UI/UX design bootcamp? Sign up now

Stay up to date

Get the weekly news letter

Subscribe today and get the design dissection sketch template and future discounts for digital and UI/UX bootcamp. We promise never to spam anyone