Development of Metakey Main Website

Serving as the primary point of interaction for all Metakey customers, the Metakey Main Website was designed to be not just an introduction to the company, but a captivating and engaging destination in itself.

Acknowledging the vital importance of aesthetics in user experience, a visually stunning website was a top priority. But beyond mere beauty, the website had to offer dynamic interaction to create a more engaging and immersive user experience. Additionally, given its role as a repository for comprehensive company information, it needed to serve as a credible and reliable source of truth.

In my capacity as Lead Developer, I chose to design an expansive landing page, segmented into multiple sections, each shining a light on the various facets of the business. This meticulously crafted digital landscape served to both inform visitors and provide them with an enriched, interactive experience, reflecting the innovation and creativity at the heart of Metakey.

In order to construct a visually compelling and responsive website, I leveraged the power of Next.js, Typescript, and SCSS for the front-end development. This combination of technologies ensured an agile development process, enabling swift modifications to meet evolving requirements.

For hosting, I opted for a custom EC2 instance from AWS, with an NGINX configuration. This advanced server architecture facilitated server-side rendering, ensuring an ultra-fast loading experience for all users, regardless of their geographical location or device.

To further enhance load speeds and optimize the display of media and images, I utilized the Image CDN, Cloudinary. This decision allowed for efficient media handling and reduced the load on the main server, contributing to a swift and seamless user experience.

The crowning glory of this website lies in the inclusion of an innovative scrolling feature — a rotating key that moves in sync with the user’s scroll down the page.

The successful implementation of this feature was critical, given the key’s significance as a primary product offered by Metakey. This design choice underscores our commitment to interactivity and reflects the core ethos of the product in the site’s functionality.

The design journey of the Metakey main website began in the virtual space of Figma, where we first conceptualized and structured the key segments of our message to the customers. Our UI/UX designer was at the helm, managing all facets of the design process — from color palettes and background selection, to subtle website effects that enhance the overall visual experience.

Subsequently, our design team collaborated with the art department to generate necessary assets — including 3D models, background images, and more. This synergy between teams allowed us to harmoniously blend technical functionality with aesthetic appeal.

As the leader of the development team, my role was to bridge the gap between our design aspirations and the realities of budget and time constraints. Our mission was to ensure that, while remaining within the project boundaries, we could still deliver an impactful user experience that leaves a lasting impression.

Designing and developing such a long website with numerous visual effects proved challenging when I haven’t implemented some of those effects before.

My first significant hurdle was integrating the key rotation effect that follows the user’s scroll down the page — an effect I had never worked with before.

To tackle this, I turned to Apple’s website, a shining example of this interactive scroll effect. Studying their implementation offered critical insights, enabling me to recreate a similar effect successfully on our website.

The website, with its vast assortment of media assets — including image sequences, 3D models, videos, and high-quality images — faced a significant speed issue upon completion of the development phase. The load speed was, quite frankly, unacceptable.

In response to this, I initiated a comprehensive optimization strategy. The first order of business was to move all media assets into a production Content Delivery Network (CDN). This solution allowed us to leverage the network’s widespread servers for faster and more efficient media retrieval.

Furthermore, I honed in on enhancing the performance of our backend servers. I upgraded the AWS EC2 servers to a higher specification and duplicated the servers to effectively handle increased traffic, significantly improving site speed and overall performance.