Studio Hackspett · Case study by Alfons Melander
A modern website for my company that provides web services to businesses.
- Role
- UX Designer · Front-end Developer
- Timeline
- Feb 2026-Mar 2026
- Team
- 2 people
Problem & Goal
Building from scratch
This was not a redesign but a complete development from scratch. We had to research our target demographic, people who need help with their website or need a website of their own.
The goal was to create a brand website that felt modern, trustworthy and clear, while also being flexible enough to grow with the business.
Ideation
Exploring the design
FigmaWe experimented with various layouts and directions to find the right design for our users and business goals.
Visual Direction
Getting more refined..
Implementation
From design to code
HTMLCSSJavaScript
When we had all the Figma files for every page of the website we started to code. This project involved coding in basic HTML, CSS and JavaScript.
Framework migration
Converted to Next.js
Next.js
After the first version was built with HTML, CSS and JavaScript, we converted the website into a Next.js framework. The goal was to keep the same visual design while making the project easier to scale, update and maintain.
The work involved restructuring the static code into reusable React components, setting up page-based routing and preparing the site for a more production-ready workflow.
Reusable sections
The original static pages were divided into smaller React components so recurring sections, buttons and content blocks could be reused across the website.
Clearer routing
Each page was moved into the Next.js app structure, making the site easier to maintain as the service offer and company content grows.
Better foundation
The migration created a stronger base for performance, SEO metadata and future features without changing the visual identity of the brand.
View the live website
Studio Hackspett is live as a clear, responsive website for the studio's brand and services.
Visit Studio Hackspett