Go Back 08.09.2018 - Insights

Our process of designing and delivering a fabulous website 2018

by Malak Mitch

Several people ask me how do you manage to operate a website design company in Egypt for the last 14 years? What is the best website design and development process for a web design agency to deliver a successful website? The short answer is, through practicing and many failures, and a lot of time in process optimization and trying new ways of project management.

Our web design agency is building different types of websites from corporate websites to brochure websites and web applications. We meet new clients every day, looking to close a deal with them and start the fun parts, however, it will never be fun without an innovative process plan that guarantees a smooth workflow.

Through the years we worked on a dynamic and flexible development process that helped us to deliver high-quality websites for our clients. This development process is essential for our team to ensure that we are running a profitable company. It helps us to raise our productivity rate and guarantee a better future. We always keen to iterate and optimize this process to achieve our best performance.

We divided our process into two main stages, the first stage is The Discovery Stage, where we really know things about the website we will build before we build it. Without it, we will fly blind in the execution stage, and that is not good.

The Execution Stage includes the design and development work needed to launch a successful website, this stage work on an Agile methodology called SCRUM. By the end of this stage, we will have a product is functioning well, and delivers the objectives we wanted and planned for in The Discovery Phase.

Stage One – Discovery

The first stage is the discovery stage, in this stage, we collect the client requirements trying to understand the objectives of building the website project. We work on understanding the visitors’ agenda are and what they want to achieve on this website, we also align with the business objectives, which are most of the time purchases, sign-ups, or generating leads.

We draft is a sitemap; it is considered a set of sections and pages of a website, for example, the about us page, our services pages, our portfolio page, contact us page, etc. We also build a project plan document, which includes all the features and the plugins we are going to use in our content management system. Also, we include the web-copy, branding assets, and user stories that generate conversions.

Stage Two- Execution

  1. Web Design
  2. Web Development
  3. Content Moderation

We start with the design, then we develop the web pages with CSS and Javascript, and use WordPress as a content management system.

1- Design

We outlined the design journey into two milestones; the first one is usually low-mockups (low fidelity designs), here we depend more on pencils and papers to draw quick sketches that define the user experience while she or he is visiting the website. We call this milestone “wireframing,” it helps us to explain the customer journey to our clients. We prefer to discuss the buying funnel that we want our users to follow, and the proper actions we want them to take until they reach to their destination on the site and convert into customers, with a fresh lead or purchase for our clients. During wireframing we care more about layout structure, usability, and user psychology; we define customer habits, we study digital marking concepts, and we set KPI’s. This milestone is essential for the rest of the project roadmap.

The second milestone we call it the user interface design, aka UI Design. In this milestone, we deliver high-end mockups where colors, shapes, typography, icons, and any aesthetics styling, in general, are involved. The final output is a trustworthy website design for a business who cares about its brand image in front of their customers. We craft a Pixel Perfect interface to adapt to different screen sizes of mobile phones, tablets, and desktops.

2 – Development

The developers started to work once the discovery phase is done, they already had the features we are going to implement on the website. The developer installs WordPress and configures all the plug-ins needed for the website like the SEO plugins, marketing and remarketing plugins, utility plugins, security, and backup plugins. They can do this easily after the wireframes got approved. They make the backend ready for the second step.

Once our design team releases the interface design after user testing and client’s feedback; now we are ready to code the pages into HTML, CSS, and JavaScript and linked with WordPress.

The developers’ job is to make the output crisp and Pixel Perfect like the interface mockups. They make sure the WordPress CMS is fully managing every page, and our client can edit content easily.

The development step takes up eight weeks to end up with something that is ready to be launched. Our full-stack developers’ way of thinking plus our SCRUM development methodology has several advantages; we will write more about this.Testing and debugging is usually common during the development process. Each development team has a tester who checks every component and feature carefully and reports any bugs or issues during the development. The number and complexity of reported issues depend on the nature of the project, in case of corporate and brochure websites, the issues are limited and familiar, while eCommerce platforms and web/mobile apps, the issues could be many and more complicated. The tester and the full-stack developers work side by side, with love, for eight or maybe twelve weeks, depending on the size of the project to fix any problem and to optimize the product performance. After that, we are ready to moderate the content and launch the website.

3- Content Moderation and Launching

On this stage, meet our heroes, the web administrator, and SEO specialist. The web administrator publishes the real content, edits the final web copies, uploads images, and embedded videos. The administrator makes sure everything appear in the right placement, and all the information is ready for the customers to achieve the call to actions.

The SEO specialist audits every single page to make sure that the website is a search engine friendly, meaning that there is high opportunity to appear on Google Search Results on the first page. He checks the focus keywords of the web-copy and makes sure that there is a search volume for this keyword and it’s easy for the website to compete on the first page. Our developers link the domain name.to the host server, installing the SSL security certificate, and make sure that the website speed is accepted enough on Google Speed Test.

Now at the end of the build process, your website is ready to launch, “Congratulations!” and you are ready to invite all friends and co-workers to visit your business online. Also, your digital marketing team is ready to advertise some landing pages and target your audience.

I hope, you enjoyed the journey of our website design and development work, we do this at our agency every week with our happy clients from Egypt and Worldwide.