Case Study

Unearthed.land – Next.js Conversion, Figma Designs & Microsoft 365 Migration

"We engaged Bunker Digital to assist with the redevelopment of our website. Despite unexpected challenges with GoDaddy and Microsoft, they went above and beyond to ensure a smooth transition, often working late into the night to minimise any impact on our business. We highly recommend Bunker Digital and look forward to continuing our collaboration in the future."

Key Takeaways / Results

Converted Adobe XD designs into a dynamic Next.js website
Expanded desktop-only designs into comprehensive Figma prototypes
Implemented MDX for flexible content management of insights pages
Successfully migrated Microsoft 365 from GoDaddy to direct Microsoft integration
Established a long-term management plan to ensure swift content updates
Enhanced website performance, branding and user experience

From Outdated to Outstanding: The Challenge

Unearthed.land’s previous website was a source of frustration. The buggy and slow WordPress site no longer did justice to their high-calibre consultancy services. With an ambition to elevate their digital brand, they had invested in fresh designs using Adobe XD. However, these designs were only suited for desktop, leaving a gap in the overall user experience across devices.

Our first task was to bridge this gap. We decided to transition from Adobe XD to Figma, a tool we prefer for its flexibility and collaborative features. This allowed us to expand on the existing designs, ensuring that the final product would be responsive and visually consistent across all devices.

Converting Designs to a Next.js Website

With the new designs in Figma in place, our next step was to convert these static designs into a fully functioning website using Next.js. This modern framework provided us with the performance and scalability required for Unearthed.land’s evolving digital needs. A particular challenge was the insights section of the website. The unique formatting—featuring tables with multiple heading columns and rows, and indented lists—demanded a flexible solution for ongoing content management.

To resolve this, we adopted MDX files. MDX allowed us to blend standard Markdown with custom React components, giving us the flexibility to recreate the bespoke layouts originally designed in XD. This approach has not only streamlined the content management process but also ensured that every insights page could be updated easily in the future.

const components = {
  MarkdownBlock,
  DataTable,
  List,
};

export default async function Page() {
  const { content: compiledContent } = await compileMDX({
    source: content,
    components,
  });
  const insights = await getInsights();

  return (
    <MDXContent
      article={article}
      content={compiledContent}
      insights={insights}
    />
  );
}

- Using MDX component to render "DataTable"

Tackling the Microsoft 365 Migration

An unexpected complexity emerged with the migration of their Microsoft 365 implementation. Previously, Unearthed.land had used Microsoft 365 products via the GoDaddy reseller option. However, this solution lacked certain functionalities, such as a full calendar display on the Amazon Echo Show. The owner’s decision to move directly to Microsoft for a more robust experience turned out to be more challenging than anticipated.

We coordinated the migration carefully, ensuring that all functionalities were restored and enhanced post-migration. This seamless transition not only resolved the immediate issues but also provided Unearthed.land with improved tools and capabilities for their day-to-day operations.

Long-Term Management and Future-Proofing

Recognising the importance of keeping the site current, Unearthed.land opted for a long-term management deal with us. This arrangement is designed to expedite the process of adding new content—be it blogs, projects, or insights—ensuring that the website remains dynamic and aligned with the brand’s evolving message. Our management plan includes regular updates, performance monitoring, and prompt responses to any emerging issues.