Expanding the web design process

Posted by on Jul 1, 2017 in Design, Tips | No Comments

All web designers know that unlike painters we can’t just create whatever our creative instinct tells us. Web design requires a little more strategy. We achieve this by following a standard web design process:

  1. Understanding the brief
  2. Research
  3. Wireframing
  4. Design
  5. Development
  6. Refine

Every place I have studied design has always outlined this process. However, after getting experience in the industry for several years I have found that this process can be a bit vague. This post is not to show a different design process but expand/add and provide tips on it based on my experience. Hopefully, it can help studying or new designers.

The web design process:

Understanding the brief:

As much as you would like to think that design step is the most important step of the web design process, your wrong. Your understanding of the first step determines how the project will be handled as it goes through the design process. Ultimately the outcome here will decide if you will provide an outstanding final product that meets your client’s needs or have wasted your and their time.

The key things to remember in this step are:

Talk first:

Before providing your client a brief has a quick conversation with them regarding their project. This will help you determine your client’s personality, their level of expectation, and their thoughts on the project. Often this talks will help you find any areas your client may be confused about or expectations that may not match the brief you receive from them.

Provide the right brief:

I know it is easy to download ‘creative website brief templates’ they’re everywhere. It is important your creative brief asks the questions you need to, to do your job. I am not saying don’t download by all means use the link above to get you started. However, don’t just stick with the template you download if you need more questions add more, remove some if needed and using your first conversation with the client customise it to areas you feel may need to be clarified.

Read and identify the objective:

Yea it’s obvious, but trust me often especially in the beginning you tend to miss it. Brief statements like. ex: “I want a new web design that elegant, simple, white, full of images………” and the very end “… to help us get more customers.” In your clients mind having a pretty website automatically gets you more customers. Your actual objective here is “increase conversion”.

Ask questions:

Often if you were like me before, you hate asking questions after receiving a brief. As if asking too many questions will determine your skill level. Well no, ask the questions you need to ask in order to have a final product that your client will be happy with. If you are worried regarding a customer’s impression of you just make sure that they know why you are asking each question for and why it is important.

Research

This stage of the web design process was probably what I found to have more to it than what I was told during my studies. Here is my break down depending on the objective of your design.

Objective: Creative Design

This is the research process that we all know and what is commonly taught in colleges. This involves using the category of the design subject and information provided by the client on the brief. Using this information you would look at trending, competition and similar category website.

Objective: Re-Design/Improvement

Similar to the above process with a few differences. As designers we must use the information provided by the client plus adding the following necessary research:

  • Past Data Research: Use knowledge or data that the client may have on what currently works well on their website. It will also be useful if they can provide you with any data that they may have on design variations they may have tried before.
  • Competition Research: You can start this process by checking out the website of your top 10 competitors for features that could be used on your starting concepts. Focus on features that are common between them.

Objective: Conversion Optimisation

This is a slower research process because you need to conduct experiments and collect data on different areas of the website i.e conversion, heatmap, click map, etc. You can use the following tools to help you with this research process:

  • Optimizely: Use this to conduct A/B tests.
  • Hotjar: Use this to collect clicks and heat map on your web page.
  • Google Analytics: Use this to gather audience demographics find patterns on how your users navigate around your site.

Once you have enough data gathered (I think 4 weeks worth would be good depending on your traffic), you can use this information during the design section of the web design process.

Wireframing

Now it’s time to get started on actually creating something. Using the research information you have gathered start creating wireframe sketches on different layouts of your design. Remember not to be detailed just boxes and notes will be fine keep it low fidelity. When laying out your elements in your wireframe try to refer to the data you have and make sure there is a reason why you have placed that element there.

There are several ways to do wireframes but personally, I prefer pen and paper. Not saying you can’t use a software if you are comfortable with that. However, based on my experience there are advantages using pen and paper:

  • Faster to sketch down ideas.
  • Easier to have a team collaborative brainstorm session.
  • Easier to compare specific elements of wireframe ideas.
  • Personally, it’s easier to not get too attached to an idea.

Design

Now that you have your wireframe and research information. Time to start the computer and the easy part of the web design process, creating something that not only looks good but works. Let’s be honest no matter how well you think a design will perform if the client doesn’t like the way it looks, it’s not going to get approved.

Use the brief information they provided which should contain colour preferences and their ideal website design. Make sure to try several design variations based on your wireframe sketch. Mix colour palettes around, provide different looks for certain elements, etc. Then it’s up to you how you want to present these designs to your client.

When providing designs to your client there are two ways to do it.

Provide one design that you believe is the best option out of all the design concepts you have created. You then let them pick and choose what they want to modify until you come up with a design that they really want. Advantages to this are.

  • Reduce customer stress by providing them only one option
  • You reduce time spent working on a design that will not be used at all.
  • Provide the client with a design that you absolutely happy with and will love to continue working on.

Or alternatively, you can…

Provide several draft concepts that provide different style options for the client to choose from. Variations from each design would be most probably between fonts, colour combination, icon style, images sizes, etc.  Advantages of this are:

  • Getting several designs makes the client feel like they are getting more.
  • A client can get help visualising possible options.
  • Could reduce the number of revisions you have to make.

Development

Not a big part of this section of the web design process as front-end and back-end development is not something I enjoy. However, I can give you a few tips regarding development:

  • It is always important especially if you are a freelancer to research the difficulty of the development of features a client is requesting for. First research if you can do it yourself, if not see if there are already made plugins.
  • Keep your code clean and as simple as possible. Do not overcomplicate things ex: CSS hierarchy, file set-up, etc.
  • Follow best practices, this will stop other people that may work on it the future encountering issues.
  • Add comments on anything you believe may need explanation.
  • Lastly, if you are not the best developer find a person that is good at it. There is nothing better than working with someone that knows what they are doing.

Refine

Most design projects end at the launch, dust your hands and onto the next one. Today if you are part of a team in a company, the initial launch is just the first phase.

It is now time to refine the design to make sure it works at the very best it can. You have to revisit/visit the research process again to gather data on potential problems or areas that can be improved on the design. From there you need to work your way down the web design process to the refine section and then repeat. Haha, it never ends…

When refining, implement possible solutions by running split-test experiments and adding them to your launched design if successful. What is important in this section of the web design process is to “Test Fast, Fail Fast, Learn Fast”.

Test your solution as fast as possible, do not invest too much time in making future decisions on something that has not been proven a success yet. Just get your idea tested, if it’s successful then great if not, trash it, learn and move on.

In Conclusion

The web design process is definitely a proven method to follow that is why we all use it. But it is up to the designer how they choose to expand on this foundation process based on their experience in the field. I am not saying my expansion/tips above is the good or right way to do, it’s just the process I use right now. If you have a different method or something you think is wrong with my tips above let me know will be happy to learn.