1.0 Client Goals & Establishing Design System

After receiving and discussing the initial wireframes for the website, the client requested creative interactions on the homepage. I suggested and integrated MatterJS to design 2D rigid body graphics, balancing creativity with technical feasibility. Additionally, I created a design system to ensure a consistent and hierarchical, developer-friendly design.

2.1 Developing Frontend with Next.js

After establishing the design system, I implemented the frontend using Next.js and Tailwind CSS. To follow DRY coding practices, I focused on building reusable components and utility functions. After finishing UI development, I ensured smooth integration with Sanity CMS by fetching data via its API. I also utilized the useContext hook to manage and access global data efficiently across the application.

2.2 Integrating Sanity CMS

I connected Sanity as the CMS to allow the client to update the content of each page in the future. I structured and organised the schema and queries according to the requirements; filtering content by type, adding arrays to the image set, and defining visibility based on order or the presence of array elements.

3.0 Refining Design & Optimizing SEO

During the refinement process, I identified that some elements required extra clicks and steps, which disrupted user engagement. After several rounds of testing, we noticed that users weren’t taking the actions the client intended to highlight. To improve this, I implemented a subtle CTA animation to draw attention to key elements and redesigned the carousel feature on the Work detail page by adding auto-slide functionality and adjusting button placement to make it more intuitive and engaging.

Also, I optimized the site for SEO by applying best practices—such as semantic HTML, image optimization, meta tags, and structured data—to improve search visibility and performance.