WEBSITE DESIGN PROJECT · THREE LIVE REFERENCES

Website design: three websites, three visitor journeys.

Website design works best when its structure follows the visitor’s task. A shopping site needs a clear route into its catalogue; a professional portfolio needs service clarity and a route to contact; a guide website needs topic discovery and a readable explanation.

This project uses MRL Bazaar, motiurbd.com and Motiur Auto Guide at mitaur.com to explain those choices. It connects three live website examples with a practical WordPress design workflow.

By Md. Mitaur Rahman · 4 October 2026
Focus: WordPress website design, content structure and visitor journeys.

PROJECT COLLECTION

Three websites in this showcase.

01 · RETAIL WEBSITE

MRL Bazaar

mrlbazaar.com
Product categories, catalogue sections and shopping navigation.

02 · SERVICE PORTFOLIO

Mitaur.BD

motiurbd.com
Services, project examples, a working process and a contact route.

03 · EDITORIAL WEBSITE

Motiur Auto Guide

mitaur.com
Automotive buying guides organised around specific reader needs.

Visitor routes: product discovery at MRL Bazaar; service exploration and enquiry at motiurbd.com; topic discovery and research at mitaur.com.

Start with the visitor's next task

A useful website brief begins with a person and a task. A shopper may want to find a suitable product. A business owner may want to understand a service and contact the provider. A reader may want to compare equipment before spending money. The page structure should help that person answer the next important question.

That task affects the navigation, the order of sections and the information placed beside a button. A retail page needs recognisable categories and useful product details. A service page needs a clear offer, scope and route to enquiry. An editorial page needs an organised explanation and a way to check its sources.

For a new project, write down the audience, their main task and the evidence they need before acting. Then name the pages required to support that route. This gives design work a practical direction before colours, photographs or decorative details are selected.

MRL Bazaar: design for product discovery

MRL Bazaar presents a retail storefront for gadgets, fashion and everyday products in Bangladesh. Its homepage includes category sections, selected products, shopping navigation and customer-service information. The visible structure brings browsing and product discovery into the centre of the page.

The design lesson is to help shoppers narrow a broad catalogue. Category names should describe what people will find. Product cards need a consistent image, name and route to further information. A visitor should be able to recognise the difference between a category, a product and general store information.

For a retail handover, record the category destinations, approved product details, customer-review attribution and complete purchase checks alongside the design notes. This showcase documents the published homepage structure; order-flow validation belongs in the functional review.

motiurbd.com: design for a service enquiry

motiurbd.com introduces WordPress website design and SEO services. The homepage connects the main offer with service descriptions, project examples, a working process, an introduction and contact options. Separate service pages give visitors a place to explore the relevant scope.

A service website needs to answer a sequence of questions: what help is available, who provides it, what the work includes and how to start. A clear introduction can lead into the most relevant service, followed by examples and the next action. The enquiry route should remain easy to find as the visitor reads.

Evidence also needs a clear label. The portfolio includes demonstrations and a documented SEO audit project. Each serves a different purpose when a visitor assesses the work. The portfolio provides the detail, and the website design service explains how a new project can be scoped.

mitaur.com: design for an informed reading session

Motiur Auto Guide at mitaur.com organises automotive buying guidance into topics such as dash cams, tire inflators, jump starters, car vacuums, electronics and tools. Its homepage includes topic routes, a buying checklist, research-method information and answers to reader questions.

The editorial design lesson is to connect a reader’s problem with the relevant guide. Topic labels help the reader select a useful starting point. Once inside an article, clear sections and readable paragraphs should make comparisons easier to follow. Relevant links can lead to the next explanation or supporting reference.

Source information has a visible role in this structure. The site explains its research approach and credits illustrative material. A content website benefits from putting the method and ownership of evidence where readers can assess it while they read.

What changes between these website types

The three websites share the need for a clear introduction, organised navigation and useful content. Their priorities differ because visitors arrive with different tasks. A shopping catalogue needs product discovery near the centre of the experience. A professional portfolio needs service clarity and an enquiry route. A guide website needs topic discovery and a comfortable reading experience.

Calls to action should follow those priorities. A product or category link belongs beside the information that makes its destination useful. A service enquiry belongs after enough context to understand the offer. A guide link should identify the subject it opens. Specific labels help visitors decide where to go.

The same principle applies to page length. A category overview may need a compact introduction and a useful grid. A detailed service explanation may need scope, responsibilities and examples. A buying guide may need longer sections and supporting references. Each page should contain the information required for its particular decision.

A practical WordPress website design workflow

1. Write the brief around real information

Record the audience, business purpose, main visitor task and required pages. Identify who supplies approved copy, photographs, product details and contact information. Include the existing website URL, a useful target date and any features that need separate investigation.

2. Plan the pages and navigation

Build a small page map before arranging the homepage. Give each important page a purpose and a place in the visitor route. Check where someone will enter, what they need to understand and which destination follows. Related content should have meaningful links between it.

3. Prepare the content before final styling

Use realistic headings, approved descriptions and the actual length of important text. Long service names, product titles and contact details can change the layout. Identify temporary material so it can be replaced during review. Evidence, testimonials and product information need a clear source.

4. Establish a consistent visual system

Choose a limited set of colours, a heading style and a readable body font. Define spacing, button styles and image treatment. Repeat these choices across the page types so visitors can recognise navigation and actions. Apply the same system to future pages to keep the website coherent.

5. Build sections that remain editable

Organise the WordPress and Elementor layout into clear sections with headings, text, images and buttons that the owner can update. Reuse the header and footer where appropriate. During handover, show where a service description, image or link can be changed and which shared elements affect several pages.

6. Review the visitor route and important features

Open the actual public URLs and follow a realistic route through the website. Inspect destinations, navigation and the contact path. Record feature checks separately: forms, notifications, search, filters or checkout may need their own testing and authorised test data. Repeat affected checks after a correction.

7. Record the handover

Keep the agreed page list, completed checks, editing locations and outstanding items in one place. Assign responsibility for hosting, domains, updates and premium tools. A clear handover helps the owner maintain the website and gives later improvements a dependable starting point.

Mobile layouts should follow the content

A mobile layout needs to preserve the visitor’s route while the available space changes. Multiple cards can become a single column, long headings can wrap and supporting images can scale with the page. Important labels and actions still need to be readable and easy to use.

Review realistic content on a narrow screen. Look for cramped cards, text hidden behind controls, awkward heading wraps and images that force sideways scrolling. Check the menu and the next important action on the main page types. A suitable adjustment should solve the content problem at that width.

MDN’s responsive design guide explains how flexible layouts, media and typography support different screens. Use those principles to review the layout as a working experience across devices.

Connect website design with content and SEO

Page structure gives people a way to understand the content and move between related subjects. Start with a descriptive page title, a clear main heading and sections that explain the page’s purpose. Use relevant links with labels that describe their destinations.

Place informative images near the content they illustrate and provide useful alternative text when an image communicates meaning. Review the public URL, page description and intended indexing status as part of the page record. These checks belong alongside navigation and content review.

Google’s SEO Starter Guide covers helpful content, descriptive links, titles and images. For a focused service, the on-page SEO page explains how important URLs can be reviewed. Website design and search work should use an agreed scope and evidence appropriate to the task.

A project handover checklist

A handover should show what was delivered and what was checked. Use a short record that another person can follow. Include the affected page or feature, the result, any required action and the person responsible.

  • Content: approved business details, page copy, photographs and evidence.
  • Navigation: working destinations and a clear route to the main task.
  • Mobile layout: readable headings, usable controls and images that fit.
  • Features: the recorded checks for forms, search, catalogue tools or checkout.
  • Page details: titles, descriptions, related links and intended indexing.
  • Ownership: editing locations, maintenance responsibilities and renewal information.

For a broader launch record, use the practical website launch checklist. The checklist should follow the actual website and the agreed deliverables.

How to use this project showcase

These three live website references show how retail, professional services and editorial content can lead to different design priorities. Use the project to discuss your own audience, required pages and visitor route. The useful starting point is a concrete brief built around accurate information.

Project scope: public homepage structure, content organisation and design lessons, reviewed on 4 October 2026. Functional checks and business outcomes require their own records. A design showcase provides a clear example of the page structure being discussed.

If you want to plan a WordPress website, share what the business does, the people it serves and the action visitors should take. Those details help establish the pages, content responsibilities and review steps for the work.

PLAN YOUR WEBSITE

Start with a clear website brief.

Send your website link, audience and the main action visitors should take. We can define the required pages, design work and review process around that brief.

Join the discussion

Questions or feedback about this article? Join the discussion below. Comments are reviewed before publication.