Article

Deepak Bisht
Deepak Bisht 26 October 2016

7 Phases of Web Design Process

Every business needs a good website in the digital age. So, we decided to standardize the web design process into 7 phases which will enable you to deliver projects efficiently as well as effectively.

Before you dive into the article, I would like to tell you that if you are the video-types then you can also view this 7 phase process on Youtube

Here we begin:

  • 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-Website-Designing-Project.jpg

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 in 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. The 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 for 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 include 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?
  • The 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-1024x636.jpg

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 heat map study help in drawing meaningful information. This study helps in knowing what works on the website and what does not!

Niswey-Homepage-Analytics-1024x544.jpg

 

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 the 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-1024x576-(1).png

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-1024x341.jpg

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 for 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. The 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. The 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.jpg

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!

The article was originally published on Niswey's Blog.

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Life of a Twitter Influencer [Infographic]

Life of a Twitter Influencer [Infographic]

The following infographic Illustrates the life of a Twitter Influencer and includes everything from earnings, cheatsheets and social movements started on Twitter. While Twitter may not be the most popular social channel it is still one of the most powerful channels to spark online conversation. If you're a Twitter influencer, this infographic is the ultimate guideline to your future tweets.

Chiara Di Rago
Chiara Di Rago 30 November 2016
Read more
50 Chrome Extensions That Will Boost Your Productivity

50 Chrome Extensions That Will Boost Your Productivity

Today you can find Google Chrome extensions for almost anything that you can think about. In the sea of available extensions, it can be a hustle to choose which one are the best for your type of the business.

Aleksej Durdevic
Aleksej Durdevic 29 November 2016
Read more
Digital Marketing - The Wave of the Future

Digital Marketing - The Wave of the Future

With social media platforms like Facebook holding well over 1.6 billion users world-wide (and counting), these digital platforms have become the new marketplace. In order to properly promote business brands and products or services, an online company needs to employ the services of a specialist known as a digital marketer.

Mohammad Farooq
Mohammad Farooq 29 November 2016
Read more