Case Study: Edinburgh Extensions

01. The Overview

Edinburgh Extensions is a reputable family business with over 30 years of experience in the home extension and renovation industry. Seeking to establish a strong online presence in a competitive local market, they required a high-performance portfolio site to showcase their craftsmanship and attract new clients.

• Role: Lead Developer, Designer, and Content Writer.
• Tech Stack: Gatsby 5, React 18, GraphQL, and Adobe Photoshop for branding.
• Timeline: 3-month project spanning wireframing, design, development, and launch.

---

02. The Challenge

The primary goal was to distinguish a traditional family business in a crowded digital landscape. The client required a visually engaging platform that was easy to navigate while maintaining the integrity of their established branding.

The Professional Pivot: As the sole content writer and designer, I conducted in-depth interviews to translate 30 years of expertise into a digital narrative. This project taught me that the best way to organise a project is to starts with content; a major lesson learned was that project delivery depends heavily on having client materials (images, logos) ready at the start.

---

03. Research & Planning

Before writing any code, I performed a competitive landscape analysis of the home renovation industry in Edinburgh.

• Client Interviews: Conducted to align the website’s messaging with the client’s unique selling points.
• Prototyping: The process began with wireframes and sketches to conceptualise the content hierarchy and layout before moving into high-fidelity design.
• Design Tools: Utilised Adobe Photoshop for graphic design and creating branding elements that felt modern yet grounded in the company’s history.

---

04. Technical Implementation

Performance & SEO Strategy

I chose Gatsby.js to ensure a high-performing and responsive user experience.

• Keyword Research: Used Google Keyword Planner to identify search terms potential clients were using, such as “home extensions” and “conversions”.
• Custom SEO Hook: Integrated a bespoke SEO hook within the Gatsby app to enhance search engine visibility and match local search queries.
• The Image Pipeline: leveraged Gatsby’s Sharp pipeline to process high-resolution photos of completed builds into lightweight formats, ensuring fast load times.

Mobile-First Development

With a significant portion of local searches occurring on mobile devices, I employed a mobile-first approach.

• Responsive Design: Rigorous testing ensured a seamless experience across all devices and browsers.
• Deployment: The site was deployed via Netlify, providing the client with a reliable, efficient hosting solution with minimal overhead.

---

05. Results & Lessons Learned

Post-launch, the website effectively showcased Edinburgh Extensions’ services, leading to a measurable increase in user engagement and direct lead inquiries.

Key Outcomes:

• End-to-End Delivery: Successfully managed every aspect of the project, from initial research and branding to deployment and quality assurance.
• Strategic Growth: The site successfully distinguished the client from competitors by highlighting their 30-year legacy through professional imagery and informative content.

Future Reflection: This project reinforced the significance of thorough testing and the necessity of collaboration. Most importantly, it proved that for a local business, SEO and mobile-friendliness are not optional—they are the primary drivers of new business.