Website Design and Development Process - the Life-Cycle Steps

Here are the main ecommerce & corporate website development project stages we usually go through in our agency:

1. Client briefing
2. Information analysis
3. Preparing the statement of work
4. UX and UI design
5. Front-end development
6. Back-end development
7. Testing
8. Project delivery

Let’s take a look at how it works, on a real-life example.

 

1 THE BEGINNING. CLIENT BRIEFING

We had a client from Toronto reaching out to us with a task to develop a new website for a beauty salon.

What we first did was have a briefing with the client to sort out the details of the future website and the reasons why the old one wasn’t good enough anymore. According to the client, the main issue was the lack of mobile optimization.

Before redesign

The second major issue was the lack of any on-page SEO, which had already led to fewer clients and calls due to strong competition on the market.

After we go our hands on the original version of the website, it became evident that it had gotten really obsolete and couldn’t perform its main function – attract clients.

2 INFORMATION ANALYSIS

As soon as we had a “green light” from the management, the work started. The project manager requires a full website report from our usability specialist in order to have:

• a list of things that could be improved
• a list of suggestions to make the “European Beauty Toronto” website more effective

Here’s the list: 

PROBLEMS	SOLUTIONS
Not optimized for mobile devices	Responsive design
No leads coming from the website	Introduce forms with various calls-to-action: “Make an appointment”, “Consultation request”. Implement various promotional offers for site visitors.
Website loading speed is too slow from mobile devices	Check with Google Page Speed Insights to see how fast we can make the site load
No feedback channels	Create the communication channels via social media networks
User retention is low	Constant and regular content updates: services, promotions, blog posts, news feed, email marketing. Remarketing as an option.
New visitors don’t trust the website	Show the competitive advantages of the company – place various certificates, pictures of the salon, its equipment, and clients. Creating “Testimonials” section with an option to submit your own review.
Poor page layout making it very hard to find the right information. Low “pages per visit” indicator.	Building up a new and intuitive site menu structure. Fixed-position main menu while scrolling for easier navigation. Adding more explanatory content.
The website ranks low on search engine results page	Perform on-page SEO
The website has few visitors	Expanding the list of target search queries by posting articles in the blog.

Besides doing the obvious website analysis, we analyzed a bunch of major competitor websites in order to fish for some ideas and hints, which could help us with our main task.

Now, that all the information is in place, it’s time to move on to the next stage.

3 PREPARING THE STATEMENT OF WORK

For that stage, we needed to create layouts and mockups first. This is done to:

• make the development process go smoother
• come up with the easiest and most intuitive site navigation possible
• come up with the website structure to see what information each website page should contain

After this stage is over, we begin to write the statement of work with an in-depth description of every element, module, and their features. This is basically the amount of work to be done on the project.

After the statement of work is approved by the client, we launch the development process, starting from the graphic design. 

4 UX and UI Design

The design starts his or her work from the main page mockup.

Once all the mockups are done the visual structure is approved by the client, the designer comes up with the first version of the website design:

Back to our story – the client (the woman who owned the salon) was not ready for such a radical departure from the previous style.

We put back the corporate color (green) and the face of the company – the girl with the SKEYNDOR promo.

Still, it was not good enough for the client. Solution? Another version of design, while keeping the current structure. This time we’re after the atmosphere of comfort and relaxation.

The main page layout is approved now – we’ve finally managed to find an appropriate solution! We are proceeding with the rest of the pages. 

After they’re all ready and approved by the client, the designer passes them on to the next stage.

5 FRONT-END DEVELOPMENT

We used HTML5, CSS3, and JS while developing this website. Additional attention was paid how well the website looks in different browsers and devices.

The result is then passed on to the next stage.

6 BACK-END DEVELOPMENT

The back-end developer chooses the right CMS platform, which will be used for developing and upgrading the website functionality, depending on the project requirements. For this case, we chose the popular Word Press CMS. 

Here you can find the full list of all CMS platforms and technologies that we support.

7 TESTING

After the functionality is implemented and the website is hosted properly, we proceed with testing:

• the website appearance
• functionality
• admin panel

For us, testing is a form of quality assurance for the project before rolling it out. Testing allows us to rectify minor and major bugs and eliminate even the slightest possibility that something can go wrong.

PROJECT DELIVERY

After the testing is over with, we give the client the administrative access to the website. If there’s some learning needs to be done, we show the client how the admin panel works and how to run the website.

After redesign

AFTER THE PROJECT IS DELIVERED

For this project, we’ve done a few additional tasks:

• page load speed optimization as per Google Page Speed Insights (allows for faster website browsing and helps earn SEO points as websites that load faster have the advantage) 
• on-page SEO (with the right amount of tweaking, helps the website to rank higher on the search engine results page)
• analytics tools have been set up

CONCLUSION

Based on our experience, the process described above allows our clients to get the maximum result while always keeping track of what’s going on.

PROJECT TEAM