Unearthed.land: Next.js Rebuild, Figma Design System and M365 Migration

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}
    />
  );
}

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.

Read more about moving from GoDaddy 365 to direct Microsoft 365

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.

The Unearthed.land project is a prime example of how modern web development and thoughtful design can breathe new life into an outdated digital presence. By converting static designs into a cutting-edge Next.js website, expanding the design vision in Figma, and handling a complex Microsoft 365 migration, we delivered a solution that not only meets current needs but is also poised for future growth.