I served as both the lead WordPress Developer/Designer and Project Lead, balancing technical execution with end-to-end project oversight. The project was delivered under my former employer within the web development department, where I collaborated with other departments to deliver this project from strategy and visual design through to full implementation and launch.

Project Overview

Quick answers
about the project and how it was built.
What was my Role in the Project ?

The design team provided the initial design mockups, which the client agreed on and was later applied and implemented in Elementor to build the website.

Over the course of three revision cycles, my colleague and I met with the client in their office to review the website pages in detail. During these sessions, we made certain adjustments in real time based on immediate feedback, while other requested changes were documented and implemented afterwards during development. This approach ensured clear communication, faster alignment with client expectations, and an organized revision process between on-site discussions and online updates.

When the design team created the initial Figma mockups, the client was generally happy with the overall direction, with only a few minor revisions requested during the design phase. After the designs were implemented on the website, the client was satisfied with most of the layout and components but requested changes to certain product images and typography, which became more of a content and branding refinement process.
 

The client did not have a specific font preference in mind, so I took the initiative to curate and present three different typography options for review. This helped guide the decision-making process and ensured the final selection aligned with the brand’s visual direction and overall user experience.

1. Setting Global Properties

I start by setting the global properties in Elementor based on the brand guidelines and design assets provided by the client, including fonts, colours, spacing, and overall styling preferences. This helps establish consistency throughout the website before development begins.

2. Building Page Structure

Once the global settings are in place, I begin building the page structure section by section using the provided mockups as a reference. During this stage, I focus on layout accuracy, spacing, responsiveness, and maintaining the overall visual hierarchy of the design. As the pages are being developed, I also continuously test different breakpoints to ensure responsiveness is accurate across desktop, tablet, and mobile devices before presenting the website to the client for the first revision round.

3. Testing Breakpoints

As the pages are being developed, I also continuously test different breakpoints to ensure responsiveness is accurate across desktop, tablet, and mobile devices before presenting the website to the client for the first revision round.

4. Revisions & Feedback

Revisions and feedback are then implemented through an iterative process, ensuring all requested updates are carefully applied while maintaining consistency with the overall design before the website is finalized for launch.

From
discovery to Launch

A structured overview
of project management.

01

Discovery
& Initial Meeting

Understand project goals and client requirements.

02

Requirements
& Planning

Define structure, features, and project scope.

03

Design
Implementation

Apply mockups and build layouts in Elementor.

04

Development & Build

 

Develop full website and add functionality.

05

Client Review & Revisions

Gather feedback through Teams and apply revisions.

06

Testing & Launch

Test, fix issues, and prepare for launch.