7 Phases of Web Design Process

  • What is the best time to get the web design reviewed by the client?
  • Am I following the best web design process?
  • We are going in too many design iterations, is there a way out?
  • This project has no end and it is a huge loss to me. What do I do?

Problems of Web Design Project

Agencies and freelancers often face similar roadblocks while working on  a web design project. A great web design process can help you tackle these worries with ease. At Niswey, we have standardized the web design process which helps us deliver better. I am writing this blog post to share the insights and help you evolve in your web design process.

On any web design project, we work in a team of two. One person sits on the driving seat, executing the design and other one plays the role of navigator. The duo discusses every small aspect of design. This makes the design holistic and well-thought-of.

We follow a 7 phase web design process to make sure that we adhere to deadlines and deliver a quality project. And these phases are:

Phase 1: Requirement Gathering

Understanding what a project will deliver is critical to its success. Team working on the project should gather all the relevant information. This helps in driving the project to a successful closure.

A Few questions which you should not forget to ask in any web design project are:

  • Is it a web design project or a website re-design project?
  • Who is the target user of the website?
  • Are Branding guidelines are ready?
  • What is the domain name? Where is the website hosted?
  • Content for the website is ready?
  • Does the project includes development as well?
  • What technology are you using for the website: Language, CMS and Database details etc.
  • Are there any existing issues on the website which you are aware of?
  • What is the goal of the (re)designing the website?
  • Number of pages to remain same as in existing website? Any desired architectural changes?
  • What are the credentials of website’s Google Analytics account?
  • Any need of payment gateway integration?
  • Any 3rd party API integration needed?
  • List of existing tools being used on the website.

There can be more such questions. Make sure you don’t miss out any!

Phase 2: Quoting the Client

The cost per hour you bill your client is your call. But there are a few aspects which you should not miss while quoting:

Quotation = (Effort you spend on studying the structure of the website and researching) + (Effort for data analytics ) + (Effort you spend on persona building exercise) + (Wireframing Effort) + (Time taken for design conceptualization) + (Designing effort) + (Coordination effort with cross functional teams) + (Effort you spend on review and approval meetings)

Phase 3: Persona Building

Hubspot Academy defines Personas as the fictional, generalized characters that encompass the various needs, goals, and observed behavior patterns among your real and potential customers. They help you understand your customers better.

Website Persona Building

There are various methods of defining a persona and we find “War-Room” the best way to get the desired result.

We share ‘Website Persona Questionnaire’ (download Questionnaire here) with all the stakeholders in the war-room meeting. The site owners are also requested to fill in the ‘Design, Content and Website Questions’ (download Questions here) keeping the persona in mind.

Phase 4: Data Analytics

Analysis of web data helps in understanding and optimizing the web design. Google Analytics and heatmap study helps in drawing meaningful information. This study helps in knowing what works on the website and what does not!

Niswey Homepage Analytics

Phase 5: Wireframing

Information gathered in the previous phases will give you a launchpad to kickoff wireframing. Below approach to wireframing will help you get quicker and quality results:

Step 1: Begin with wireframing of homepage and complete the menu structure first. Strive to get quick approvals on page layouts, menu structure, footer layout, placements of social icons, logo placement, sign ups forms placements and CTA elements.

Niswey Website Homepage Wireframe

Step 2: Work on the wireframe of one of the content heavy pages.

Step 3: Get the review on these wireframes and incorporate the changes.

Step 4: Finish all other wireframes and schedule a review meeting with stakeholders.

Phase 6: Web Design Conceptualization

How much time do you give to your design before starting the design? It is important, it is very important!

Design Conceptualization

Don’t jump into designing straight away after wireframes. Soak-in all the information and wireframes before you actually start designing the website. This gives a direction to your designs. This is what we do:

  1. Sit with the design team and work on Design Theme (sleek design/ bold etc). What kind of design appeal should the website carry.
  2. Work on the Elements of Design: icon sets, shapes, image filters, color palettes, fonts, look of social icons, gutters, margins, line spacing and transitions etc. We use wix.com (free version) to collate all these elements. Example: Elements of Design and Color Palette
  3. Run the design concept and the story behind it with the internal team and seek feedback. You should be able to answer the questions raised by them. If the team is not satisfied there is no point going to the client.
  4. Once done, share the design concept with the client (wix link in our case). The client needs to review and choose from the options given. We recommend that you share the story and the thought process behind each of your design concepts.

Phase 7: Designing (Finally)

And now you are all set to design!

We follow the approach below for designing:

Step 1: An ideal website should be content driven and hence it is important that the design and the content teams are on the same page. Meet the content team to understand the content calendar. Content calendar helps in planning your design calendar. Having a look at the content helps in visualizing the design. The content team also needs to have an idea of design so that they know their limitations.

Step 2: In every website there are pages that have a similar design structure but varying content. It is advised that the design team figure this out and inform the content team. Content team can thus plan to write the content of the pages with different design layouts first. This will provide constant content feeding to the design team and the work will not stop.

web design process

Step 3: Come up with a timeline for the design deliverable. Make sure that your content team knows exactly which pages are being delivered when.

Note: Include meeting time and time to incorporate design feedback while deciding the deliverable dates.

Step 4: Work on homepage design, one content heavy page and one media heavy page first.

Step 5: Have a design review meeting with the client

Step 6: Work on 3-4 pages in the next set

Step 7: And have a design review meeting with the client again.

Step 8: Close all pages remaining pages with standard designs formats in the last Set.

Step 9: Meet the client with the last design set.

Step 10: Send all pages together in the end with the feedback changes incorporated.

Step 11: Feed in all the real content in the pages and keep it ready for development.

The phases and approach of design may vary from project to project. But if you can standardize your web design process, it will help you deliver projects in right quality and time, much to the delight of the customer!

Checkout my video on how to work on your design process:

Please share your thoughts in the comments section below.

Leave a comment