Boulder World PH
A business website aimed to provide information on the climbing gym.
Boulder World PH
A business website aimed to provide information on the climbing gym.
Project Overview
Client
Boulder World Philippines
Role
Full Stack Web Developer and SEO Analyst
Key Focus Area
- Web Development
- Design System Standardization
- Search Engine Optimization
Tools
WordPress, Elementor, Figma, JavaScript, YoastSEO, Google Analytics, Google Search Console, PageSpeed Insights
The Challenge
A primary challenge was building a WordPress website within the client’s budget. To optimize costs, I leveraged the free version of Elementor and various free plugins. This approach ensured that all design aspects were maintained without incurring additional subscription fees.
Other significant challenges related to the initial design:
- Poor User Experience: The design lacked clear user flow and overwhelming information on a single page, hindering navigation.
- Performance Issues: Excessive animations and elements slowed down the website’s loading speed.
- Website Responsiveness: The initial design lacked scalability plans dampening the accessibility of the website.
To address these issues, I provided constructive feedback, and the designer implemented necessary revisions.
My Approach
As a Full-Stack Web Developer, I played a crucial role in the development and launch of the Boulder World Philippines website. I carefully analyzed the client’s requirements to determine the optimal development approach. To ensure a user-friendly experience, I selected the Elementor page builder, known for its ease of use. To complement this plugin, I used the Hello Elementor theme in order to leverage the full capacity of Elementor without the constraints of predefined styles. This empowers the client to easily make graphic changes post-development through a familiar interface.
I meticulously configured the website’s design system within WordPress settings to ensure consistency. This included converting pixels to rem for most measurements, using em for line-height, and reserving percentages for padding in sections lacking a mobile and tablet view design.
Additionally, I utilized the Clamp Font Size Calculator to implement responsive font sizes, allowing text to automatically scale based on the screen size. This streamlined the process by eliminating the need for separate mobile and tablet definitions.
Finally, I contained the website to a maximum width of 1920px to prevent background images from appearing stretched or zoomed in on wide monitors. By effectively addressing these aspects, I contributed to the creation of a user-friendly and functional website that meets the needs of both beginner and experienced climbers.
Key Deliverables
Develop 10 Main Pages
I created multiple pages that function to guide users with specific information that they need and enhance user-experience. The pages are home, rates, about, programs, FAQ, contact us. privacy policy, terms and conditions. Additionally to enhance user experience, I also developed Error Pages for handling 404 errors and other website issues and Empty States as placeholder content for sections that may be empty.
Utilizing Cost Effective Software and Tools
I was able to develop the website using WordPress and other necessary technologies integrating any third-party plugins from WordPress such as Elementor (Free version), Yoast SEO, WPForms Lite, Smush, and WP Staging
On-Page Optimization
To improve the website’s visibility in search engine results, I implemented the following on-page optimization techniques:
- Meta Tags to carefully craft meta titles and meta descriptions accurately describing the content of each page
- Headings (H1, H2, H3, etc.) to organize content and signal its importance to search engines
- URL Structure to create search engine-friendly URLs that accurately reflect the content of each page.
By optimizing these on-page elements, I’ve improved the website’s overall search engine ranking and user experience.
Google Analytics and Search Console Setup
To gain valuable insights into website performance and user behavior, I set up Google Analytics and Google Search Console. This allows us to track key metrics such as website traffic, user engagement, and search engine rankings. By analyzing this data, we can make data-driven decisions to optimize the website’s performance and user experience.
Testing and Quality Assurance
I had tested the website for functionality, performance and compatibility multiple times over the course of the development to ensure it is running smoothly.
Results and Impact
I successfully developed the Boulder World Philippines website, fully implementing the provided design. By creating a robust design system, I ensured easy future maintenance and updates.
Key achievements include:
- Full Design Implementation: 100% adherence to the design specifications and integration of website’s device responsiveness.
- Enhanced User Experience: A user-friendly website optimized for ease of use and information gathering for its users.
- Seamless Form Integration: Implemented functional form submissions for inquiries and bookings.
- Established SEO: Incorporated SEO-optimized content and tags provided by the SEO specialist.
Despite budgetary limitations and only a GoDaddy domain with basic WordPress subscription, the Boulder World Philippines website was successfully developed and launched. The website has met its key performance indicators (KPIs) by demonstrating progressive increase in website traffic, improving search engine rankings, and garnering positive user experience. This website serves as a valuable digital resource for both beginner and experienced climbers, providing essential information about the facility and fostering engagement with the Boulder World community.